Welcome to WebmasterWorld Guest from 54.242.206.44

Forum Moderators: open

Message Too Old, No Replies

JavaScript: Menu targeting iframe?

     
7:55 pm on Aug 26, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 22, 2003
posts:11
votes: 0


Hi there,

I'm completely new to css,.. yes another one....

I'm trying to make a menu that links to an iframe on the same page. To make it look nicer I added a the following:

onclick="style.backgroundColor='#CCCCCC'; iframe1.location='page1.html'; onmouseover = null ; onmouseout = null; "

onmouseover=" style.cursor='hand'; style.color='#FFFFFF'; style.backgroundColor='#FFCC33' ; return true;"

onmouseout="style.backgroundColor='#FFCC33'; style.color=''; return true;"

when the links is clicked the backgroundcolor stays changed. But with several of these links on this page, I need the first link one back to normal when a second one is clicked.

Is there a solution?

Thanks

9:39 pm on Aug 26, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts:441
votes: 0


Make your onmouseout = "style.background ='blahcolor'"
9:32 am on Aug 27, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


this.style.....

You need to specify that the element you want to effect is the current one.

10:55 am on Aug 27, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 22, 2003
posts:11
votes: 0


That didn't do it.
I'm simply looking for a menu that targets an iframe and highlights the active page. This is how far I came, as you can see, the first highlight isn't reset when a second link is clicked. Can this be done?

<html>
<table style="border-collapse: collapse" bordercolor="#111111" width="160" align="left">

<tr><td width="150" bgcolor="#FFCC33"
onclick="style.backgroundColor='#a90a08'; iframe1.location='page1.html'; onmouseover = null ; onmouseout = null;"
onmouseover="style.backgroundColor='#000066'; style.cursor='hand'; style.color='#FFFFFF'; return true;"
onmouseout="style.background='#FFCC33';style.color=''; return true;" align="center"><strong><font face="Arial, Helvetica, sans-serif" size="1">Link 1</font></strong></td>
</tr>

<tr><td width="150" bgcolor="#FFCC33"
onclick="style.backgroundColor='#a90a08'; iframe1.location='page2.html'; onmouseover = null ; onmouseout = null;"
onmouseover="style.backgroundColor='#000066'; style.cursor='hand'; style.color='#FFFFFF'; return true;"
onmouseout="style.background='#FFCC33';style.color=''; return true;" align="center"><strong><font face="Arial, Helvetica, sans-serif" size="1">Link 2</font></strong></td>
</tr>

<tr><td width="150" bgcolor="#FFCC33"
onclick="style.backgroundColor='#a90a08'; iframe1.location='page3.html'; onmouseover = null ; onmouseout = null;"
onmouseover="style.backgroundColor='#000066'; style.cursor='hand'; style.color='#FFFFFF'; return true;"
onmouseout="style.background='#FFCC33';style.color=''; return true;" align="center"><strong><font face="Arial, Helvetica, sans-serif" size="1">Link 3</font></strong></td>
</tr></table></td>

<iframe src="page0.html" name="iframe1" frameborder="no" marginwidth="10" marginheight="10" style="border:solid black 2px" height="500" width="600">
</iframe></td>
</html>

11:01 am on Aug 27, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Why not use pure CSS rather than JavaScript?

a:link {..}
a:visited {..}
a:hover {..}
a:active {..}

11:22 am on Aug 27, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 22, 2003
posts:11
votes: 0


Thanks BlobFisk,
I've tried it, but the moment the page in the iframe is clicked/touched, the active state of the menu link is gone.
11:34 am on Aug 27, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


It's a very nasty, but you could put a function in the iFrame onLoad that will make the background if the link in the parent the colour you want.

Then, onUnLoad you could reset it....

Caveat: untried, untestest, unwanted by owner!

1:03 pm on Aug 27, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 22, 2003
posts:11
votes: 0


Could you help me out a little bit more here. What should the iFrame tag look like? Do I need to hang on to the pure css you sugested?
1:24 pm on Aug 27, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Well, I think I'd rather come up with a better solution than this, but....

The onLoad would be (in Pseudocode):

parentFrame.document.getElementById(theLink).style.backgoundColor = The colour you want.

And the onUnLoad would be something similar. I've a feeling that this will mess up the 'pure' CSS events though for the mouseover and mouseout...

6:31 pm on Aug 27, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 22, 2003
posts:11
votes: 0


That didin't go very well. I'm trying something with a bit more css now (found it on WW). The only problem is that the part of the CSS just below reads the BODY ID of the current page and then sets the corresponding link to another style:


#page1 #link1, #page2 #link2, #page3 #link3 {
color: #ffffff;
background: #a90a08;
font-weight: normal;
text-decoration: none;
font-family: Verdana, arial, geneva, sans-serif;
font-size: 10px;
}

Is it possible to "read" the BODY ID of the page loaded in the iFrame?

Here's the complete code

<html>
<style type="text/css">
<!--
#menu a:link, a:visited{
color: #000000;
background: #ffcc33;
font-weight: normal;
text-decoration: none;
font-family: Verdana, arial, geneva, sans-serif;
font-size: 10px;
}
#menu a:hover {
color: #ffffff;
background: #000066;
font-weight: normal;
text-decoration: none;
font-family: Verdana, arial, geneva, sans-serif;
font-size: 10px;
}
#page1 #link1, #page2 #link2, #page3 #link3 {
color: #ffffff;
background: #a90a08;
font-weight: normal;
text-decoration: none;
font-family: Verdana, arial, geneva, sans-serif;
font-size: 10px;
}
-->
</style>
<body>
<div id="menu">
<a href="page1.html" id="link1" target="iframe1">PAGE 1</a>
<a href="page2.html" id="link2" target="iframe1">PAGE 2</a>
<a href="page3.html" id="link3" target="iframe1">PAGE 3</a>
<iframe src="page1.html" name="iframe1" frameborder="no" marginwidth="10" marginheight="10" style="border:solid black 2px" height="500" width="600">
</iframe></td>
</div>
</body>
</html>

9:21 am on Aug 28, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Well I'm afraid I'm just no JS expert but we have a few folks here that can probably work it out. Where are you guys...? ;)

Nick

10:55 am on Aug 28, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


To access an element in an iFrame:

document.iFrameName.document.getElementById(elementID).style.

HTH

11:08 am on Aug 28, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 27, 2003
posts:664
votes: 0


rooog,

Personally I'd suggest the CSS route per message 10, and de-frame the page.

But if you really want to go the framed route, what I'd suggest is define a local variable to keep track of which button is in the pressed state (or you could get that by checking what the iframe's location.href is). Then whenever a button is pressed, you do the following:

  • Change the style of the previously selected button back to default
  • set the variable that keeps track of which button is selected, to the new value
  • Change the style of the newly selected button

Shawn

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members