Random <div> display on load w/ jQuery not working
<p>I've used some code I found on <a href="http://stackoverflow.com/questions/4205166/showing-random-divs-using-jquery">this thread about random divs</a> to create a set of 3 Facebook Like buttons that are supposed to display at random on page load.</p>

<p>Problem is, it <a href="http://jsfiddle.net/devinkoncar/RJMhT/1060/" rel="nofollow">works fine in jFiddle</a> but fails completely whenever I put it into production.</p>

<p>I borrowed this code from Nick Craver and made some very basic modifications, essentially just changing the class name from 'Image' to 'facebookLike':</p>

<p>HTML:</p>

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

<p>jQuery code:</p>

<pre><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();​
</code></pre>

<p>Here is a link to the page: <a href="http://www.csurams.com/test/facebook.html" rel="nofollow">http://www.csurams.com/test/facebook.html</a> As you can see, nothing is happening.</p>

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

<p>Any help is greatly appreciated, been banging my head on my desk for a while now :-)</p>
