ajax div swap causes page position to reset

Discussion in 'Programming' started by TechBoyJK, Dec 5, 2012.

  1. TechBoyJK

    TechBoyJK Lifer

    Joined:
    Oct 17, 2002
    Messages:
    16,584
    Likes Received:
    44
    I have this code which replaces the initial loaded graph (about hit data) with an updated version (refreshes every minute).

    $('##dnsGraph').fadeOut("slow").load('dnsStatsNowGraph.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?
     
  2. Loading...


  3. douglasb

    douglasb Diamond Member

    Joined:
    Apr 11, 2005
    Messages:
    3,163
    Likes Received:
    0
    Put an anchor inside the div and navigate to it whenever the refresh event fires?
     
  4. Ken g6

    Ken g6 Programming Moderator, Elite Member
    Moderator

    Joined:
    Dec 11, 1999
    Messages:
    12,896
    Likes Received:
    405
    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.
     
  5. GregGreen

    GregGreen Golden Member

    Joined:
    Dec 5, 2000
    Messages:
    1,670
    Likes Received:
    0
    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.