Look for suggestion for changed color menu

Question

polo_coins -2 Junior Poster in Training

14 Years Ago

I have a menu and I want when I mouseover them it change their color and style .Are the any suggestion?

javascript

7 Contributors
43 Replies
301 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Troy III

All 43 Replies

Troy III 272 Posting Pro

14 Years Ago

It wuldn't do, I told you that there is no 'inherit' property either way.
Some browsers like mozillas -won't rise an error on wrong css selector asssignements through js but will silently fall back to the default selector stated in style if any.

You should use an empty string, or (in this casse) the correct className instead. Or assign some other selector but not "inherit" since there is no such thing exposed to javascript methods as far as my knowlledge.

And it's not the inlinescript the thing that is not working on IE its simply thows the error but also falls back to default and changes the color to white on hover.

What is not working is the whole function...

essential 84 Posting Shark

14 Years Ago

As far as i'm concerned all of those methods and properties that i have used over the last posted function are well supported in IE5.5+, so i keep wondering why still it didnt work inside your IE6-version!? parentNode, nodeName, srcElement would be enough to penetrate IE5+ mode. If that doesnt work, then don't bother wasting your time running the script.

Airshow 416 WiFi Lounge Lizard

14 Years Ago

'Inherit' is a 100% good cool CSS attribute. It's in the CSS2 and CSS3 recommendations - maybe CSS1?

Unfortunately (I read here) Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility. IE also throws an error if you try to set 'inherit' inappropriately, but it is catchable (I just tried in IE6).

Airshow

Troy III 272 Posting Pro

14 Years Ago

As far as i'm concerned all of those methods and properties that i have used over the last posted function are well supported in IE5.5+, so i keep wondering why still it didnt work inside your IE6-version!? parentNode, nodeName, srcElement would be enough to penetrate IE5+ mode. If that doesnt work, then don't bother wasting your time running the script.

I don't have to run one script over and over again to understand that it isn't working. I knew that it will not work even before I tested it. "parentNode", "nodeName" etc are not the issue.

I will point you to the first major error on your function
and that's the very first line: onmouseover = onmouseout = function( e ) You find out why.

p.s.:
A Hint

Try this:

function onclick(e){//b.b. Troy III p.a.e.
        e=e||event; e=e.srcElement||e.target; e=e.nodeName;
        alert(e);
}
document.onclick = onclick;

If you execute this code in FX, you'll get the alert report twice, which is a general mozilla bug, and all the netscape broods have it; -and this bug is the only reason why your function is even triggering there.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2009-08-11T16:41:34+00:00

Hi polo,

do you have a ready document? Or you need if from the scratch?

polo_coins -2 Junior Poster in Training · Answer 2 · 2009-08-11T16:54:31+00:00

<form name="menu">
<font face="Comic Sans MS " size="4" >
<table id="menutable" name="table1" frame="void" rules="none" >
<ul>
<tr ><li><a href="main.html" onmouseover="ChangeCol();" id="ch1"  target="main">Main Page</a><br/></tr>
<tr><li><a href="photos.html" name="photos" target="main">Photos of Australia</a><br/></tr>
<tr><li><a href="immigration.html" name="immigration" target="main">Immigration</a><br/></tr>
<tr><li><a href="question.html" name="q" target="main">Questions</a><br/></tr>
<tr><li><a href="job.html" name="job" target="main">All about Job</a><br/></tr>
<tr><li><a href="studies.html" name="study" target="main">All about Studies</a><br/></tr>
<tr><li><a href="chat.html" name="chat" target="main">Chat</a><br/></tr>
<tr><li><a href="forum.html" name="forum" target="main">Forum about Anything</a><br/><tr>
<tr><li><a href="links.html" name="link" target="main">Intresting Links</a><br/></tr>
<tr><li><a href="price.html" name="price" target="main">Prices in Australia</a><br/></tr>
<tr><li><a href="house.html" name="house" target="main">Apartments/Houses/Rent </a><br/></tr>
<tr><li><a href="communitee.html" name="israel" target="main">Israel Communitee </a><br/></tr>
<tr><li><a href="#main" name="end" >To Top Menu</a><br/>



</table>

