elements that onClick will change and stay changed until another is - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

elements that onClick will change and stay changed until another is

change onClick and stay changed untill somthing else is picked

Baxter30

12:10 am on Dec 31, 2008 (gmt 0)

10+ Year Member

I am making a menu for a page im working on and I am using <span> and some css to create a variety of menu items that onMouseOver and onClick will change. I've got the mouseover part down but I am haveing trouble finding a way to make them change the style atributes and stay changed until another menu item is selected. This is what I have so far if it helps.

<table id="layout">
<tr>
<td>
<a href="index.html"><div class="menu" onMouseOver="this.style.backgroundColor='navy';
this.style.border='2px inset black'" onMouseOut="this.style.backgroundColor='gray'; this.style.border='0px inset black'">Jobshop</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onMouseOver="this.style.backgroundColor='navy'; this.style.border='2px inset black'"
onMouseOut="this.style.backgroundColor='gray'; this.style.border='0px inset black'">Services</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onMouseOver="this.style.backgroundColor='navy'; this.style.border='2px inset black'"
onMouseOut="this.style.backgroundColor='gray'; this.style.border='0px inset black'">Products</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onMouseOver="this.style.backgroundColor='navy'; this.style.border='2px inset black'"
onMouseOut="this.style.backgroundColor='gray'; this.style.border='0px inset black'">Systems</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onMouseOver="this.style.backgroundColor='navy'; this.style.border='2px inset black'"
onMouseOut="this.style.backgroundColor='gray'; this.style.border='0px inset black'">Contact Us</div></a>
</td>
</tr>
</table>

HEEELLP

daveVk

3:34 am on Dec 31, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

var selectEl = null; // keep track of currently selected

function mo(el) {
if ( selectEl ) { // unselect selected
selectEl.style.backgroundColor='gray';
selectEl.style.border='0px inset black';
}
selectEl = el; // new selected
el.style.backgroundColor='navy';
}

on each td

<td>
<a href="index.html"><div class="menu" onMouseOver="mo(this)">Products</div></a>
</td>

Baxter30

11:33 pm on Dec 31, 2008 (gmt 0)

10+ Year Member

Wow that worked nicely for selecting and keeping an option until I want to change it, but I know have an issue with my MouseOver and Out commands. I want the same effect when the mouse is over an option as when I have one selected, for this I need a mouseover and mouseout command in the <span>. The problem is that the mouseout command will change it whether its the selected option or not. I have an idea but I don't if the code exists. Here it is:

<html>
<head>
<script type="text/javascript">
var element = null;

function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
element.style.border='2px outset white';
}
element = xx;
xx.style.backgroundColor='navy';
xx.style.border='2px inset black';
// I was thinking about nullifying the onMouseOut command of the selected item so that it will stay selected when the mouse leaves the box. This command doen't seem to do it. Do you know of anything simmilar.
xx.onMouseOut='null'
}

function over(xx) {
xx.style.backgroundColor='navy';
xx.style.border='2px inset black';
}

function out(xx) {
xx.style.backgroundColor='gray';
xx.style.border='2px outset white';
}
</script>
</head>

<body>
<table id="layout">
<tr>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)"
onMouseOut="out(this)">Jobshop</div></a>
</td>

<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)"
onMouseOut="out(this)">Services</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)"
onMouseOut="out(this)">Products</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)"
onMouseOut="out(this)">Systems</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)" onMouseOut="out(this)">Contact
Us</div></a>
</td>
</tr>
</table>
</body>
</html>

daveVk

3:30 am on Jan 1, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Not sure I understand your requirement, maybe

<html>
<head>
<script type="text/javascript">
var element = null;

function over(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
element.style.border='2px outset white';
}
element = xx;
xx.style.backgroundColor='navy';
xx.style.border='2px inset black';
}

</script>
</head>

<body>
<table id="layout">
<tr>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)">Jobshop</div></a>
</td>

<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)">Services</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)">Products</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)">Systems</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)" onMouseOver="over(this)">Contact
Us</div></a>
</td>
</tr>
</table>
</body>
</html>

Not sure what extra needs to happen on onClick, Dont see need for onMouseout ?

Baxter30

8:40 pm on Jan 1, 2009 (gmt 0)

10+ Year Member

Sorry I'm a terrible writer. Let me clarify. I'm trying to put together a nav menu in a framed page that will have five links that will target the display frame below. I want the link currently being displayed to be indicated by the change in background color and border style. I also want the links to display those same changes when the users mouse is over them. Save and load this. Its as close as I have gotten to what I actually want.

<html>
<head><title>menu</title>

<script type="text/javascript">
var element = null;

function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
element.style.border='2px outset white';
}
element = xx;
xx.style.backgroundColor='navy';
xx.style.border='2px inset white';
}
</script>

<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:red}
a:hover {color:red}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; border:2px outset white}
</style>
</head>

<body>
<table id="layout"
<tr>
<td>
<a href="job.html"><div class="menu" onClick="select(this)">Jobshop</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)">Services</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)">Products</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)">Systems</div></a>
</td>
<td>
<a href="index.html"><div class="menu" onClick="select(this)">Contact Us</div></a>
</td>
</tr>
</table>
</body>
</html>

Baxter30

8:43 pm on Jan 1, 2009 (gmt 0)

10+ Year Member

sorry i forgot. Youll need to add <base target="blah">, between </head> and <body>, so you can see the effect.

daveVk

10:59 pm on Jan 1, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Try

function over( xx ) {
xx.style.backgroundColor='navy';
xx.style.border='2px inset black';
}
function out( xx ); {
if ( xx !== element ) {
xx.style.backgroundColor='gray';
xx.style.border='2px outset white';
}
}

Baxter30

8:35 pm on Jan 2, 2009 (gmt 0)

10+ Year Member

Wow you nailed it. Thanks a lot man. I can't believe I didnt figure that out on my own, it looks so simple now.