Question

I’ve used some code I found on this thread about random divs to create a set of 3 Facebook Like buttons that are supposed to display at random on page load.

Problem is, it works fine in jFiddle but fails completely whenever I put it into production.

I borrowed this code from Nick Craver and made some very basic modifications, essentially just changing the class name from ‘Image’ to ‘facebookLike’:

HTML:

<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fcsuvolleyball&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fcsurams&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FCoachJimMcElwain&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>​

jQuery code:

var divs = $("div.facebookLike").get().sort(function() {
    return Math.round(Math.random()) - 0.5; //random so we get the right +/- combo
}).slice(0, 1)
$(divs).appendTo(divs[0].parentNode).show();​

Here is a link to the page: http://www.csurams.com/test/facebook.html As you can see, nothing is happening.

I can’t tell if the problem is related to the display:none; style rule or something else. However, when I remove the display:none; all three divs show…

Any help is greatly appreciated, been banging my head on my desk for a while now 🙂

Answer 1

First of all, you should’nt be using jQuery 1.3, it’s 1.8.2 now?

Secondly, you did’nt wrap your code:

<script type="text/javascript">
    $(function() {
        var divs = $("div.Image").get().sort(function(){ 
            return Math.round(Math.random())-0.5;
        }).slice(0,1);
        $(divs).appendTo(divs[0].parentNode).show();​
    });
</script>

Also notice the strange characters at the end, you’ll have to delete those as they are in your code as well, and they sometimes get like that when you copy stuff from jsFiddle, I’ll keep the characters in there so you see them.