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 (15 comments total)

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

Is this related to news sites where it seems like the entire text of the article is a giant clickable link that does nothing? It's highly annoying when there's a hover attribute applied to the text that, for example, resizes it slightly, or turns it bold, which results in the entire page shifting wildly.
posted by odinsdream at 8:47 AM on February 18, 2005

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

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

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

gentle, it doesn't appear to work in Safari. In Firefox, not only does clicking the paragraph scroll the opposite window, but the entire page is scrolled down to the bottom of the window.
posted by odinsdream at 8:37 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

"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