JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Look for suggestion for changed color menu

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2 Last »

•
•
Join Date: Oct 2008
Posts: 63
Reputation: polo_coins is an unknown quantity at this point 
Solved Threads: 0
polo_coins polo_coins is offline Offline
Junior Poster in Training

Look for suggestion for changed color menu

 
0
  #1
Aug 11th, 2009
I have a menu and I want when I mouseover them it change their color and style .Are the any suggestion?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Look for suggestion for changed color menu

 
0
  #2
Aug 11th, 2009
Hi polo,

do you have a ready document? Or you need if from the scratch?
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 63
Reputation: polo_coins is an unknown quantity at this point 
Solved Threads: 0
polo_coins polo_coins is offline Offline
Junior Poster in Training

Re: Look for suggestion for changed color menu

 
0
  #3
Aug 11th, 2009
html Syntax (Toggle Plain Text) 
  1. <form name="menu">
  2. <font face="Comic Sans MS " size="4" >
  3. <table id="menutable" name="table1" frame="void" rules="none" >
  4. <ul>
  5. <tr ><li><a href="main.html" onmouseover="ChangeCol();" id="ch1"  target="main">Main Page</a><br/></tr>
  6. <tr><li><a href="photos.html" name="photos" target="main">Photos of Australia</a><br/></tr>
  7. <tr><li><a href="immigration.html" name="immigration" target="main">Immigration</a><br/></tr>
  8. <tr><li><a href="question.html" name="q" target="main">Questions</a><br/></tr>
  9. <tr><li><a href="job.html" name="job" target="main">All about Job</a><br/></tr>
  10. <tr><li><a href="studies.html" name="study" target="main">All about Studies</a><br/></tr>
  11. <tr><li><a href="chat.html" name="chat" target="main">Chat</a><br/></tr>
  12. <tr><li><a href="forum.html" name="forum" target="main">Forum about Anything</a><br/><tr>
  13. <tr><li><a href="links.html" name="link" target="main">Intresting Links</a><br/></tr>
  14. <tr><li><a href="price.html" name="price" target="main">Prices in Australia</a><br/></tr>
  15. <tr><li><a href="house.html" name="house" target="main">Apartments/Houses/Rent </a><br/></tr>
  16. <tr><li><a href="communitee.html" name="israel" target="main">Israel Communitee </a><br/></tr>
  17. <tr><li><a href="#main" name="end" >To Top Menu</a><br/>
  18.  
  19.  
  20.  
  21. </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
Last edited by peter_budo; Aug 11th, 2009 at 2:21 pm. Reason: Keep It Organized - Avoid using an excessive amount of [bbcode] to alter font styles or to draw more attention to your post.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Look for suggestion for changed color menu

 
0
  #4
Aug 11th, 2009
Here is the code-sample:
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>www.daniweb.com :: DHTML / JavaScript / AJAX</title>
  12. <style id="css21" type="text/css" media="all">
  13. /* <![CDATA[ */
  14. a { text-decoration : none; letter-spacing : 1px; color : #00FF00; }
  15.  
  16. ul {
  17.   list-style : none; 
  18.   margin : 0; 
  19.   width : auto; 
  20.   background-color : transparent !important; }
  21.  
  22. li { 
  23.   list-style : none; 
  24.   margin : 0; 
  25.   width : auto; 
  26.   background-color : #000; 
  27.   padding : .200em .200em .200em .600em; }
  28.  
  29. #table-one {
  30.   text-align : left;
  31.   line-height : 1.5;
  32.   border-collapse : collapse;
  33.   border : none;
  34.   margin : 0 auto;
  35.   background-color : transparent !important;
  36.   width : 100%;
  37. }
  38. /* ]]> */
  39. </style>
  40. <script type="text/javascript">
  41. // <![CDATA[
  42.  
  43. var bgcolors = "lime";
  44. var colors = "white"; 
  45.  
  46. var setRule = function( e ) { 
  47.    var e = e ? e : window.event;
  48.    var li = this;
  49.    li.setAttribute( "style", "background-color : " + bgcolors + "; margin : 0 0 0 12px" + "; color : " + colors + "; padding : .200em .200em .200em .600em; border-top : 1px solid #eee" ); 
  50.    var a = li.firstChild;
  51.    a.setAttribute( "style", "color : " + colors + "; font-family : 'Bernard MT Condensed', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;" );
  52.    this.onmouseout = ( function() {
  53.    this.removeAttribute("style");
  54.    this.firstChild.removeAttribute("style");
  55.    } ); 
  56. (( "cancelBubble" in e ) ? e.cancelBubble = true : e.stopPropagation()); 
  57.  
  58. }; window.onload = function( ) {
  59.    var lists = (( lists = document.getElementById("lists-0")) ? lists : document.all[ "lists-0" ] );
  60.    if ( lists.hasChildNodes() ) {
  61.    var node = lists.childNodes;
  62.       for ( var x = 0; x < node.length; x++ ) {
  63.          if ( node[ x ].nodeName.toLowerCase() === "li" ) {
  64.             if ( window.addEventListener ) {
  65.             node[ x ].addEventListener( "mouseover", setRule, false );
  66.            } else if ( window.attachEvent ) {
  67.             node[ x ].attachEvent( "onmouseover", setRule ); 
  68.             } else { node[ x ].onmouseover = setRule; } 
  69.          }
  70.       }
  71.    }
  72. }
  73.  
  74. // ]]>
  75. </script>
  76. </head>
  77. <body id="xhtml11">
  78. <div id="main">
  79.  
  80. <!-- 
  81. <form id="menu" name="menu" action="#" onsubmit="return false;"> 
  82. -->
  83.  
  84. <table id="table-one" frame="void" rules="none" cellpadding="0" cellspacing="0" summary="JavaScript :: Live Demo!">
  85. <tr>
  86. <td style="width : 30%; overflow : show">
  87. <ul id="lists-0">
  88. <li><a href="forum.html">Forum About Anything</a></li>
  89. <li><a href="links.html">Interesting Links</a></li>
  90. <li><a href="price.html">Prices in Australia</a></li>
  91. <li><a href="house.html">Apartments/Houses/Rent</a></li>
  92. <li><a  href="comunitee.html">Israel Communitee</a></li>
  93. </ul>
  94. </td><td style="width : auto; padding-left : 1em;"><h2>DEMO PAGE</h2></td></tr>
  95. </table>
  96. </div>
  97. </body>
  98. </html>