here is some code (I think it's code you already see) it' my menu
and I want when client over it with mouse it will change it face style,and color

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-08-12T08:32:41+00:00

Here is the code-sample:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css_level21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com :: DHTML / JavaScript / AJAX</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */
a { text-decoration : none; letter-spacing : 1px; color : #00FF00; }

ul {
  list-style : none; 
  margin : 0; 
  width : auto; 
  background-color : transparent !important; }

li { 
  list-style : none; 
  margin : 0; 
  width : auto; 
  background-color : #000; 
  padding : .200em .200em .200em .600em; }

#table-one {
  text-align : left;
  line-height : 1.5;
  border-collapse : collapse;
  border : none;
  margin : 0 auto;
  background-color : transparent !important;
  width : 100%;
}
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var bgcolors = "lime";
var colors = "white"; 
 
var setRule = function( e ) { 
   var e = e ? e : window.event;
   var li = this;
   li.setAttribute( "style", "background-color : " + bgcolors + "; margin : 0 0 0 12px" + "; color : " + colors + "; padding : .200em .200em .200em .600em; border-top : 1px solid #eee" ); 
   var a = li.firstChild;
   a.setAttribute( "style", "color : " + colors + "; font-family : 'Bernard MT Condensed', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;" );
   this.onmouseout = ( function() {
   this.removeAttribute("style");
   this.firstChild.removeAttribute("style");
   } ); 
(( "cancelBubble" in e ) ? e.cancelBubble = true : e.stopPropagation()); 
 
}; window.onload = function( ) {
   var lists = (( lists = document.getElementById("lists-0")) ? lists : document.all[ "lists-0" ] );
   if ( lists.hasChildNodes() ) {
   var node = lists.childNodes;
      for ( var x = 0; x < node.length; x++ ) {
         if ( node[ x ].nodeName.toLowerCase() === "li" ) {
            if ( window.addEventListener ) {
            node[ x ].addEventListener( "mouseover", setRule, false );
           } else if ( window.attachEvent ) {
            node[ x ].attachEvent( "onmouseover", setRule ); 
            } else { node[ x ].onmouseover = setRule; } 
         }
      }
   }
}

// ]]>
</script>
</head>
<body id="xhtml11">
<div id="main">

<!-- 
<form id="menu" name="menu" action="#" onsubmit="return false;"> 
-->

<table id="table-one" frame="void" rules="none" cellpadding="0" cellspacing="0" summary="JavaScript :: Live Demo!">
<tr>
<td style="width : 30%; overflow : show">
<ul id="lists-0">
<li><a href="forum.html">Forum About Anything</a></li>
<li><a href="links.html">Interesting Links</a></li>
<li><a href="price.html">Prices in Australia</a></li>
<li><a href="house.html">Apartments/Houses/Rent</a></li>
<li><a  href="comunitee.html">Israel Communitee</a></li>
</ul>
</td><td style="width : auto; padding-left : 1em;"><h2>DEMO PAGE</h2></td></tr>
</table>
</div>
</body>
</html>

Opera-Tested

aashishn86 0 Junior Poster · Answer 4 · 2009-08-12T17:07:02+00:00

hi essential..........
doesn't this work in IE 6 ??
didn't work for me... :(

essential 84 Posting Shark Featured Poster · Answer 5 · 2009-08-12T18:13:40+00:00

Hi aashishn,

i bring up a simple lines for polo, so that he would be able adapt all the lines easily. But since you also need it, then i will provide a new example later.

Good day...

polo_coins -2 Junior Poster in Training · Answer 6 · 2009-08-12T22:13:38+00:00

[var li = this;/COLOR]
it give me an erroro in this line

essential 84 Posting Shark Featured Poster · Answer 7 · 2009-08-13T07:15:04+00:00

Hi,

here's the demo, you should atleast have IE6 to be able for this to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>http://www.daniweb.com</title>
<style type="text/css">
<!--
li a {
  font-family : Arial, san-serif; 
  color : #FFFFFF;
  text-decoration : none;
  letter-spcing : 2px; }

li {
  border : none; 
  background-color : #365d95;
  padding : .300em .300em .300em 1em; 
  display : block; 
  margin : 0; }

ul, li { list-style : none }

ul {
  background-color : #FFFFFF;
  margin : 0;
  padding : 0;
  text-align : left; }
li.onHover a { 
  color : #365d95; 
  font-family : "Bernard MT Condensed", "Trebuchet MS"; }
li.onHover {
  border : 1px solid #373832;
  width : 160px; 
  background-color : #F80;
  padding : .300em .300em .300em 1em; 
  display : block; 
  margin-left : 1em; }
-->
</style>
<script type="text/javascript">
<!--
var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
var installer = {
   1 : ( function( obj ) {
      return obj.attachEvent( "on" + isEvent, isFunction );
   } ),
   2 : ( function( obj ) {
      return obj.addEventListener( isEvent, isFunction, false );
   } ),
   3 : ( function( obj ) {
      return obj[ "on" + isEvent ] = isFunction;
   } )
}[ eventSupported ];
   if ( eventSupported ) {
      if ( typeof( isAttachedTo ) !== "undefined" ) {
         for ( var x = 0; x < isAttachedTo; x++ ) {
            installer( isElement[ x ] );
         }
      } else {
        installer( isElement );
      } 
   } else {
      alert("\nunsupported features: please update your browser");
   }
};
var on_hover = function() {
   var setClass = document.createAttribute("class");
   setClass.nodeValue = "onHover";
   if ( this.parentNode.parentNode.id === "demo" ) 
      this.parentNode.setAttributeNode( setClass );
   else
      return false;
};

