By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

Frames and Classes

P: n/a
I have a web page with two frames, navigation and content. The nav
uses classes like so
<td align="center"
id="main"
style="cursor:pointer;"
onClick="parent.main.location.href='main.html'"
onMouseOver="this.className='nav0'"
onMouseOut="this.className='nav1'"
class="nav0">Main Page</td>

The class nav1 is the default state.
The class nav0 is the "lit" state.

What I need to do is make the "button" light up when a given page is
loaded and remain that way.

OnLoad of main.html, I can do:
onLoad="parent.frames['nav'].document.getElementById('main').className='nav0'"

Of course, once the mouse passes over the button, onMouseOut it
returns to the default state.

Is there a way to make the "lit" state persist?

While I am writing this, a possibility has crossed my mind. The
location of the content frame can evaluated and return the proper
class:

onMouseOut="
if (parent.content.href.indexOf('main')) {
this.className='nav0';
} else {
this.className='nav1';
}"

Or am I mixing JS and DHTML? My specialties are PHP and Perl and I am
into my 16th hour today. The words blur and sleep beckons. ;-)

TIA for any assistance!

Tom (aka Tyrone Slothrop)

Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Tyrone Slothrop <ts@paranoids.com> wrote in message
news:89********************************@4ax.com...
I have a web page with two frames, navigation and content. The nav
uses classes like so
<td align="center"
id="main"
style="cursor:pointer;"
onClick="parent.main.location.href='main.html'"
onMouseOver="this.className='nav0'"
onMouseOut="this.className='nav1'"
class="nav0">Main Page</td>

The class nav1 is the default state.
The class nav0 is the "lit" state.

What I need to do is make the "button" light up when a given page is
loaded and remain that way.

OnLoad of main.html, I can do:
onLoad="parent.frames['nav'].document.getElementById('main').className='nav0
'"
Of course, once the mouse passes over the button, onMouseOut it
returns to the default state.

Is there a way to make the "lit" state persist?

While I am writing this, a possibility has crossed my mind. The
location of the content frame can evaluated and return the proper
class:

onMouseOut="
if (parent.content.href.indexOf('main')) {
this.className='nav0';
} else {
this.className='nav1';
}"

It would be less hideously written as:
onMouseOut="this.className=(parent.content.href.in dexOf('main')>-1?'nav0':'n
av1'";

Better still, don't write it at all.

Put this code in your navigation page:
------------
var linkIndex=0; // or set to another initial value

for(var i=0,len=document.links.length; i<len; i++) // assign all link
mouseout events
document.links[i].onmouseout=function(){setLink(linkIndex)}

function setLink(n)
{
linkIndex=n;

for(var i=0,ll=document.links.length; i<ll; i++)
document.links[i].className=(n==i)?'nav1':'nav0';
}

setLink( linkIndex ) ;
----------

Then each content page would call setLink with a unique index:

parent.frames['nav'].setLink( 2 ); // In page corresponding to third link

--
S.C. http://makeashorterlink.com/?H3E82245A

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.