ajax div swap causes page position to reset

[TechBoyJK]

I have this code which replaces the initial loaded graph (about hit data) with an updated version (refreshes every minute).

$('##dnsGraph').fadeOut("slow").load('dnsStatsNowG raph.cfm?dnsID=#dnsID#').fadeIn("slow");

The graph is 'below the fold' so when you look at it, the page is halfway scrolled down. When that div refreshes, it kicks the page back up to the top and you have to scroll down again.

Ideas?

[douglasb]

Put an anchor inside the div and navigate to it whenever the refresh event fires?

[Ken g6]

I would say the goal is to dissociate the contents of the div with the formatting of the page. Try placing it inside another div with constant width and height and overflow:hidden.

[GregGreen]

I'm guessing this has to do with the use of the fadeOut and fadeIn methods. When you fadeOut, it animates the opacity to 0 and then sets the css property display to none (which would give your element a height of 0 and possibly force a bit of rearranging of content on the rest of the page).

To troubleshoot this, try taking the fadeOut and fadeIn off your chain and see if you still have the "kicking up" problem when you are only running the load method.

If you find this to be your issue, I'd try using the animate method with the opacity property or else position an empty div over your chart and fadeIn and fadeOut (as opposed to fadeOut and fadeIn). With the latter technique, you can use callback functions to "chain" everything together since they would have different selectors. Ken_g6's solution would probably work if this is the case as well.