Look for suggestion for changed color menu

Hi polo,

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

<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

polo_coins

Junior Poster in Training

63 posts since Oct 2008

Reputation Points: 8

Solved Threads: 0

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

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

aashishn86

Junior Poster

188 posts since Jun 2008

Reputation Points: 10

Solved Threads: 9

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

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

polo_coins

Junior Poster in Training

63 posts since Oct 2008

Reputation Points: 8

Solved Threads: 0

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

the is redundant only is required

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

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! [I use IE6]

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?

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

Hi troyIII,

As you can see, in my sample-code there's an un-paired <div> tag over atline#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 about1.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.

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

Hey Ess, it that a new avatar?

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

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

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

Hi troyIII,

As you can see, in my sample-code there's an un-paired <div> tag over atline#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 about1.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">  </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>  <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">  </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>

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

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 theXHTML 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 :: <strong>HTML 4.01 Transitional DTD</strong> --><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,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><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.<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>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><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 achatroom, so if you just want to talk, then try the dating website's...

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

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.

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

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

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

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