var off_hover = function() {
   if ( this.parentNode.getAttribute("class")) {
      this.parentNode.removeAttribute("class"); }
};
var installMenu = function() {
var menu;
   if ( document.all )
      menu = document.all.tags("a");
   else {
      menu = document.getElementsByTagName("a")
   } 
   addEvent( "mouseover", menu, on_hover, menu.length );
   addEvent( "mouseout", menu, off_hover, menu.length );
};
window.onload = installMenu;
// --> 
</script>
</head>
<body>
<div>
<div>
<table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
<li><a href="#">Sample Link 1</a></li>
<li><a href="#">Sample Link 2</a></li>
<li><a href="#">Sample Link 3</a></li>
<li><a href="#">Sample Link 4</a></li>
<li><a href="#">Sample Link 5</a></li>
</ul></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

supported in all major browser: ( Firefox/Opera/Chrome/Safari/IE7+)

almostbob 866 Retired: passive income ROCKS · Answer 8 · 2009-08-13T10:13:32+00:00

almostbob 866 Retired: passive income ROCKS

14 Years Ago

the <table> is redundant only <ul> is required

Troy III 272 Posting Pro · Answer 9 · 2009-08-13T19:52:04+00:00

Hi,

here's the demo, you should atleast have IE6 to be able for this to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>http://www.daniweb.com</title>
<style type="text/css">
<!--
li a {
  font-family : Arial, san-serif; 
  color : #FFFFFF;
  text-decoration : none;
  letter-spcing : 2px; }

li {
  border : none; 
  background-color : #365d95;
  padding : .300em .300em .300em 1em; 
  display : block; 
  margin : 0; }

ul, li { list-style : none }

ul {
  background-color : #FFFFFF;
  margin : 0;
  padding : 0;
  text-align : left; }
li.onHover a { 
  color : #365d95; 
  font-family : "Bernard MT Condensed", "Trebuchet MS"; }
li.onHover {
  border : 1px solid #373832;
  width : 160px; 
  background-color : #F80;
  padding : .300em .300em .300em 1em; 
  display : block; 
  margin-left : 1em; }
-->
</style>
<script type="text/javascript">
<!--
var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
var installer = {
   1 : ( function( obj ) {
      return obj.attachEvent( "on" + isEvent, isFunction );
   } ),
   2 : ( function( obj ) {
      return obj.addEventListener( isEvent, isFunction, false );
   } ),
   3 : ( function( obj ) {
      return obj[ "on" + isEvent ] = isFunction;
   } )
}[ eventSupported ];
   if ( eventSupported ) {
      if ( typeof( isAttachedTo ) !== "undefined" ) {
         for ( var x = 0; x < isAttachedTo; x++ ) {
            installer( isElement[ x ] );
         }
      } else {
        installer( isElement );
      } 
   } else {
      alert("\nunsupported features: please update your browser");
   }
};
var on_hover = function() {
   var setClass = document.createAttribute("class");
   setClass.nodeValue = "onHover";
   if ( this.parentNode.parentNode.id === "demo" ) 
      this.parentNode.setAttributeNode( setClass );
   else
      return false;
};

var off_hover = function() {
   if ( this.parentNode.getAttribute("class")) {
      this.parentNode.removeAttribute("class"); }
};
var installMenu = function() {
var menu;
   if ( document.all )
      menu = document.all.tags("a");
   else {
      menu = document.getElementsByTagName("a")
   } 
   addEvent( "mouseover", menu, on_hover, menu.length );
   addEvent( "mouseout", menu, off_hover, menu.length );
};
window.onload = installMenu;
// --> 
</script>
</head>
<body>
<div>
<div>
<table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
<li><a href="#">Sample Link 1</a></li>
<li><a href="#">Sample Link 2</a></li>
<li><a href="#">Sample Link 3</a></li>
<li><a href="#">Sample Link 4</a></li>
<li><a href="#">Sample Link 5</a></li>
</ul></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

supported in all major browser: ( Firefox/Opera/Chrome/Safari/IE7+)

Well, not really!

Why not try something efficient, readable and crossbrowser compatible like:

--------------------------- 8< ----------------------------
<body>
<div>
 <ul id="demo" style="width : 180px;">
  <li><a href="#">Sample Link 1</a></li>
  <li><a href="#">Sample Link 2</a></li>
  <li><a href="#">Sample Link 3</a></li>
  <li><a href="#">Sample Link 4</a></li>
  <li><a href="#">Sample Link 5</a></li>
 </ul>
