SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery social share script

    Hello everyone,


    Trying to add this to my vbulletin site in footer. (note I'm not a pro coder so please bear with me).


    http://plugins.in1.com/share/demo


    I'm not sure what I'm doing wrong here.


    I've added this in the headinclude template


    Code:
    <script type="text/javascript">
    	$('#mydiv').share({
            networks: ['facebook','googleplus','twitter','tumblr','email','stumbleupon','digg']
        });
    </script>
    
    
    <script type="text/javascript" src="clientscript/jquery.share.js"></script>
    <link rel="stylesheet" type="text/css" href="clientscript/jquery.share.css" />

    The paths are correct.


    I added this in footer template


    Code:
    <div id="mydiv"></div>

    Doesn't show up at all. Any ideas?

    I even added the whole thing in footer template only, tried that variation and even tried putting the css/js lines prior to the <script> code section, still doesn't show up.



    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    The code you posted looks fine.

    Could you post a link to a page where I can see this not working, as there may well be something else at work.

  3. #3
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. You can view the site at
    http://www.talkjesus.com/forum.php

    The code is entirely in the footer template, but it still doesn't appear in the footer anywhere.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Currently you have the following starting in line 3050 of your page:

    Code:
    <script type="text/javascript">
      $('#mydiv').share({
        networks: ['facebook','googleplus','twitter','tumblr','email','stumbleupon','digg']
      });
    </script>
    
    <script type="text/javascript" src="clientscript/jquery.share.js"></script>
    <link rel="stylesheet" type="text/css" href="clientscript/jquery.share.css" />
    
    <div id="mydiv"></div>
    It looks like you're trying to call the .share() function on your <div> element, before either the <div> exists in the page or the JavaScript which implements the .share() function has been included.

    Try changing the above to this:

    Code:
    <div id="mydiv"></div>
    
    <script type="text/javascript" src="clientscript/jquery.share.js"></script>
    <link rel="stylesheet" type="text/css" href="clientscript/jquery.share.css" />
    
    <script type="text/javascript">
      $('#mydiv').share({
        networks: ['facebook','googleplus','twitter','tumblr','email','stumbleupon','digg']
      });
    </script>
    Does that make a difference?

  5. #5
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Unfortunately that didn't fix it.

    I tried that in footer, header and headerinclude templates (not at the same time, but individually). None displayed the plugin.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Weird. It works just great for me when I make these changes locally.

    Can you change the code as I mention above, then let me know so that I can take another look.

  7. #7
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry but what do you mean change the code? That's what I did before and my follow up reply was in regards to those changes.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    When I had a look at the source code of your page, I could find no reference to the string:

    '<div id="mydiv">'

    or the string:

    'networks: ['

    It seems that the code you originally posted has now been removed from the page.

    I was just hoping you could put it back in, alter it as I originally mentioned, then let me know.

  9. #9
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry, yes I re-added it in order you suggested. It's there in footer template so will show up in source code
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Good, good.
    And now you can see the social media icons at the bottom of the page.


    P.S. Don't forget to refresh the page and clear your cache if necessary.

  11. #11
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Very strange Chrome wasn't clearing right. Works now.

    Appreciate your assistance
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    No problem.
    I like the design of your site BTW.

  13. #13
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see why Chrome was showing. I saw it in IE, but not Chrome and here's why. Once I'm logged in, the script does not show. This is now pretty odd. I don't know if it's a conflict with VB's built in Facebook login/connect script. Any help on this appreciated.

    PS: I moved it to the showthread template, if your not logged in it'll display floating right of thread title:
    http://www.talkjesus.com/bible-study...l-balance.html

    Once logged in, it disappears.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Can you shoot me some login credentials so I can have a look?

  15. #15
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PM'd you, thanks
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    The problem is that when you are logged in, jQuery is suddenly not defined, that is to say, you no longer reference the jQuery code in your page.
    When you are not logged in, it is included in the hgead section of your document on line 94:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    However, when you log in, this line vanishes from the source code.

    Could it be possible that you have two different templates for "logged in" and "not logged in"?

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Turning in now (it's late here).
    If you have any more questions, I'll pick this up tomorrow.

  18. #18
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None that I know of. That Google code was there by default in the template itself.

    Thanks for the help. I'll wait for tomorrow.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Good morning,

    Now the icons are gone, whether I'm logged in or not.
    I'm guessing you changed something?

  20. #20
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I just re-added it in the footer template.

    Code:
    <div id="mydiv" style="float:left"></div>
    
    
    <script type="text/javascript" src="clientscript/jquery.share.js"></script>
    <link rel="stylesheet" type="text/css" href="clientscript/jquery.share.css" />
    
    
    <script type="text/javascript">
      $('#mydiv').share({
        networks: ['facebook','googleplus','twitter','tumblr','email','stumbleupon','digg']
      });
    </script>
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Ok, now we're back to where we were last night.
    For whatever reason the jQuery library is not being included in the page when a user logs in.

    When I compare the <head> section of the page between a) being not logged in and b) being logged in, the following section is missing (i.e. it is present in case a), but not b))

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('a.login-window').click(function() {
    		
    		// Getting the variable's value from a link 
    		var loginBox = this.hash;
    
    		//Fade in the Popup and add close button
    		$(loginBox).fadeIn(300);
    		
    		//Set the center alignment padding + border
    		var popMargTop = ($(loginBox).height() + 24) / 2; 
    		var popMargLeft = ($(loginBox).width() + 24) / 2; 
    		
    		$(loginBox).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		// Add the mask to body
    		$('body').append('<div id="mask"></div>');
    		$('#mask').fadeIn(300);
    		
    		return false;
    	});
    	
    	// When clicking on the button close or the mask layer the popup closed
    	$('a.close, #mask').live('click', function() { 
    	  $('#mask , .login-popup').fadeOut(300 , function() {
    		$('#mask').remove();  
    	}); 
    	return false;
    	});
    	
    	$('#navbar_username').focus(function() {
    		$('#navbar_username').parent().addClass('active');
    	}); 
    	$('#navbar_username').blur(function() {
    		$('#navbar_username').parent().removeClass('active');
    	}); 
    	$('#navbar_password').focus(function() {
    		$('#navbar_password_hint').parent().addClass('active');
    	}); 
    	$('#navbar_password').blur(function() {
    		$('#navbar_password_hint').parent().removeClass('active');
    	}); 
    
    });
    </script>
    Can you check the templates and find out where that code is coming form?

  22. #22
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the headinclude template, it's wrapped in an 'if' conditional

    Code:
    <vb:if condition="$show['guest']"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('a.login-window').click(function() {
    		
    		// Getting the variable's value from a link 
    		var loginBox = this.hash;
    
    
    		//Fade in the Popup and add close button
    		$(loginBox).fadeIn(300);
    		
    		//Set the center alignment padding + border
    		var popMargTop = ($(loginBox).height() + 24) / 2; 
    		var popMargLeft = ($(loginBox).width() + 24) / 2; 
    		
    		$(loginBox).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		// Add the mask to body
    		$('body').append('<div id="mask"></div>');
    		$('#mask').fadeIn(300);
    		
    		return false;
    	});
    	
    	// When clicking on the button close or the mask layer the popup closed
    	$('a.close, #mask').live('click', function() { 
    	  $('#mask , .login-popup').fadeOut(300 , function() {
    		$('#mask').remove();  
    	}); 
    	return false;
    	});
    	
    	$('#navbar_username').focus(function() {
    		$('#navbar_username').parent().addClass('active');
    	}); 
    	$('#navbar_username').blur(function() {
    		$('#navbar_username').parent().removeClass('active');
    	}); 
    	$('#navbar_password').focus(function() {
    		$('#navbar_password_hint').parent().addClass('active');
    	}); 
    	$('#navbar_password').blur(function() {
    		$('#navbar_password_hint').parent().removeClass('active');
    	}); 
    
    
    });
    </script>
    </vb:if>
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Ah ha, now we're getting somewhere.

    Could you try moving the jQuery include out of the conditional block.

    So it's like this:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    
    <vb:if condition="$show['guest']">
    <script type="text/javascript">
      $(document).ready(function() {
        $('a.login-window').click(function() {
    This should then hopefully mean that jQuery is included on the page whether you are logged in or not.

  24. #24
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bingo you nailed it! Thank you Pullo

    Works, logged in or out.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Nice one!
    I knew we'd get there in the end.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •