Go Back   AnandTech Forums > Software > Programming

· Hardware and Technology
· CPUs and Overclocking
· Motherboards
· Video Cards and Graphics
· AMD Video Cards
· Nvidia
· Displays
· Memory and Storage
· Power Supplies
· Cases & Cooling
· SFF, Notebooks, Pre-Built/Barebones PCs
· Networking
· Peripherals
· General Hardware
· Highly Technical
· Computer Help
· Home Theater PCs
· Consumer Electronics
· Digital and Video Cameras
· Mobile Devices & Gadgets
· Audio/Video & Home Theater
· Software
· Software for Windows
· All Things Apple
· *nix Software
· Operating Systems
· Programming
· PC Gaming
· Console Gaming
· Distributed Computing
· Security
· Social
· Off Topic
· Politics and News
· Discussion Club
· Love and Relationships
· The Garage
· Health and Fitness
· Home and Garden
· Merchandise and Shopping
· For Sale/Trade
· Hot Deals with Free Stuff/Contests
· Black Friday 2015
· Forum Issues
· Technical Forum Issues
· Personal Forum Issues
· Suggestion Box
· Moderator Resources
· Moderator Discussions

Thread Tools
Old 12-05-2012, 05:27 PM   #1
TechBoyJK's Avatar
Join Date: Oct 2002
Posts: 15,862
Default ajax div swap causes page position to reset

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.

Originally posted by: n0cmonkey
You're being difficult. You have not provided us with the information we need to troubleshoot the problem. You have not given us errors, you're vague about where the problem is, you are not answering the questions we ask. In short, you DON'T KNOW HOW TO THINK. Give back that piece of paper you think makes your intelligent, apologize, destroy your computer and go live in the woods kid.
TechBoyJK is offline   Reply With Quote
Old 12-05-2012, 08:55 PM   #2
Diamond Member
Join Date: Apr 2005
Posts: 3,163

Put an anchor inside the div and navigate to it whenever the refresh event fires?
douglasb is offline   Reply With Quote
Old 12-05-2012, 11:47 PM   #3
Ken g6
Elite Member
Ken g6's Avatar
Join Date: Dec 1999
Location: 🌲 Colorado 🌲
Posts: 11,316

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.
Look for really BIG primes with TeAm AnandTech PrimeGrid!
Next race: June 20-25
Curse your sudden but inevitable betrayal, Intel!
Ken g6 is online now   Reply With Quote
Old 12-06-2012, 11:39 AM   #4
Golden Member
GregGreen's Avatar
Join Date: Dec 2000
Location: Durham, NC
Posts: 1,663

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.
GregGreen is offline   Reply With Quote

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -5. The time now is 11:03 AM.

Powered by vBulletin® Version 3.8.8 Alpha 1
Copyright ©2000 - 2016, vBulletin Solutions, Inc.