</div>

<script type="text/javascript">
document.initMenu = function(id){
  var menulist = document.getElementById(id).getElementsByTagName("li")
 for (var i=0; i<menulist.length; i++){ 
      menulist[i].onmouseover = function(){this.className='onHover'} 
      menulist[i].onmouseout = function(){this.className=''} } }

document.initMenu("demo")
</script>
</body>
</html>

and cut the 1.51KB long script short, to 300bytes of working code instead?

essential 84 Posting Shark Featured Poster · Answer 10 · 2009-08-14T06:26:50+00:00

Hi troyIII,

As you can see, in my sample-code there's an un-paired <div> tag over at line#99. And might be causing a bit of a problem over the document. The script also provides another cross-browser addEvent( param1, param2, param_N ) handler functionality -- that allows you to add events' on a shorter range of call.

You are complaining about 1.51k size, without thinking that it is the overall size of the entire document and not just by the script itself.

A standard valid document would atleast cost you 0.908b for its total file size under Strict markup:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[

// ]]>
</script>
</head>
<body>

</body>
</html>

- and would you mind showing me some sample code using your script above, if the target is on the <a> and not just from a normal <li> tag execution?

Lets see how long you can hold those lines without repeating the call over the <li> tag and change its background with an <anchor> call...

If i had another <li><a href="#" onmouseover="somefunc();" onmouseover handler inside my anchor, then this will complicate things with the code you have provided.

I think you should read this A R T I C L E about event order.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 11 · 2009-08-14T06:56:50+00:00

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Hey Ess, it that a new avatar?

Airshow

essential 84 Posting Shark Featured Poster · Answer 12 · 2009-08-14T07:09:27+00:00

Hey Ess, it that a new avatar?
Airshow

hi Airshow,

ive just uploaded it lastweek. Have you tried the last code that i've posted here? About the hover stuff? I can't seem to detect it, if it has a line problem. When it is working 99.9% in OPERA. Can you give it a go and see how things working over the console.log.

Thanks...

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 13 · 2009-08-14T07:25:06+00:00

Hi Ess, I'm dead on my feet here. Must get some sleep now.

I'll be happy to give it a go in the morning.

Best wishes
Airshow

essential 84 Posting Shark Featured Poster · Answer 14 · 2009-08-14T07:36:41+00:00

yeah, that's one of the hardest part, when i am working with codes on a handheld device.

:) you must be exhausted from work.
Sleep wel and see you at the forum later...

-essential

Troy III 272 Posting Pro · Answer 15 · 2009-08-14T08:24:10+00:00

