Forum Moderators: open
Can this be done and does anyone have a link to an example of this?
But iframes were not a viable option for that website, so what I did was use some dHTML - the links trigger a show/hide divs function - and I put each "linked to" section of the content in its own <div></div> element.
Further scripting was then needed, because visitors from search engines would not immediately see their search words on screen. But with a few hours of scripting it all worked out. In fact, there's been a lot of positive feedback from users about how easy the pages are to work with.
Read the w3c specs for "how-to" examples:
[w3.org ]
Actually look at that pages source code - they do much like you are asking.
Unless I misunderstand the requirements, this should do just fine;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>Jump into scrollable div</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
p {
margin-top: 0;
}
#holderdiv {
width: 150px;
height: 75px;
overflow: auto;
border: 1px solid black;
}
/*]]>*/
</style>
</head>
<body>
<p><a href="#top">top</a><br />
<a href="#here">here</a><br />
<a href="#there">there</a><br />
<a href="#everywhere">everywhere</a></p>
<div id="holderdiv">
<p id="top">top<br />
filler<br />
filler<br />
filler</p>
<p id="here">here<br />
filler<br />
filler<br />
filler</p>
<p id="there">there<br />
filler<br />
filler<br />
filler</p>
<p id="everywhere">everywhere<br />
filler<br />
filler<br />
filler</p>
</div>
</body>
</html>
cheers,
gary
Now I have to redesign everything. At least I'm learning something.
So, as a general rule, I will stay away from frames and iframes.
Unfortunately the above example and all variations I have tried so far break in Opera.
Fine in IE 5.0/5.5/6.0, fine in Netscape 7.*, fine in Firefox from 0.7 (at least) on. But not in Opera 7.x.
Even Netscape 4.79 and IE 5.5
Unfortunately the above example and all variations I have tried so far break in Opera.After seeing the comment, I said to myself, "self, maybe iamlost didn't try an anchor+name". Well, he probably did, and no, it doesn't work either.
I'm getting just a bit fed up with Opera. There was a time when I thought it was a pretty good browser (Opera5?). I just keep running into more and more non-conformance and just weirdly buggy behavior.
The trouble is, Opera's behavior could arguably be a correct one. In my example, if you shorten the browser window so that only the links are seen, clicking one will shift the div up to top of viewport if the named element, hidden or not, is below the window. If the named element were scrolled out of the div to the top, and it would be in the viewport were it not hidden, it will not shift.
Ah well, cheers,
gary
