Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Dec 12, 2012 09:24 PM by asplearning
Participant
909 Points
953 Posts
Dec 10, 2012 02:52 AM|LINK
Hello everyone, I have this markup and it is working fine in chrome and IE but not in firefox and opera. Please give me some advice:
<asp:Panel ID="panel1" runat="server"> <div id="serWrapper"> <div id="serCount"> </div> </div> </asp:Panel>
Here is the css:
#serWrapper { left: 760px; position: absolute; margin-left: 35px; width: 180px; } #serCount { position: absolute; top: 0; margin-top: 20px; margin-right:10px; border:1px dotted silver; font-size:14px; width:150px; background:white; text-align:right; padding:5px; } #serCount div { padding:5px; } #serCount.fixed { position: fixed; top: 0; }
And here is the jQuery:
$("document").ready(function () { var top = $('#serCount').offset().top - parseFloat($('#serCount').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) { $('#serCount').addClass('fixed'); } else { $('#serCount').removeClass('fixed'); } }); });
For your reference, I got the code from this link http://jqueryfordesigners.com/fixed-floating-elements/
thanks for your help.
Star
14412 Points
2452 Posts
Dec 10, 2012 05:26 AM|LINK
Hi,
when i tried this, its working same in both FF and IE.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div> <div id="serWrapper"> <div id="serCount"> <div class="fixed">abc def ghi</div> </div> </div> </div> </body> </html>
//is that any other extra code need to be added?
Dec 10, 2012 09:45 AM|LINK
thanks Raju dasa. That's weird. I will have to try it again when I get to the office tomrrow. Will get back as soon as possible.
Cheers.
Dec 10, 2012 08:26 PM|LINK
Hello everyone, after testing for 3 hours, I found the culprit but not sure why my page is working in Chrome and IE but not firefox and opera. It is because of this line for facebook sharing:
<a name="fb_share" type="button" 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>
Any idea why it is causing the problem?
Thanks.
Dec 11, 2012 04:45 AM|LINK
Hi, type attribute in <a> tag should be used for MIME type, but not for control type(button).
asplearning <a name="fb_share" type="button"
<a name="fb_share" type="button"
Dec 12, 2012 09:24 PM|LINK
Hello Raju, the line of code I posted earlier was directly quoted from facebook. I didn't modify anything.
For now, I just removed this line of code. Will have to look more into this when I have more time.
Regards;
asplearning
Participant
909 Points
953 Posts
fixed floating not working in firefox and opera?
Dec 10, 2012 02:52 AM|LINK
Hello everyone, I have this markup and it is working fine in chrome and IE but not in firefox and opera. Please give me some advice:
<asp:Panel ID="panel1" runat="server"> <div id="serWrapper"> <div id="serCount"> </div> </div> </asp:Panel>Here is the css:
#serWrapper { left: 760px; position: absolute; margin-left: 35px; width: 180px; } #serCount { position: absolute; top: 0; margin-top: 20px; margin-right:10px; border:1px dotted silver; font-size:14px; width:150px; background:white; text-align:right; padding:5px; } #serCount div { padding:5px; } #serCount.fixed { position: fixed; top: 0; }And here is the jQuery:
$("document").ready(function () { var top = $('#serCount').offset().top - parseFloat($('#serCount').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) { $('#serCount').addClass('fixed'); } else { $('#serCount').removeClass('fixed'); } }); });For your reference, I got the code from this link http://jqueryfordesigners.com/fixed-floating-elements/
thanks for your help.
raju dasa
Star
14412 Points
2452 Posts
Re: fixed floating not working in firefox and opera?
Dec 10, 2012 05:26 AM|LINK
Hi,
when i tried this, its working same in both FF and IE.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div> <div id="serWrapper"> <div id="serCount"> <div class="fixed">abc def ghi</div> </div> </div> </div> </body> </html>//is that any other extra code need to be added?
rajudasa.blogspot.com || blog@opera
asplearning
Participant
909 Points
953 Posts
Re: fixed floating not working in firefox and opera?
Dec 10, 2012 09:45 AM|LINK
thanks Raju dasa. That's weird. I will have to try it again when I get to the office tomrrow. Will get back as soon as possible.
Cheers.
asplearning
Participant
909 Points
953 Posts
Re: fixed floating not working in firefox and opera?
Dec 10, 2012 08:26 PM|LINK
Hello everyone, after testing for 3 hours, I found the culprit but not sure why my page is working in Chrome and IE but not firefox and opera. It is because of this line for facebook sharing:
Any idea why it is causing the problem?
Thanks.
raju dasa
Star
14412 Points
2452 Posts
Re: fixed floating not working in firefox and opera?
Dec 11, 2012 04:45 AM|LINK
Hi,
type attribute in <a> tag should be used for MIME type, but not for control type(button).
Check this site: http://www.w3schools.com/tags/tag_a.asp
rajudasa.blogspot.com || blog@opera
asplearning
Participant
909 Points
953 Posts
Re: fixed floating not working in firefox and opera?
Dec 12, 2012 09:24 PM|LINK
Hello Raju, the line of code I posted earlier was directly quoted from facebook. I didn't modify anything.
For now, I just removed this line of code. Will have to look more into this when I have more time.
Regards;