Hi troyIII,
As you can see, in my sample-code there's an un-paired <div> tag over at line#99. And might be causing a bit of a problem over the document. The script also provides another cross-browser addEvent( param1, param2, param_N ) handler functionality -- that allows you to add events' on a shorter range of call.
You are complaining about 1.51k size, without thinking that it is the overall size of the entire document and not just by the script itself.
A standard valid document would atleast cost you 0.908b for its total file size under Strict markup:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[

// ]]>
</script>
</head>
<body>

</body>
</html>
- and would you mind showing me some sample code using your script above, if the target is on the <a> and not just from a normal <li> tag execution?
Lets see how long you can hold those lines without repeating the call over the <li> tag and change its background with an <anchor> call...
If i had another <li><a href="#" onmouseover="somefunc();" onmouseover handler inside my anchor, then this will complicate things with the code you have provided.
I think you should read this A R T I C L E about event order.

I'm not sure I understand what are you arguing about at all. <li><a href="#" onmouseover="somefunc();"> will not break anything!

1. I'm pretty sure that someone - better skilled with CSS - could achieve this 'hover effect' without javascript at all.

2. Imagine every required simple-task-script to be taking each time more than 1.50KB

3. sorry but a standard "valid" document will not cost more than this: (less than 500bytes)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

4. I don't think that code I provided would come into complicated situation at all:

5. and to prove it to your self, you can try this complicated and not allowed nesting you suggested also:

<ul id="demo" style="width : 180px;">
 <a href="#"><li>Sample Link 1</li></a>
 <a href="#"><li><a href="#">Sample Link 2</a></li></a>
 <li><a href="#">Sample Link 3</a></li>
 <li><a href="#">Sample Link 4</a></li>
 <li><a href="#">Sample Link 5</a></li>
</ul>

Your proposed nesting will not validate, because you can't have an inline element containe in a block element. Although the script functionality will not break, except for css at the first Li (in IE).

And here we can make the previous script I wrote for this ocasion, more generic and of universal use with just a few changes while still keeping it below (400 bytes) of weight:

<script type="text/javascript">
document.hoverElementsBy = function(id, tag, cls){
  var coll = document.getElementById(id).getElementsByTagName(tag)
 for (var i=0; i<coll.length; i++){ 
      coll[i].onmouseover = function(){this.className=cls} 
      coll[i].onmouseout = function(){this.className=""} } }

document.hoverElementsBy("demo", "li", "onHover")
</script>

* Usage:
* document.hoverElementsBy([parentID], [targetedTagName], [classNameToApply])

With this cript encapsulated you can now target any container element; chose any explicit tags contained to recieve the behaviour; and apply any style you've defined in class css selector at your style element.

Simply calling:
document.hoverElementsBy("rightNav", "div", "hoverClass") or similar.

Regards,
b.b. Troy III p.a.e.
----------------------------------------------
p.s.:
On your demand ready to test:
[wrong nesting request]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>menu hover</title>
<style type="text/css">
<!--
li a {
  font-family: "Bernard MT Condensed", "Trebuchet MS", Arial, san-serif; 
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing : 2px; }

li {
  background-color : #365d95;
  padding : .3em .3em .3em 1em; 
  margin : 0; }

ul, li { list-style : none }

ul {
  background-color : #FFFFFF;
  margin : 0;
  padding : 0;
  }
li.onHover a { 
  color : #365d95; 
  font-family : "Bernard MT Condensed", "Trebuchet MS";
  }
.onHover {
  border: 1px solid #373832;
  width: 160px; 
  background-color: #F80;
  margin-left : 1px; }
  
-->
</style>
</head>
<body>
<div>
<ul id="demo" style="width : 180px;">
 <a href="#"><li>Sample Link 1</li></a>
 <a href="#"><li><a href="#">Sample Link 2</a></li></a>
 <li><a href="#">Sample Link 3</a></li>
 <li><a href="#">Sample Link 4</a></li>
 <li><a href="#">Sample Link 5</a></li>
<!-- And yo can also have a mouseover; and moseout on a tag also without breaking anything at all -->
<li><a href="#" onmouseover="this.style.color='red'" onmouseout="this.style.color='white'">Sample Link 6</a></li>
</ul></div>

<script type="text/javascript">
document.hoverElementsBy = function(id, tag, cls){
  var coll = document.getElementById(id).getElementsByTagName(tag)
 for (var i=0; i<coll.length; i++){ 
      coll[i].onmouseover = function(){this.className=cls} 
      coll[i].onmouseout = function(){this.className=""} } }

document.hoverElementsBy("demo", "li", "onHover")
</script>

</body>
</html>

Standard nesting:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>menu hover</title>
<style type="text/css">
<!--
li a {
  font-family: "Bernard MT Condensed", "Trebuchet MS", Arial, san-serif; 
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing : 2px; }

li {
  background-color : #365d95;
  padding : .3em .3em .3em 1em; 
  margin : 0; }

ul, li { list-style : none }

ul {
  background-color : #FFFFFF;
  margin : 0;
  padding : 0;
  }
li.onHover a { 
  color : #365d95; 
  font-family : "Bernard MT Condensed", "Trebuchet MS";
  }
.onHover {
  border: 1px solid #373832;
  width: 160px; 
  background-color: #F80;
  margin-left : 1px; }
  
-->
</style>
</head>
<body>
<div>
 <ul id="demo" style="width : 180px;">
  <li><a href="#">Sample Link 1</a></li>
  <li><a href="#">Sample Link 2</a></li>
  <li><a href="#">Sample Link 3</a></li>
  <li><a href="#">Sample Link 4</a></li>
  <li><a href="#">Sample Link 5</a></li>
 </ul>
</div>

<script type="text/javascript">
document.hoverElementsBy = function(id, tag, cls){
  var coll = document.getElementById(id).getElementsByTagName(tag)
 for (var i=0; i<coll.length; i++){ 
      coll[i].onmouseover = function(){this.className=cls} 
      coll[i].onmouseout = function(){this.className=""} } }

document.hoverElementsBy("demo", "li", "onHover")
</script>

</body>
</html>

essential 84 Posting Shark Featured Poster · Answer 16 · 2009-08-14T14:06:22+00:00

Oh that is even worst, than i thought!A 500bytes, in size, that is of course if you are using the standard HTML 4 markup, and no extra <meta-data> included, but not with the XHTML markup.And also this is the worst example i've ever seen and not even on a book or in any website would show example of wrong pattern like this one you created:

<ul id="demo" style="width : 180px;"> <a href="#"><li>Sample Link 1</li></a>

even the new comer, would not attempt such silly nesting pattern on their document. - so don't make me stupid, than you are right now!!! And here's the document that will show you, about the things that im trying to point out. So give a test before you butt in again...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>http://www.daniweb.com</title><style type="text/css"><!--li a {  font-family : Arial, san-serif;   color : #FFFFFF;  text-decoration : none;  letter-spcing : 2px; }li {  border : none;   background-color : #365d95;  padding : .300em .300em .300em 1em;   display : block;   margin : 0; }ul, li { list-style : none }ul {  background-color : #FFFFFF;  margin : 0;  padding : 0;  text-align : left; }li.onHover a {   color : #365d95;   font-family : "Bernard MT Condensed", "Trebuchet MS"; }li.onHover {  border : 1px solid #373832;  width : 160px;   background-color : #F80;  padding : .300em .300em .300em 1em;   display : block;   margin-left : 1em; }--></style><script type="text/javascript"><!--var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;var installer = {   1 : ( function( obj ) {      return obj.attachEvent( "on" + isEvent, isFunction );   } ),   2 : ( function( obj ) {      return obj.addEventListener( isEvent, isFunction, false );   } ),   3 : ( function( obj ) {      return obj[ "on" + isEvent ] = isFunction;   } )}[ eventSupported ];   if ( eventSupported ) {      if ( typeof( isAttachedTo ) !== "undefined" ) {         for ( var x = 0; x < isAttachedTo; x++ ) {            installer( isElement[ x ] );         }      } else {        installer( isElement );      }    } else {      alert("\nunsupported features: please update your browser");   }};var on_hover = function() {   var setClass = document.createAttribute("class");   setClass.nodeValue = "onHover";   if ( this.parentNode.parentNode.id === "demo" )       this.parentNode.setAttributeNode( setClass );   else      return false;};var off_hover = function() {   if ( this.parentNode.getAttribute("class")) {      this.parentNode.removeAttribute("class"); }};var installMenu = function() {var menu;   if ( document.all )      menu = document.all.tags("a");   else { /*   This is what i intended you to do, not just by adding arguments on the same function, with changed name:- hover by an <a> tag inside the <li> tag, not by the usual <li> tag execution..- creating hover elements is pretty simple and less work, if you are not referring to those child's within their collections. */      menu = document.getElementsByTagName("a")   }    addEvent( "mouseover", menu, on_hover, menu.length );   addEvent( "mouseout", menu, off_hover, menu.length );}; window.onload = installMenu; // --> </script></head><body><!-- W3C Valid Markup :: [b]HTML 4.01 Transitional DTD[/b] --><div><table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0"><tr><td style="width : 180px; overflow : auto;"><h1>installMenu</h1><ul id="demo" style="width : 180px; overflow : show;"><li><div onmouseover="this.style.backgroundColor='#fff'" onmouseout="this.style.backgroundColor='inherit'">Hi there,<br><br>You can change my background without affecting the <b>li</b> tag background color. Since i was called by an anchor tag and not by the <b>li</b> tag itself.</div><br><br><a href="#">Sample Link 1</a></li><li><a href="#">Sample Link 2</a></li><li><a href="#">Sample Link 3</a></li><li><a href="#">Sample Link 4</a></li><li><a href="#">Sample Link 5</a></li></ul><!-- Troy's functions will get executed below this block --><h1>initMenu</h1><ul id="demo1" style="width : 180px; overflow : show;"><li><!-- this is what i am talking about, if you have this type of situation, what will you do then?. --><div onmouseover="this.style.backgroundColor='#fff'" onmouseout="this.style.backgroundColor='inherit'">As you can see, if roll the mouse over the entire span of this <b>&lt;li&gt;</b> element. Everything will adapt when the <em>onmouseover</em> event is executed.<br><br><em>now lets see if you can hover this using your function w/o changing the &lt;li&gt; ( <span style="color : #EE0000">i mean your suggested script</span> ).</em><br>So that is why i claim to make those changes using an <b>&lt;anchor&gt;</b> instead of a normal basic &lt;ul-li&gt; combination to execute my events.</div><br><br><a href="#">Sample Link 1</a></li><li><a href="#">Sample Link 2</a></li><li><a href="#">Sample Link 3</a></li><li><a href="#">Sample Link 4</a></li><li><a href="#">Sample Link 5</a></li></ul><h1>hoverElementsBy</h1><p>this provide the same functionality effect, like <code>initMenu( arg )</code> function. Changes applied only with two additional arguments( <b>tag</b>, <b>cls</b> ).</p> <ul id="demo2" style="width : 180px; overflow : show;"><li><a href="#">Sample Link 1</a></li><li><a href="#">Sample Link 2</a></li><li><a href="#">Sample Link 3</a></li><li><a href="#">Sample Link 4</a></li><li><a href="#">Sample Link 5</a></li></ul></td></tr><tr><td style="vertical-align : top;"><h1>Content</h1></td></tr></table></div><script type="text/javascript"><!--//--------------------------------------// Troy's implemented lines://--------------------------------------var intiMenu = function( id ) {   var coll = document.getElementById( id ).getElementsByTagName( 'li' );   for ( var i = 0; ( coll[ i ] ); i++ ) {      coll[ i ].onmouseover = function() { this.className = "onHover"; }      coll[ i ].onmouseout = function() { this.className = "";}  }}( "demo1" );/* making it complicated and not a normal procedure when you are declaring function's:document.hoverElementsBy = function( id, tag, cls ) {...} */// declaring function under normal procedure:( function hoverElementsBy( id, tag, cls ) {   var coll = document.getElementById( id ).getElementsByTagName( tag );   for ( var i = 0; ( coll[ i ] ); i++ ) {      coll[ i ].onmouseover = function() { this.className = cls; }      coll[ i ].onmouseout = function() { this.className = "";}  }} )( "demo2", "li", "onHover" );//--></script></body></html>

prove it to me if you can code your page on a Nokia-6600 mobile phone which i am currently using right now, with OPERAv8.65 installed.this is a coding forum, not a chatroom, so if you just want to talk, then try the dating website's...

Troy III 272 Posting Pro · Answer 17 · 2009-08-14T15:18:18+00:00

It is you who argued that my code will break in case somebody tries to use some sort of wrong nesting or even a MOUSEOVER event on a nested LI element.

But that super-short script of mine, factuated to bee buletproof even in a badass html structure situations.

So what is your problem than!
I really don't know what you are "chating" about?
Your redoundant code is still not working on my Explorer.

You take my correct [last example] code from the previous post AND test it against any capable browser and handheld devices including your nokia running on Opera v.86.5. AND TEST IT. -Because I don't have one!

Than come back complaining to me, but meanwhile we could use some working code instead.

And please don't come back to argue about CSS if it's not displying properly because I used the one you supplied here, and I'm not to blame if that verison of opera you have is not capable to render exactly as you stated in your CSS. [ the only change I made is that removed indent you gave to hover-class] 'cause anyway we are talking JavaScript here.

And please don't point me to PPK's pages cause I've known him since his very first beginnings on javascript.

essential 84 Posting Shark Featured Poster · Answer 18 · 2009-08-14T16:02:21+00:00

Try to read the post and see if you can find any word's saying that your code will break!? What i said, is that it will complicate things when you accessed the child within their collection, on various situation if they have another attached event! Redundant code? Which part of the code are you claiming? I can even provide you a shorter stance of that code of yours, so what are you trying to prove then?
That you had a better lines?

Then who cares?

If you think you've got better solution, then post it and stop complaining...

Troy III 272 Posting Pro · Answer 19 · 2009-08-14T17:28:36+00:00

My script was not accessing children inside the collection - it was accessing a filtered collection of exact elements explicitly from the container specified.

And in case you later need to manipulate their children or parents; adding: return coll at the end of the function would provide you with ready to use collection any time you need to further manipulate parents or their children.
Or you could do it inside the function directly.
for instance: coll[i].parentNode.onmouseover= ... And the call: document.hoverElementsBy("demo", "li", "onHover") can be used anyway you like adn on any existing tag element on any container with an ID:
document.hoverElementsBy("demo", "a", "onHover")
or even
document.hoverElementsBy("demo2", "div", "backgroundNew")
or
document.hoverElementsBy("demo", "b", "adborder")
etc etc...

But that was not my point...
I allready told you that: http://www.daniweb.com/forums/post932988.html#post932988

I was hoping that you will get my point yourself and I was pretty sure you'll get to this conclusion by now without me having to point it out:

There is nothing more compatible than DOM Level NULL, - that is: DHTML!

A coder with a damn experience will develop his code from its roots, not the other way around. And will begin to implement new level extensions only when absolutely necessary.

I will never even open a <script type="text/javascript"> tag, before I really need it.

It is not our duty to support future browsers, it's the other way around - future browsers are, should and will be required to support their previous versions.

And an experienced coder will embrace only the methods that will give him extended functionality and controll but will only use those that will degrade gracefuly in prevoius browsers and in exchange offer him some advanced controll over his contents in browsers that support those commands.

But who cares when you have such a bad temper...
Anyway thanks for your repply.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 20 · 2009-08-14T17:55:11+00:00

Anyway thanks for your repply.

Whew, I love a happy ending :* ... and just when I thought we might be getting into a fight.

I think you guys have got to agree to differ - which is cool.

Ess I overslept this morning and must get away to work now. There's so much code and discussion above I would need two days to follow it through.

May I assume we have two really great fully working solutions here, that are completely different?

Airshow

essential 84 Posting Shark Featured Poster · Answer 21 · 2009-08-14T18:32:45+00:00

Actually this the second time, we had an argument like this. So do we have to keep it this way? I'll do what i want in my codes and and you do yours.
If you think that my code is just a piece of crap then don't bother or waste your time to run it...

Anyways if you say that my code didnt work inside your browser.

Then maybe this one will:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
<style type="text/css" media="screen">
<!--
li a {
  font-family : Arial, san-serif; 
  color : #FFFFFF;
  text-decoration : none;
  letter-spcing : 2px; }

li {
  border-top : 1px solid #000000; 
  background : #365d95;
  padding : .300em .300em .300em 1em; 
  display : block; 
  margin : 0; }

ul, li { list-style : none }

ul {
  background : #FFFFFF;
  margin : 0;
  padding : 0;
  text-align : left; }

li.onHover a { 
  color : #365d95; 
  font-family : "Bernard MT Condensed", "Trebuchet MS"; }
#test-div { height : 30px; line-height : 30px; }
li.onHover {
  border : 1px solid #A0A0A0;
  width : 160px; 
  background : #FF8000;
  padding : .300em .300em .300em 1em;  
  margin-left : 1em; }
-->
</style>
<script type="text/javascript">
<!--
onmouseover = onmouseout = function( e ) {
   var e = e ? e : window.event;
   var t = e.target ? e.target : e.srcElement;   
   if ( t.nodeName.match(/a/i) && t.parentNode.parentNode.id === "demo" ) {
      var class = { "mouseover" : "onHover", "mouseout" : "" };
      t.parentNode.className = class[ e.type ];

      return;
   } return false;
};
// --> 
</script>
</head>
<body>
<!-- W3C Valid Markup :: HTML 4.01 Transitional DTD -->
<div style="width : 30%;">
<ul id="demo">
<li><div id="test-div" onmouseover="this.style.background = '#ffffff';" onmouseout="this.style.background = 'inherit';">Hover Test &darr;</div><br><br>
<a href="#">Sample Link 1</a></li>
<li><a href="#">Sample Link 2</a></li>
<li><a href="#">Sample Link 3</a></li>
<li><a href="#">Sample Link 4</a></li>
<li><a href="#">Sample Link 5</a></li>
</ul>
</div>
</body>
</html>

hi Airshow,
you're quite right, maybe i need some rest...

Troy III 272 Posting Pro · Answer 22 · 2009-08-14T19:56:20+00:00

I am truly sorry to disappoint you - but it doesn't!
there's no such thing as "inherit" (line 63): onmouseout="this.style.background = 'inherit';" In some browsers it will simply assign invalid value. - that is: nothing -and the browser will be forced to use the default, but in other -it will rise an error that might interefere with other lines of code to... but not in this case.

Yet, correcting that inline code -will not help either. This code will never run on explorer even if corrected, since you will also have to correct the html structure.

essential 84 Posting Shark Featured Poster · Answer 23 · 2009-08-14T20:09:27+00:00

Hmm, it seem that IE doesnt like the call.
now i get it, maybe you could try onmouseout="this.style.backgroundColor = 'inherit';" instead of a the background rule. Try it again and let me know how it worked.

Troy III 272 Posting Pro · Answer 24 · 2009-08-15T08:28:07+00:00

'Inherit' is a 100% good cool CSS attribute. It's in the CSS2 and CSS3 recommendations - maybe CSS1?
Unfortunately (I read here) Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility. IE also throws an error if you try to set 'inherit' inappropriately, but it is catchable (I just tried in IE6).
Airshow

Inherit is an internal command, doesn't need to be stated.
Properties are cascadingly inherited from the parent towards all of the children of any element. And that's the core logic of CSS.

<body>
aaaaaaaaa
<div>
bbbbbbbbb
<span>
cccccccccccc
</span>
bbbbbbbbb
</div>
aaaaaaaaa
</body>

Now, if you specify "color:red" for the body element all other elements will have that color unless overriden from its children.
Than if you state "color: blue" for the contained div a will remain red, b will become blue, but also the c. There is no logic to go state "color: inherit" for the span element for it to take the color of its parent, otherwise css would be a total waste.

Inherit should be used only for properties that are NOT inheritable by definition.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 25 · 2009-08-15T08:43:20+00:00

TIII,

Well at least that's a little better than ' there's no such thing as "inherit" '.

Have you read the WC3 Recommendations?

Airshow

Look for suggestion for changed color menu

Recommended Answers Collapse Answers

All 43 Replies

Recommended Answers