jQuery css margin-top value not updating in IE 8 Standards mode

Question

I m building an auto-follow div that is bound to the   window  scroll   event   Here is my JavaScript   var alert top   0  var alert margin top   0     function       alert top       ActionBox   offset   top    alert margin top   parseInt     ActionBox   css  margin-top          window  scroll function          var scroll top     window  scrollTop        if scroll top  gt  alert top              ActionBox   css  margin-top     scroll top-alert top   alert margin top 2    px          console log  Setting margin-top to       ActionBox   css  margin-top           else             ActionBox   css  margin-top   alert margin top  px                       This code assumes that there is this CSS rule in place   ActionBox     margin-top  15px      And it takes an element with the id  ActionBox   in this case a div   The div is positioned in a left aligned menu that runs down the side  so it s starting offset is approximately 200 px    The goal is to start adding to the margin-top value once the user has scrolled past the point where the div might start to disappear off the top of the browser viewport  yes I know setting it to position  fixed would do the same thing  but then it would obscure the content below the ActionBox but still in the menu    Now the console log shows that the event is firing every time it should and it s setting the correct value   But in some pages of my web app the div isn t redrawn   This is especially odd because in other pages  in IE  the code works as expected  and it works every time in FF  Opera and WebKit    All pages evaluate  0 errors and 0 warnings according to the W3C validator and the FireFox HTMLTidy Validator   and no JS errors are thrown  according to the IE Developer Toolbar and Firebug    One other part to this mystery  if I unselect the  ActionBox margin-top rule in the HTML Style explorer in the IE Developer Tools then the div jumps immediately back in the newly adjusted place that it should have if the scroll event had triggered a redraw   Also if I force IE8 into Quirks Mode or compatibility mode then the even triggers an update   One More thing  it works as expected in IE7 and IE 6  thanks to the wonderful IETester for that

User · Answer

Try marginTop in place of margin-top  eg        ActionBox   css  marginTop   foo

User · Answer

I m having a problem with your script in Firefox  When I scroll down  the script continues to add a margin to the page and I never reach the bottom of the page  This occurs because the ActionBox is still part of the page elements  I posted a demo here    One solution would be to add a position  fixed to the CSS definition  but I see this won t work for you Another solution would be to position the ActionBox absolutely  to the document body  and adjust the top  Updated the code to fit with the solution found for others to benefit    UPDATED   CSS   ActionBox    position  relative   float  right      Script  var alert top   0  var alert margin top   0     function       alert top       ActionBox   offset   top    alert margin top   parseInt     ActionBox   css  margin-top   10        window  scroll function          var scroll top     window  scrollTop        if  scroll top  gt  alert top              ActionBox   css  margin-top     scroll top-alert top   alert margin top 2      px          console log  Setting margin-top to         ActionBox   css  margin-top           else             ActionBox   css  margin-top   alert margin top  px                       Also it is important to add a base  10 in this case  to your parseInt    e g   parseInt     ActionBox   css  top   10

User · Answer

I found the answer   I want to acknowledge the hard work of everyone in trying to find a better way to solve this problem  unfortunately because of a series of larger constraints I am unable to select them as the  answer   I am voting them up because you deserve points for contributing    The specific problem I was facing was a JavaScript onScoll event that was firing but a subsequent CSS update that wasn t causing IE8  in standards mode  to redraw   Even stranger was the fact that in some pages it was redrawing while in others  with no obvious similarity  it wasn t   The solution in the end was to add the following CSS   ActionBox     position  relative    float  right      Here is an updated pastbin showing this  I added some more style to show how I am implementing this code    The IE  edit code  then  view output  bug fudgey talked about still occurs  but it seems to be a event binding issue unique to pastbin  and similar services   I don t know why adding  float  right  allows IE8 to complete a redraw on an event that was already firing  but for some reason it does

User · Answer

The correct format for IE8 is         ActionBox   css    margin-top    10px          with this work

User · Answer

try this method      your id or class name   css    margin-top    18px

[javascript] jQuery .css("margin-top", value) not updating in IE 8 (Standards mode)

Examples related to javascript

Examples related to jquery

Examples related to internet-explorer-8

Examples related to ie-developer-tools