сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
Div Example Table Example Table Example 2 Table Example 3
The script is coded into the parent page but the scroll links in the parent page are written by the page loaded into the iframe, this is to ensure that if multiple pages are used with a different number of content areas the number of links will correspond.
The links are removed from the parent page when the iframes current page is unloaded so that if a non scrolling page is used in the iframe unrelated links are not shown.
Each link must correspond to its relative anchor id
<div id="anchor1"> Contents </div>
Links can also be used in the iframe page, if required
<a href="#null" onclick="parent.scrollToDiv('anchor1')">Display 1</a>
Note the reference to the parent in the link.
Netscape7 decided to throw its toys out its pram when the iframes scrolling attribute was set to "no", to hide the iframes scrollbars, the iframe would not scroll unless this attribute was set to "yes"and will unfortunately show the horzontal scrollbar. For IE6+, Mozilla, and Firefox the iframes scrolling attribute can be set to "no" without any problems. Because of this difference the iframe is dynamically written to the page and the scrolling attribute set for the browser being used.
Parent Page
<HTML> <HEAD> <TITLE>Iframe Scroll Horizontal</TITLE> <script type="text/javascript"> <!-- // Jeff //www.huntingground.freeserve.co.uk timer=null function scrollToDiv(id){ steps=20 curPos=window.frames["myiframe"].document.body.scrollLeft
if(curPos<nextPos){ if((nextPos-curPos)<steps){steps=1} window.frames["myiframe"].scrollBy(steps,0) clearTimeout(timer) timer=setTimeout("scrollToDiv('"+id+"')",20) if(curPos>=nextPos||curPos>=totalWidth){ clearTimeout(timer) } } else{ if(curPos>nextPos){ if((curPos-nextPos)<steps){steps=1} window.frames["myiframe"].scrollBy(-steps,0) clearTimeout(timer) timer=setTimeout("scrollToDiv('"+id+"')",20) } else{ clearTimeout(timer) } } } //--> </script> </HEAD> <BODY> <h1>Iframe Scroll Horizontal</h1> <div id="iframelinks"> </div> <P> <center> <script type="text/javascript"> if(navigator.userAgent.indexOf("Netscape")!=-1){ oScroll="yes" } else{ oScroll="no" }
} </script> </center> </BODY> </HTML>
Example iframepage.htm
<HTML> <HEAD> <TITLE>Iframe Page</TITLE> <script type="text/javascript"> function createLinks(){ parent.document.getElementById("iframelinks").innerHTML='<a href="#null" onclick="scrollToDiv(\'td1\')">Display 1</a> ' +'<a href="#null" onclick="scrollToDiv(\'td2\')">Display 2</a> ' +'<a href="#null" onclick="scrollToDiv(\'td3\')">Display 3</a> ' +'<a href="#null" onclick="scrollToDiv(\'td4\')">Display 4</a> ' } function clearLinks(){ parent.document.getElementById("iframelinks").innerHTML="" } </script> </HEAD> <BODY onload="createLinks()" onunload=" clearLinks()" style="margin:0px"> <table border="1" style="width:2400px;height:350px"> <tr valign="top"> <td id="td1" style="width:600px" bgcolor="#aaffaa"> <div style="text-align:center"> <b>Table Cell One</b> </div> <P>This example has 4 cells set the same width as the iframe and is controlled only by the links in the parent. </td> <td id="td2" style="width:600px" bgcolor="#ffffaa"> <div style="text-align:center"> <b>Table Cell Two</b> </div> </td> <td id="td3" style="width:600px" bgcolor="#ffaaaa"> <div style="text-align:center"> <b>Table Cell Three</b> </div> </td> <td id="td4" style="width:600px" bgcolor="#aaaaff"> <div style="text-align:center"> <b>Table Cell Four</b> </div> </td> </tr> </table> </BODY> </HTML>