Link to home
Start Free TrialLog in
Avatar of Carl3003
Carl3003

asked on

can i lock the iframe scroll bar when I am trying to open another link?

Hi,
Basically i have a page with couple of buttons and an iframe. Each button has a different property which onclick event i pass to the iframe location and the iframe reloads depending the value which i am passing. That works fine. My problem is that every time the iframe reloads, the scroll bar comes as the top of the page. Since my iframe has a long list, and iframe hight is relatively small, the users needs to scroll down to review the data. When the user press another button, the iframe scroll goes by default on the top of the page and the user needs to scroll down again. This is somewhat annoying. Do you have any suggestions?
Thanks in advance.
ASKER CERTIFIED SOLUTION
Avatar of jessegivy
jessegivy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You can do what you are asking.  You can check the scroll position before you reload the page and then set it when the page is reloaded.  This requires a function in the main page to store the scroll positions (I'm saving and setting both X and Y scroll positions) and another function to set the scroll position of the newly loaded page.  The key then is to have the page you are loading call the function to reset the scroll position.  If you try to do this before the page is fully loaded it will not work, that's why the page in the frame has to call it.

Hope this helps,

Neal.


Here's the code to go into the main page:

<script type=text/javascript>
var scrollX, scrollY;
function loadPage() {
  if (document.all) {  // IE
    if (!window.frames[0].document.documentElement.scrollLeft)
      scrollX = window.frames[0].document.body.scrollLeft;
    else
      scrollX = window.frames[0].document.documentElement.scrollLeft;
    if (!window.frames[0].document.documentElement.scrollTop)
      scrollY = window.frames[0].document.body.scrollTop;
    else
      scrollY = window.frames[0].document.documentElement.scrollTop;
  }  
  else  { // Mozilla
    scrollX = window.frames[0].pageXOffset;
    scrollY = window.frames[0].pageYOffset;
  }
  window.frames[0].location='index.asp';
}

function setScroll() {
  window.frames[0].scrollTo(scrollX,scrollY);
}

</script>
-----------------------------------------------------


In the frame page add an onLoad event:
<body onload="parent.setScroll();" >