change color settings on a framed page with anchors

[rdoekes]

Hi,

I have a frameset with two pages. The top frame (name="top" src="top.html") contains a HTML page loaded with anchors. The bottom page (name="bottom" src="bottom.html") contains links to the topframe htmlpage
with anchors like: top.html#anchor1, top.html#anchor2

Clicking on the hyperlinks in the bottom frames makes the top frame page scroll to the anchor. So far WAD.

However, as an extra I would like to change the background color of the <div> following the anchor. How to change a color I know (using getElementById(i) and style) .

But which event triggers the scrolling? So when do i need to call the function which changes the color? (if (location.search) only works the first time you call this page, afterwards it bypasses this.

Thanks for any help,

-Rogier Doekes

[gil davis]

There is an event in the newer browsers called onScroll that will fire when the scrolling of the page changes.

I beleive you can inspect the window.location.hash attribute to find which anchor has been used to move the page.

[Fang]

Is this what you are trying to do:

<a href="javascript:ChangeBoth('div1', 'top.html#anchor1');">link</a><div id="div1">div text</div>

and

function ChangeBoth(divID, FileName) {
document.getElementById(divID).style.backgroundColor="Blue";
parent.top.location.href=FileName;
}

Or if the top frame does not change you could use:

<a href="javascript:ChangeBoth('div1');">link</a><div id="div1">div text</div>

and

function ChangeBoth(divID) {
document.getElementById(divID).style.backgroundColor="Blue";
parent.top.document.getElementById(divID).scrollIntoView();
}

The ID of the anchor and the div would have to be the same, different files so OK.

[rdoekes]

sorry it took me so long to reply.

Fang, your solution really worked for me.

Thanks for the help.

-Rogier Doekes