SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Running Script in innerHTML

    I have social buttons (digg, reddit, stumble) on my site and they consistently stall my pages as they wait for them to load. So my idea was to do an onload script that puts the buttons into a div layer waiting for them. In short, I don't want the social button scripts running until the page has loaded.

    My idea was:

    Code:
    function socialite() {
    
    document.getElementById('socialfloat').innerHTML = '<div style=" background:url(/images/socialfloat.png) center top; padding:16px 0px 0px 0px; margin:0 auto;"><span style="padding-left:8px; margin:0 auto;"><script type="text/javascript">  tweetmeme_source = \'traileraddict\'; <\/script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><\/script></span><br /><br /><span style="padding-left:3px; margin:0 auto;"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><\/script></span> <br /><br /><span style="padding-left:8px; display:block;"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"><\/script></span><br /><span style="padding-left:8px; margin:0 auto;"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"><\/script></span><br /><br /><span style="padding-left:8px; margin:0 auto; display:block;"><a class="DiggThisButton DiggMedium" style="float:none; margin:0 auto; display:block !important;"></a></span><br /><a href="#" onclick="closesocial(); return false;" style="background:url(/images/socialfloat.png) center bottom; height:22px; width:100%; border:0px; display:block;"></a></div>';
    faderIn('socialfloat');
    
    }
    Basically load the script codes into the DIV layer waiting. Didn't work, as the scripts aren't being evaluated/run. Is there a way to get this to work?

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The best thing is just to put them at the bottom of the body, before the closing </body> tag.

    To get the scripts to be evaluated/run you need to create the script using DOM methods rather than innerHTML. I hadn't thought of this before, but some quick research led me to find that not all browsers will parse SCRIPTs added via innerHTML.

    The other alternative is to just look at what those scripts produce and modify them into a single script that you host. They can't be very complicated, and the benefits are obvious.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best thing is just to put them at the bottom of the body, before the closing </body> tag.
    I did that. I put all the javascript requests down at the bottom of the body in a hidden div and used the innerhtml and the same javascript codes and some of them ended up working!

    So, my bottom div has

    Code:
    <div style="display:none;">
    <script type="text/javascript">tweetmeme_source = 'traileraddict';</script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
    </div>
    And my innerhtml that runs on pageload has
    Code:
    document.getElementById('socialfloat').innerHTML = '<div style="background:url(/images/socialfloat.png) center top; padding:16px 0px 0px 0px; margin:0 auto;" id="innersocial"><span style="padding-left:8px; margin:0 auto;"><script type="text/javascript">tweetmeme_source = \'traileraddict\';<\/script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><\/script></span><br /><br /><span style="padding-left:3px; margin:0 auto;"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><\/script></span> <br /><br /><span style="padding-left:8px; display:block;"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"><\/script></span><br /><span style="padding-left:8px; margin:0 auto;"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"><\/script></span><br /><br /><span style="padding-left:8px; margin:0 auto; display:block;"><a class="DiggThisButton DiggMedium" style="float:none; margin:0 auto; display:block !important;"></a></span><br /><a href="#" onclick="closesocial(); return false;" style="background:url(/images/socialfloat.png) center bottom; height:22px; width:100%; border:0px; display:block;"></a></div>';
    3 of the five buttons do show up then. But the StumbleUpon and TweetMeMe do not.

    I really want to load my social buttons last, as I hate making my users wait for stalled pages (brought on at times by the buttons). Is there a better way I could be doing this? Like loading in a div at the bottom than moving the contents of that div into the new div?

    Any info appreciated. Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like a found a solution for the most part.

    I wrote everything into the hidden (bottom) div layer, and then had javascript basically transfer the content by grabbing the innerHTML of one and moving to innerHTML of other.

    Works great, but for some reason the facebook button:

    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

    The button gets butchered on the new innerhtml. I've attached a screencapture. Could the innerhtml somehow be putting an error in the html code?

    Thanks
    Ryan

    *I should point out that IE does read the button the way it is supposed to be seen. But all other browsers see the superwide version.
    Attached Images Attached Images
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    If my added comments are correct you are trying to use innerHTML to add
    HTML Code:
    <div style="background:url(/images/socialfloat.png) center top; padding:16px 0px 0px 0px; margin:0 auto;" id="innersocial">
    <span style="padding-left:8px; margin:0 auto;">
    <!-- This does NOT Show -->
    <script type="text/javascript">tweetmeme_source = \'traileraddict\';<\/script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"><\/script>
    </span>
    <br /><br />
    <span style="padding-left:3px; margin:0 auto;">
    <!-- This Does Show -->
    <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><\/script>
    </span>
     <br /><br />
    <span style="padding-left:8px; display:block;">
    <!-- This does NOT Show -->
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"><\/script>
    </span>
    <br />
    <span style="padding-left:8px; margin:0 auto;">
    <!-- This Does Show -->
    <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"><\/script>
    </span>
    <br /><br />
    <span style="padding-left:8px; margin:0 auto; display:block;">
    <!-- This Does Show -->
    <a class="DiggThisButton DiggMedium" style="float:none; margin:0 auto; display:block !important;"></a>
    </span>
    <br />
    <a href="#" onclick="closesocial(); return false;" style="background:url(/images/socialfloat.png) center bottom; height:22px; width:100&#37;; border:0px; display:block;"></a>
    </div>
    Do the ones that "show" "work"?

    As for "OK in IE" that's because IE does innerHTML, but as Raffles mentioned, it can cause problems in other browsers. Seriously, I know the code is more verbose, but try using DOM instead.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. you nailed it, but they all show now with the javascript taking the innerhtml from a hidden div and placing it into a top div.

    Works great. THe only drawback now is handling the botched Facebook button, which seems to be encountering a styling error in the new div (but not in the bottom div where it is originally placed).

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright guys, here's a nice FYI for the Facebook Share Button.

    I couldn't get the button to work because the external FB javascript already ran with the first button located in the bottom/hidden div. Once it runs, no new buttons activate properly.

    So I pulled out the script and externally ran it after the innerhtml of the hidden div was moved to the other div layer (body onload)

    Code:
     var script= document.createElement('script');
       script.type= 'text/javascript';
       script.src= 'http://static.ak.fbcdn.net/connect.php/js/FB.Share';
       document.body.appendChild(script);
    That script then runs and makes the facebook button work properly.

    Took lots of trial and error, but I'll show you the finished column shortly. The page currently works in Chrome, Safari, IE7, IE8 and Firefox 3.

    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for posting the solution.


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
  •