Opera-Tested
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: Look for suggestion for changed color menu

 
0
  #5
Aug 12th, 2009
hi essential..........
doesn't this work in IE 6 ??
didn't work for me...
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Look for suggestion for changed color menu

 
0
  #6
Aug 12th, 2009
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...
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 63
Reputation: polo_coins is an unknown quantity at this point 
Solved Threads: 0
polo_coins polo_coins is offline Offline
Junior Poster in Training

Re: Look for suggestion for changed color menu

 
0
  #7
Aug 12th, 2009
[COLOR="Red"][var li = this;/COLOR]
it give me an erroro in this line
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Look for suggestion for changed color menu

 
0
  #8
Aug 12th, 2009
Hi,

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

javascript Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <title>http://www.daniweb.com</title>
  9. <style type="text/css">
  10. <!--
  11. li a {
  12.   font-family : Arial, san-serif; 
  13.   color : #FFFFFF;
  14.   text-decoration : none;
  15.   letter-spcing : 2px; }
  16.  
  17. li {
  18.   border : none; 
  19.   background-color : #365d95;
  20.   padding : .300em .300em .300em 1em; 
  21.   display : block; 
  22.   margin : 0; }
  23.  
  24. ul, li { list-style : none }
  25.  
  26. ul {
  27.   background-color : #FFFFFF;
  28.   margin : 0;
  29.   padding : 0;
  30.   text-align : left; }
  31. li.onHover a { 
  32.   color : #365d95; 
  33.   font-family : "Bernard MT Condensed", "Trebuchet MS"; }
  34. li.onHover {
  35.   border : 1px solid #373832;
  36.   width : 160px; 
  37.   background-color : #F80;
  38.   padding : .300em .300em .300em 1em; 
  39.   display : block; 
  40.   margin-left : 1em; }
  41. -->
  42. </style>
  43. <script type="text/javascript">
  44. <!--
  45. var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
  46. var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
  47. var installer = {
  48.    1 : ( function( obj ) {
  49.       return obj.attachEvent( "on" + isEvent, isFunction );
  50.    } ),
  51.    2 : ( function( obj ) {
  52.       return obj.addEventListener( isEvent, isFunction, false );
  53.    } ),
  54.    3 : ( function( obj ) {
  55.       return obj[ "on" + isEvent ] = isFunction;
  56.    } )
  57. }[ eventSupported ];
  58.    if ( eventSupported ) {
  59.       if ( typeof( isAttachedTo ) !== "undefined" ) {
  60.          for ( var x = 0; x < isAttachedTo; x++ ) {
  61.             installer( isElement[ x ] );
  62.          }
  63.       } else {
  64.         installer( isElement );
  65.       } 
  66.    } else {
  67.       alert("\nunsupported features: please update your browser");
  68.    }
  69. };
  70. var on_hover = function() {
  71.    var setClass = document.createAttribute("class");
  72.    setClass.nodeValue = "onHover";
  73.    if ( this.parentNode.parentNode.id === "demo" ) 
  74.       this.parentNode.setAttributeNode( setClass );
  75.    else
  76.       return false;
  77. };
  78.  
  79. var off_hover = function() {
  80.    if ( this.parentNode.getAttribute("class")) {
  81.       this.parentNode.removeAttribute("class"); }
  82. };
  83. var installMenu = function() {
  84. var menu;
  85.    if ( document.all )
  86.       menu = document.all.tags("a");
  87.    else {
  88.       menu = document.getElementsByTagName("a")
  89.    } 
  90.    addEvent( "mouseover", menu, on_hover, menu.length );
  91.    addEvent( "mouseout", menu, off_hover, menu.length );
  92. };
  93. window.onload = installMenu;
  94. // --> 
  95. </script>
  96. </head>
  97. <body>
  98. <div>
  99. <div>
  100. <table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
  101. <tr>
  102. <td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
  103. <li><a href="#">Sample Link 1</a></li>
  104. <li><a href="#">Sample Link 2</a></li>
  105. <li><a href="#">Sample Link 3</a></li>
  106. <li><a href="#">Sample Link 4</a></li>
  107. <li><a href="#">Sample Link 5</a></li>
  108. </ul></td>
  109. <td></td>
  110. </tr>
  111. </table>
  112. </div>
  113. </body>
  114. </html>

