homepage Welcome to WebmasterWorld Guest from 54.167.96.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript: Menu targeting iframe?
rooog




msg:1477178
 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




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

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

BlobFisk




msg:1477180
 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




msg:1477181
 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?

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

BlobFisk




msg:1477182
 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




msg:1477183
 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




msg:1477184
 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




msg:1477185
 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




msg:1477186
 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




msg:1477187
 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">
<!--
#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>

Nick_W




msg:1477188
 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




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

To access an element in an iFrame:

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

HTH

ShawnR




msg:1477190
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved