DHTML advice sought.

February 18, 2005 2:24 AM

Can this be done with snazzy DOM scripting, or do I Flash or (shudder) Iframes?

On this mock-up I'm loading in two multi-paragraph records, one is a section of law, the second is guidance. All the info is loaded at the start.

What I want is a way for the user to click on the paragraph of their choice in the left "rule" window, and the relevant paragraph of guidance automatically scroll to its proper place at the top of the right-hand "guidance" window. I don't want to have to go back to the server and thus refresh the page.

I don't want to use Flash, and Iframes have accessibility problems. Can anyone tell me if it's possible using "DHTML" and give me a pointers about where I can look. I've had my fill of generic "what is dhtml" tutorials.

posted by Pericles to Computers & Internet (13 answers total)

Best answer: It's possible to ask the window to scroll to a certain page element, but I've never tried it with the CSS overflow attribute, which you seem to be using. In theory it should work. Try naming the guidance paragraph, eg.:

<p id="guidance42"> ... </p>

Find the element using document.getElementById('guidance42'), then calculate the element's absolute top coordinate (the top attribute alone is probably not sufficient; you need to traverse the containment hierarchy). Then use window.scrollTo() to scroll to the element.

IE, for all its faults, supports a nice method on elements called scrollIntoView() which you can test with; but as I recall, it's not a standard method.
posted by gentle at 8:09 AM on February 18, 2005

Response by poster: No, it's not related to those. Only the bullet/ number of the rule in the left window will be clickable ( tho that's not in my mockup), and will cause the right panel to scroll; nothing will be resized. I hate that too!
posted by Pericles at 9:13 AM on February 18, 2005

odinsdream: I think the phenomenon you mention occurs when the <a> tag is used as an anchor, rather than a link, as in <a name="news_story"> and is never closed. I know in Firefox, it will (correctly) apply the a, including .hover style to the following text.
posted by recursive at 9:43 AM on February 18, 2005

It's either what recursive said or the entire link is just to javascript:void();
posted by hardcode at 11:28 AM on February 18, 2005

Am I the only one for whom the trick at the first link of the question doesn't even work? I've tried both IE and Firefox. Clicking on the text on the left does not scroll the text on the right.
posted by bingo at 6:40 PM on February 18, 2005

bingo, I think the point was that it's a mockup and doesn't do what he wants.

I already gave the solution in my earlier comment, although, as I said, I haven't tested it specifically with overflow blocks. It works fine with scrolling windows. Pericles, do you need a full example, or can you get by on your own?
posted by gentle at 8:34 PM on February 18, 2005

Best answer: Sample solution. Tested to work in Firefox and IE.
posted by gentle at 8:43 PM on February 18, 2005

Response by poster: Thanks Gentle!
posted by Pericles at 12:28 AM on February 19, 2005

Oh, I didn't realize it was his own website he was linking to.
posted by bingo at 9:01 AM on February 19, 2005

Response by poster: "Firefox .. the entire page is scrolled down to the bottom of the window."

Yeah, that's a shame .. any idea Gentle?
posted by Pericles at 10:57 AM on February 19, 2005

odinsdream, I don't have Safari. But it doesn't surprise me. scrollIntoView is an IE invention that Firefox has copied. However, Safari probably supports scrollTo, which can be used the way I described earlier.

In Firefox the entire page is scrolled a bit, which seems unnecessary, but not terrible.
posted by gentle at 6:08 PM on February 19, 2005

The second, more portable solution is to use <a name="...">

For example:

<a name="guidance1">First paragraph <a name="guidance2">Second paragraph
Then each clickable paragraph looks like this:

<a href="#guidance1">First paragraph <a href="#guidance2">Second paragraph
Use CSS to make the clickable paragraphs less link-like (eg., underlined only on hover).
posted by gentle at 6:11 PM on February 19, 2005

Well, MeFi screwed that up. Let's try again.

For example:

<a name="guidance1">First paragraph</a>
<a name="guidance2">Second paragraph</a>

Then each clickable paragraph looks like this:

<a href="#guidance1">First paragraph</a>
<a href="#guidance2">Second paragraph</a>
posted by gentle at 6:12 PM on February 19, 2005