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:


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

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.

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


<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


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

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.

If my added comments are correct you are trying to use innerHTML to add

<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.

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

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)


 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

Thanks for posting the solution. :slight_smile: