JavaScript: Menu targeting iframe?

Forum Moderators: open

Message Too Old, No Replies

JavaScript: Menu targeting iframe?

rooog

7:55 pm on Aug 26, 2003 (gmt 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

AWildman

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

Make your onmouseout = "style.background ='blahcolor'"

BlobFisk

9:32 am on Aug 27, 2003 (gmt 0)

this.style.....

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

rooog

10:55 am on Aug 27, 2003 (gmt 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?

BlobFisk

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

Why not use pure CSS rather than JavaScript?

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

rooog

11:22 am on Aug 27, 2003 (gmt 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.

BlobFisk

11:34 am on Aug 27, 2003 (gmt 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!

rooog

1:03 pm on Aug 27, 2003 (gmt 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?

BlobFisk

1:24 pm on Aug 27, 2003 (gmt 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...

rooog

6:31 pm on Aug 27, 2003 (gmt 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">

</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>

Nick_W

9:21 am on Aug 28, 2003 (gmt 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

BlobFisk

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

To access an element in an iFrame:

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

HTH

ShawnR

11:08 am on Aug 28, 2003 (gmt 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