Facebook like button not going back side on the fixed div

Posted by Lahiru Chathuranga on Stack Overflow See other posts from Stack Overflow or by Lahiru Chathuranga
Published on 2012-09-15T18:43:34Z Indexed on 2012/09/16 3:38 UTC
Read the original article Hit count: 248

Filed under:
|
|
|
|

I added a Facebook like button to my website.My website has a fixed div on top of the page(blue color div in the image). The like button is below that(in a div which can scroll) My problem is when the page is scroll down the like button comes on top of the fixed div(blue color).I want to scroll it from the backside of the div.How can I do that? There are couple of screenshots I added

Before Scroll Before Scroll

After Scroll enter image description here

Here is my code of the fixed div

  <script type="text/javascript">
function got_to_signup(){

    window.location.href = "view/policy";
    }

</script>
<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=368003049941951";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


    <div style="width:100%;background-color:#0094d6;"  >
    <div id="dd" style="background-color:#0094d6; width:100%; height:75px;position:fixed;  " class="center "><div id="a" style="width:1010px; height:75px; background-color:#000000;background:url(xx.png); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner div_border">

      <table width="1010" border="0" >
        <tr >
          <td width="15%" rowspan="2"><a href="" style="cursor:pointer; cursor:hand;"><div style="width:200px; height:50px;background-color:none;"></div></a></td>
          <td width="22%" height="14">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td width="5%">&nbsp;</td>
          <td width="28%">&nbsp;</td>
          <td width="2%">&nbsp;</td>
          <td width="23%">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="4">


                </td>
          <td colspan="2"><span style="float: right; " ><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table;
    vertical-align: middle; color:#FFF; ">
            <table width="100%" border="0" >
              <tr >
                <td width="43%" style="text-align:center"> Start to bump !</td>
                <td width="29%"><div id='basic-modal'><span style="float: right; " ><input name="login_btn" type="button" class="login_button basic" id="login_btn" value="Sign in" /></span></div></td>
                <td width="28%"><span style="float: right; " ><form id="form_reg" method="post"><input name="register_btn" type="button" class="register_button" id="register_btn" value="Sign up" onclick="got_to_signup()"/></form></span></td>
                </tr>
              </table>
          </div></span></td>
          </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;">    Beta Version   </td>
          </tr>
      </table>

    </div></div></div>

here is my facebook like button code

</script>
<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=368003049941951";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


              <td height="21" colspan="2"> <table width="187" style="margin-left:3px;font-size:1px;background-image:url(share_back.png);background-repeat:no-repeat;border-radius:3px;" >
          <!--tweeter button-->
          <tr><td width="71"><a href="https://twitter.com/bump_lk" class="twitter-follow-button" data-show-count="false" style="float:right;">Follow @bump_lk</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>

    <!--facebook like button-->
          <td width="48"><div class="fb-like" data-href="https://www.facebook.com/Bump.lk" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" style="position:relative;"></div>
          </td></tr></table></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td >

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html