supported in all major browser: ( Firefox/Opera/Chrome/Safari/IE7+)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,369
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 164
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Look for suggestion for changed color menu

 
0
  #9
Aug 13th, 2009
the <table> is redundant only <ul> is required
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Look for suggestion for changed color menu

 
0
  #10
Aug 13th, 2009
•
•
•
•
Originally Posted by essential View Post
Hi,

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

javascript Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <title>http://www.daniweb.com</title>
  9. <style type="text/css">
  10. <!--
  11. li a {
  12.   font-family : Arial, san-serif; 
  13.   color : #FFFFFF;
  14.   text-decoration : none;
  15.   letter-spcing : 2px; }
  16.  
  17. li {
  18.   border : none; 
  19.   background-color : #365d95;
  20.   padding : .300em .300em .300em 1em; 
  21.   display : block; 
  22.   margin : 0; }
  23.  
  24. ul, li { list-style : none }
  25.  
  26. ul {
  27.   background-color : #FFFFFF;
  28.   margin : 0;
  29.   padding : 0;
  30.   text-align : left; }
  31. li.onHover a { 
  32.   color : #365d95; 
  33.   font-family : "Bernard MT Condensed", "Trebuchet MS"; }
  34. li.onHover {
  35.   border : 1px solid #373832;
  36.   width : 160px; 
  37.   background-color : #F80;
  38.   padding : .300em .300em .300em 1em; 
  39.   display : block; 
  40.   margin-left : 1em; }
  41. -->
  42. </style>
  43. <script type="text/javascript">
  44. <!--
  45. var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
  46. var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
  47. var installer = {
  48.    1 : ( function( obj ) {
  49.       return obj.attachEvent( "on" + isEvent, isFunction );
  50.    } ),
  51.    2 : ( function( obj ) {
  52.       return obj.addEventListener( isEvent, isFunction, false );
  53.    } ),
  54.    3 : ( function( obj ) {
  55.       return obj[ "on" + isEvent ] = isFunction;
  56.    } )
  57. }[ eventSupported ];
  58.    if ( eventSupported ) {
  59.       if ( typeof( isAttachedTo ) !== "undefined" ) {
  60.          for ( var x = 0; x < isAttachedTo; x++ ) {
  61.             installer( isElement[ x ] );
  62.          }
  63.       } else {
  64.         installer( isElement );
  65.       } 
  66.    } else {
  67.       alert("\nunsupported features: please update your browser");
  68.    }
  69. };
  70. var on_hover = function() {
  71.    var setClass = document.createAttribute("class");
  72.    setClass.nodeValue = "onHover";
  73.    if ( this.parentNode.parentNode.id === "demo" ) 
  74.       this.parentNode.setAttributeNode( setClass );
  75.    else
  76.       return false;
  77. };
  78.  
  79. var off_hover = function() {
  80.    if ( this.parentNode.getAttribute("class")) {
  81.       this.parentNode.removeAttribute("class"); }
  82. };
  83. var installMenu = function() {
  84. var menu;
  85.    if ( document.all )
  86.       menu = document.all.tags("a");
  87.    else {
  88.       menu = document.getElementsByTagName("a")
  89.    } 
  90.    addEvent( "mouseover", menu, on_hover, menu.length );
  91.    addEvent( "mouseout", menu, off_hover, menu.length );
  92. };
  93. window.onload = installMenu;
  94. // --> 
  95. </script>
  96. </head>
  97. <body>
  98. <div>
  99. <div>
  100. <table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
  101. <tr>
  102. <td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
  103. <li><a href="#">Sample Link 1</a></li>
  104. <li><a href="#">Sample Link 2</a></li>
  105. <li><a href="#">Sample Link 3</a></li>
  106. <li><a href="#">Sample Link 4</a></li>
  107. <li><a href="#">Sample Link 5</a></li>
  108. </ul></td>
  109. <td></td>
  110. </tr>
  111. </table>
  112. </div>
  113. </body>
  114. </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?
Reply With Quote Quick reply to this message  
Reply
1 2 Last »

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxexample ajaxjspservlets array browser bug captcha captchaformproblem cart checkbox child class close codes cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps marquee masterpage math matrixcaptcha media menu object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php position post programming progressbar prototype rated redirect runtime safari scale scriptlets scroll search security session shopping size software star stars synchronous toggle unicode variables web webservice wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC