Changing display:none to display:block shows inconsistent behavior on different browsers

Question

I have a jewelry gallery page with several thumbnail images linked to separate divs that are hidden using display:none in a linked CSS. Each hidden div has a larger image of the jewelry, some text, plus a Facebook Like button and a Twitter Tweet button.

I originally used visibility:hidden and toggled to visibility:visible, but the Facebook buttons on hidden divs showed through - I believe as a result of the javascript that Facebook supplies (part of the coding for using a Facebook Like button?). FB buttons on hidden layers showed through on top of content in the visible layer.

I also tried using opacity to hide the layers until a user clicked on a thumbnail. The display:block technique has worked best so far.

The page now loads with the div for the 1st thumbnail made visible by display:block done inline. A click on another thumbnail triggers a jQuery function that toggles the associated div to display:block. I found the jQuery function here: https://stackoverflow.com/a/4261534/3712201

All works fine on Safari and Chrome on Mac OS and Windows 7. On IE 11, the Facebook and Twitter buttons work for the initial item on the page, but the Facebook button doesn't show for the other divs.

Firefox behavior is mixed on both Mac OS and Win. The div that loads with the initial item works, but the Facebook button disappears after about 35 seconds. On the divs revealed by clicking the thumbnails, the Twitter button is unclickable until after the Facebook button has pulled its disappearing act.

HTML

<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Handmade Earrings</title>
<link href="test_styles_stack.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper"> 
  <script language="JavaScript">
$(document).ready(function(){
  $(".gridRow a").click(function(event){
    event.preventDefault();
  });
});
</script> 
  <script type="text/javascript">
function toggleVisibility(newSection) {
        $(".grid_bigImage").not("#" + newSection).hide();
        $("#" + newSection).show();
    }</script>
  <div id="fb-root"></div>
  <script language="JavaScript">(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <div class="bigImage_wrapper">
    <div class="grid_bigImage" id="ear1" style="display:block"><img src="images/bEar_RubyPearlWireWrap.jpg" width="620" height="355" alt=""/>
      <p>RUBY AND SWAROVSKI PEARL CLUSTER EARRINGS</p>
      <ul>
        <li>&#8226; Glass Ruby beads wrapped on Gold filled wire around a 10mm Swarovski Pearl</li>
        <li>&#8226; Gold Filled hand forged ear wires</li>
        <li>&#8226; Measures approximately 1 1/2" in length from top of ear wire</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike1" data-href="http://webkazoo.com/test/earrings.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings.html" data-text="Check out the Ruby & Swarovski Pearl Cluster Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    </div>
    <div class="grid_bigImage" id="ear2"><img src="images/bEar_MintChalcedonyHematite.jpg" width="514" height="620" alt=""/>
      <p>MINT CHALCEDONY HEMATITE CLUSTER EARRINGS</p>
      <ul>
        <li>&#8226; Mint Chalcedony measure 1 2/16"</li>
        <li>&#8226; 3mm faceted Hematite wire wrapped stones (14K Gold Filled)</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike2" data-href="http://webkazoo.com/test/earrings2.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings2.html" data-text="Check out the Mint Chalcedony Hematitle Cluster Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    </div>
    <div class="grid_bigImage" id="ear3"><img src="images/bEar_FacetGemstoneBriolette.jpg" width="566" height="620" alt=""/>
      <p>FACETED GEMSTONE BRIOLETTE EARRINGS WITH MIXED WRAPPED STONES</p>
      <ul>
        <li>&#8226; Faceted Briolette Gemstones measureing 1/2"</li>
        <li>&#8226; 3mm faceted mixed wire wrapped stones (sterling silver)</li>
      </ul>
      <div class="fb-like" style="float:left; margin-right:10px; width:47px; height:20px" id="fbLike3" data-href="http://webkazoo.com/test/earrings3.html" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webkazoo.com/test/earrings3.html" data-text="Check out the Faceted Gemstone Briolette Earrings" data-count="none">Tweet</a> 
      <script language="JavaScript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
    </div>
  </div>
  <div class="insideContent">
    <div class="gridWrapper">
      <h1>EARRINGS</h1>
      <div class="gridRow"><a href="#" onClick="toggleVisibility('ear1');"><img src="images/sEar_RubyPearlWireWrap.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb1"/></a><a href="#" onClick="toggleVisibility('ear2');"><img src="images/sEar_MintChalcedonyHematite.jpg" alt="" width="80" height="80" class="gridRow_item" id="thumb2"/></a><a href="#" onClick="toggleVisibility('ear3');"><img src="images/sEar_FacetGemstoneBriolette.jpg" alt="" width="80" height="80" class="gridRow_itemLast" id="thumb3"/></a></div>
    </div>
  </div>
</div>
</body>
</html>

CSS

     body {
    margin: 0;
    border: 0;
    padding-bottom:50px;
}
#wrapper {
    width: 1000px;
    position: relative;
    margin:0 auto;
    top:0;
    background-color:#daf5f3;
}
h1 {
    position:relative;
    top:0;
    left:0;
    margin-top:0;
    padding-top:0;
    font-family:"copperplate_fsregular", Palatino, "Trebuchet MS", sans-serif;
    font-size:14px;
    font-weight:bold;
    line-height:18px;
    letter-spacing:2px;
}
img {
    border:0;
}
.insideContent {
    position: relative;
    width: 920px;
    margin: 0 auto;
    padding:20px 40px 0 40px;
}
.gridWrapper {
    position:relative;
    width:260px;
    min-height:720px;
    padding-right:40px;
    left:0;
    top:0;
}
.gridWrapper p {
    position:relative;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
    text-align:left;
}
.gridRow {
    position:relative;
    width:260px;
    height:80px;
    margin-bottom:15px;
}
.gridRow_item {
    float:left;
    width:80px;
    margin-right:10px;
}
.gridRow_itemLast {
    float:left;
    width:80px;
    margin-right:0;
}
.bigImage_wrapper { 
    position:relative;
    width:620px;
}
.grid_bigImage {
    position:absolute;
    width:620px;
    height:620px;
    top:20px;
    left:340px;
    display:none;
    background-color:#daf5f3;
    z-index:2;
}
.grid_bigImage p, ul, li {
    position:relative;
    width:560px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}
.grid_bigImage p, ul {
    left:0;
    margin:7px 0 0 0;
    padding:0;
}
.grid_bigImage li {
    display:inline;
    margin-left:0;
}

Test page here: http://webkazoo.com/test/test_earrings_stack.html

Thanks in advance on my first question here.

I added references to previous attempts using visibility and opacity; and source of toggle function. — webkazoo, Jun 09 '14 at 17:17

webkazoo · Accepted Answer · 2014-06-15T22:18:30.080

The solution to this issue turned out to be using the iFrame version of the Facebook button code, instead of the HTML5 version with the Facebook SDK.js. That was suggested by another developer away from this board.

I'm leaving up the test page, which uses the HTML5 Facebook coding.

Recap: doesn't work using IE11 on Windows 7. It "works" on Firefox Windows, but the Facebook buttons disappear on the 2nd and 3rd items after about 45 seconds. Works for other browsers on Win and Mac OS.

Changing display:none to display:block shows inconsistent behavior on different browsers

1 Answers1