Forum Moderators: open
There is an anchor with every link in inframe window.
Click on a link, the line with the clicked link will be the top line in the inframe window. All lines outside of the inframe window would not move. This is the effect I need.
It works when all lines can been seen in one page (no need to use scroll bar).
It doesn't work well when a web page has more lines in it. After you click a link in the inframe window, this full page will scroll up, the lines above the inframe window can not been seen if you don't scroll down.
How to solve this problem?
[edited by: Marcia at 1:59 am (utc) on May 30, 2003]
[edit reason] No urls, please. [/edit]
Click on a link, the line with the clicked link will be the top line in the iframe window. All lines outside of the iframe window would not move. This is the effect I need.
It works when all lines can been seen in one page (no need to use scroll bar).
It doesn't work well when a web page has more lines in it. After you click a link in the iframe window, this full page will scroll up, the lines above the iframe window can not been seen if you don't scroll down.
How to solve this problem?
The following are three html files, run a.htm to see the effect.
**************************
a.htm
<html>
<head>
<title>gggggggggg</title>
</head>
<body>
a<br>
b<br>
c<br>
e<p>
<iframe name="I2" src="b.htm">do not support inframe</iframe>
iframe with b.htm in it.</p>
<p>
There is an anchor with every link in b.htm</p>
<p>
Click on a link, the line with the clicked link will be the top line in inframe
window. All lines outside of the iframe window would not move. This is the
effect I need.</p>
<p>
It works when all lines can been seen in one page (no need to use scroll bar),
please click <a href="c.htm">here</a> to see the effect.</p>
<p>
It doesn't work well when a web page has more lines in it, just like this page.
After you click a link in the iframe window, this full page will scroll up, the
line a,b,c,d can not been seen if you don't scroll down.
</p>
<p>
How to solve this problem?</p>
<p> </p>
<p>s</p>
<p>d</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>i</p>
<p>j</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
*************************
b.htm
<html>
<head>
<title>1</title>
</head>
<body>
<p><a href="b.htm#10">1</a></p>
<p><a href="b.htm#20">2</a></p>
<p><a target="I2" href="b.htm#30">3</a></p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p><a name="10">10</a></p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p><a name="20">20</a></p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p><a name="30">30</a></p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p> </p>
</body>
</html>
******************
c.htm
<html>
<head>
<title>gggggggggg</title>
</head>
<body>
a<br>
b<br>
c<br>
e<p>
<iframe name="I2" src="b.htm">do not support</iframe>
</p>
<p><a href="a.htm">back</a></p>
</body>
</html>
I can't suggest an elegant method to fix it (hopefully someone else with more knowledge can). I can suggest 2 alternative fixes, neither of which are elegant:
Method 1:
=========
Use frames instead of an iframe. i.e put your iframe in a frame, and put the rest of your web page which surrounds it in a number of frames (you may need up to 4: one for what is above your iframe, one for what is below it an done for what is on either side.)
Method 2:
=========
In a.htm, define ><a name="top"> at the top of the body. Use javascript with the onclick method to first do the equivalent of <a target="I2" href="b.htm#30"> then do the equivalent of <a target="_parent" href="a.htm#top"> then return false; In the normal href= part of the <a...> tag just keep it the way it is, that way people with Javascript turned off can still use your site, albeit with the scrolling effect you don't want.
Shawn
PS. I see you posted the same question to the ASP/microsoft forum as well. Probably best to avoid doing that.
<a href="b.htm#10" onclick='document.location.href="b.htm#10"; parent.location.href="a.htm#top"; return false;'>click here</a>
(All on one line)
However, doing the ...location.href="a.htm#top" will reload your original web page, so it may reload the iframe. So it may not work; give it a try.
I don't really understand why you can't do method one (although I agree it is not elegant).
Shawn
There is still one question:
How do I call the function?
What's a proper event?
Now, I am using onmouseover event. I don't think it is a good method.
The best time to call the function is after the iframe page has been loaded.
You can use the onscroll event... It is not part of the standard events for the body tag, but it is supported by IE 4 onwards.
For a more cross-browser solution, one option is to use the onclick event of the <a...> tag to set a timer, then reposition the parent after the timeout has expired.
Shawn