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

need help to my css horizontal menu with javascript for IE

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jun 2009
Posts: 6
Reputation: vik85 is an unknown quantity at this point 
Solved Threads: 0
vik85 vik85 is offline Offline
Newbie Poster

need help to my css horizontal menu with javascript for IE

 
0
  #1
Jun 30th, 2009
hi everybody i am new in javascript .i hope all guys helpful.i have my site tonerquestsite.com.my javascript is not working for IE can you help me out .my css file is
css Syntax (Toggle Plain Text) 
  1. /* -------------- layout ------------------ */
  2.  
  3. /*qmfv{visibility:hidden !important;}*/
  4. qmfh{visibility:visible !important;}
  5.  
  6. .leftNav {position: relative; z-index: 0;}
  7. /*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
  8. .qmmc1 .qmdivider
  9. {
  10. 	display:block;
  11. 	font-size:1px;
  12. 	border-width:0px;
  13. 	border-style:solid;
  14. 	position:relative;
  15.  
  16. }
  17. .qmmc1 .qmdividery
  18. {
  19. 	float:left;
  20. 	width:0px;
  21. }
  22. .qmmc1 .qmtitle
  23. {
  24. 	display:block;
  25. 	cursor:default;
  26. 	white-space:nowrap;
  27. 	position:relative;
  28. }
  29. .qmclear
  30. {
  31. 	font-size:1px;
  32. 	height:0px;
  33. 	width:0px;
  34. 	clear:left;
  35. 	line-height:0px;
  36. 	display:block;
  37. 	float:none !important;
  38. }
  39. .qmmc1 
  40. {
  41. 	position:relative;
  42. 	zoom:1;
  43. 	z-index:10;
  44. }
  45. .qmmc1 a, .qmmc1 li 
  46. {
  47. 	float:left;
  48. 	display:block;
  49. 	white-space:nowrap;
  50. 	position:relative;
  51. 	z-index:1;
  52. }
  53. .qmmc1 div a, .qmmc1 ul a, .qmmc1 ul li 
  54. {
  55. 	float:none;
  56. }
  57. .qmsh div a {float:left;}
  58. .qmmc1 div
  59. {
  60. 	visibility:hidden;
  61. 	position:absolute;
  62. }
  63. .qmmc1 .qmcbox
  64. {
  65. 	cursor:default;
  66. 	display:block;
  67. 	position:relative;
  68. 	z-index:1;
  69. }
  70. .qmmc1 .qmcbox a{display:inline;}
  71. .qmmc1 .qmcbox div
  72. {
  73. 	float:none;
  74. 	position:static;
  75. 	visibility:inherit;
  76. 	left:auto;
  77. }
  78. .qmmc1 li {position:relative;z-index:1;}
  79. .qmmc1 ul 
  80. {
  81. 	left:-10000px;
  82. 	position:absolute;
  83. 	z-index:10;
  84. }
  85. .qmmc1, .qmmc1 ul 
  86. {
  87. 	list-style:none;
  88. 	padding:0px;
  89. 	margin:0px;
  90. }
  91. .qmmc1 li a {float:none;}
  92. .qmmc1 li:hover>ul{left:auto;}
  93. .qmmc1 li:hover ul, li.over ul{display:block;} 
  94.  
  95. /*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/
  96. #qm1clear
  97. {
  98. 	clear:left;
  99. }
  100.  
  101.  
  102. 	/* QuickMenu 0 */
  103.  
  104. 	/*"""""""" (MAIN) Container""""""""*/	
  105. 	#qm1	
  106. 	{
  107. 	width:900px;
  108. 	height:auto;
  109. 	text-align:center;
  110. 	}
  111.  
  112.  
  113. 	/*"""""""" (MAIN) Items""""""""*/	
  114. 	#qm1 a	
  115. 	{
  116. 	background-color:transparent;
  117. 	color:#333333;
  118. 	font-family:Arial;
  119. 	font-size:2px;
  120. 	text-align:left;
  121. 	text-decoration:none;
  122. 	border-width:0px 0px 0px 1px;
  123. 	border-style:solid;
  124. 	border-color:#699EDC;
  125. 	padding-left: 1.5em;
  126. 	padding-right: 1em;
  127. 	}
  128.  
  129.  
  130. 	/*"""""""" (MAIN) Hover State""""""""*/	
  131. 	#qm1 a:hover	
  132. 	{
  133. 	background-color: #699EDC;
  134. 	}
  135.  
  136.  
  137. 	/*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/	
  138. 	#qm1 li:hover	
  139. 	{
  140. 	text-decoration:none;
  141. 	}
  142.  
  143.  
  144. 	/*"""""""" (MAIN) Parent Hover State""""""""*/	
  145. 	#qm1 .qmparent1:hover	
  146. 	{	
  147. 		background-color:#699EDC;
  148. 		margin:0px;
  149. 		display:block;
  150. 		position:relative;
  151. 		z-index:1;
  152. 		overflow:visible;
  153. 	}
  154.  
  155.  
  156. 	/*"""""""" (MAIN) Active State""""""""*/	
  157. 	body #qm1 .qmactive, body #qm1 .qmactive:hover	
  158. 	{
  159. 	background-color:#699EDC;
  160. 	text-decoration:underline;
  161. 	}
  162.  
  163.  
  164. 	/*"""""""" (SUB) Container""""""""*/	
  165. 	#qm1 div, #qm1 ul	
  166. 	{
  167. 	background-color:#699EDC;
  168. 	width:inherit;
  169. 	border-width:1px;
  170. 	font-size:10px;
  171. 	visibility:visible;
  172. 	line-height:1.5;
  173. 	padding: 3px 1px 3px 1px;
  174. 	z-index:1;
  175. 	}
  176.  
  177.  
  178. 	/*"""""""" (SUB) Items""""""""*/	
  179. 	#qm1 div a, #qm1 ul a	
  180. 	{	
  181. 		/*padding:1px 20px 1px 2px;*/
  182. 		background-color:transparent;
  183. 		color:#333333;
  184. 		font-size:smaller;
  185. 		border-width:1px 0px 1px 0px;
  186. 		border-style:solid;
  187. 		border-color:#699EDC;
  188.  
  189.  
  190. 	}
  191.  
  192.  
  193. 	/*"""""""" (SUB) Hover State""""""""*/	
  194. 	#qm1 div a:hover	
  195. 	{	
  196. 		text-decoration:underline;
  197. 	}
  198.  
  199.  
  200. 	/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/	
  201. 	#qm1 ul li:hover>a	
  202. 	{	
  203. 		text-decoration:underline;
  204. 		margin-bottom:auto;
  205. 	}
  206.  
  207.  
  208. 	/*"""""""" (SUB) Parent Hover State""""""""*/	
  209. 	#qm1 div .qmparent1:hover	
  210. 	{	
  211. 		background-color:transparent;
  212. 	}
  213.  
  214.  
  215. 	/*"""""""" (SUB) Active State""""""""*/	
  216. 	body #qm1 div .qmactive, body #qm1 div .qmactive:hover	
  217. 	{	
  218. 		background-color:#D6D6D6;
  219. 		text-decoration:none;
  220. 		border-color:#858585;
  221. 	}
  222.  
  223.  
  224. 	/*"""""""" Individual Titles""""""""*/	
  225. 	#qm1 .qmtitle	
  226. 	{
  227. 	cursor:default;
  228. 	padding:3px 0px 3px 4px;
  229. 	color:#333333;
  230. 	font-family:arial;
  231. 	font-size:9px;
  232. 	font-weight:bold;
  233. 	margin-bottom: 1px;		
  234.  
  235. 	}
  236.  
  237.  
  238. 	/*"""""""" Individual Horizontal Dividers""""""""*/	
  239. 	#qm1 .qmdividerx	
  240. 	{	
  241. 		border-top-width:1px;
  242. 		border-color:#BFBFBF;
  243.  
  244. 	}
  245.  
  246.  
  247. 	/*"""""""" Individual Vertical Dividers""""""""*/	
  248. 	#qm1 .qmdividery	
  249. 	{	
  250. 		border-left-width:1px;
  251. 		height:5px;
  252. 		margin:4px 2px 0px 2px;
  253. 		border-color:#BFBFBF;
  254. 	}
  255.  
  256.  
  257. 	/*"""""""" Custom Rule""""""""*/	
  258. 	ul#qm1 .qmparent1	
  259. 	{	
  260. 		background-image:url(qmimages/cssalt1_arrow_right.gif);
  261. 		background-repeat:no-repeat;
  262. 		background-position:95% 50%;
  263. 	}
  264.  
  265.  
  266. 	/*"""""""" Custom Rule""""""""*/	
  267. 	ul#qm1 ul .qmparent1
  268. 	{	
  269. 		background-image:url(qmimages/cssalt1_arrow_right.gif);
  270. 	}
  271.  
  272.  
  273. 	/*"""""""" Custom Rule""""""""*/	
  274. 	ul#qm1 ul	
  275. 	{	
  276. 		margin:0px 0px 0px -1px;
  277. 	}
  278.  
  279.  
  280. 	/*"""""""" Custom Rule""""""""*/	
  281. 	ul#qm1 ul li:hover > a.qmparent1	
  282. 	{	
  283. 		background-color:#D6D6D6;
  284. 		background-image:url(qmimages/cssalt1_arrow_right_hover.gif);
  285. 		text-decoration:none;
  286. 		border-color:#858585;
  287. 		margin:auto;
  288.  
  289. 	}
  290.  
  291.  
  292. 	/*"""""""" Custom Rule""""""""*/	
  293. 	ul#qm1 li:hover > a.qmparent1	
  294. 	{	
  295. 		background-color:#699EDC;
  296. 		background-image:url(qmimages/cssalt1_arrow_right_hover.gif);
  297. 	}
  298. #horizNav ul li {z-index:1;}
  299. #horiNav ul ul ul
  300. {
  301. position: absolute;
  302. top: 0;
  303. left: 100%;
  304. width: 100%;
  305. }

and my javascript is <script type="text/javascript">
JavaScript Syntax (Toggle Plain Text) 
  1. startList = function() 
  2. {
  3. 	if (document.all&&document.getElementById) 
  4. 	{
  5. 		navRoot = document.getElementById("qm1");
  6.  
  7. 		for (i=0; i<navRoot.childNodes.length; i++)
  8. 		{
  9. 			node = navRoot.childNodes[i];			
  10. 			alert(node);
  11. 			if (node.nodeName=="LI") 
  12. 			{
  13. 				node.onmouseover=function()
  14. 				{
  15. 					this.className+=" over";
  16. 				}
  17. 				node.onmouseout=function()
  18. 				{
  19. 					this.className=this.className.replace(" over", "");
  20. 				}
  21. 			}
  22. 		}
  23. 	}
  24. }
  25. window.onload=startList;
  26.  
  27. </script>
thanks a lot for help.its really urgent .please guys give me favor.i am waiting for reply.
Last edited by peter_budo; Jul 1st, 2009 at 1:34 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
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: need help to my css horizontal menu with javascript for IE

 
0
  #2
Jul 1st, 2009
Here's a simple document sample, which you can incorporate inside your page:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15. .over {
  16.    padding : .200em 1em .200em 1em;
  17.    border : 1px solid #000;
  18.    background-color : #00FF00;
  19.    color : #FFF; }
  20. /* ]]> */
  21. </style> 
  22. <script type="text/javascript">
  23. // <![CDATA[
  24. var myEvent;
  25. var testfun = function( e ) {
  26.    if ((( e.type.toLowerCase === "mouseover" ) || "onmouseover" ) && this.className !== "over" ) {
  27.    this.className = "over";
  28.    return true;
  29.    } this.className = "";
  30. }; var startList = function() {
  31.    var node = (( "getElementById" in document ) ? document.getElementById("main") : document.all.main );
  32.    if ( "childNodes" in node ) {
  33.       for ( var x = 0; x < node.childNodes.length; x++ ) {
  34.          if ((( node.childNodes[ x ].nodeType === Node.ELEMENT_NODE ) || 1 )) {
  35.          var o = node.childNodes;
  36.          (( "addEventListener" in document ) ? o[ x ].addEventListener( "mouseover", testfun, false ) : (( "attachEvent" in document ) ? o[ x ].attachEvent( "onmouseover", testfun ) : document.onmouseover = testfun ));
  37.          (( "addEventListener" in document ) ? o[ x ].addEventListener( "mouseout", testfun, false ) : (( "attachEvent" in document ) ? o[ x ].attachEvent( "onmouseout", testfun ) : document.onmouseout = testfun ));
  38.          continue;
  39.          }
  40.       } return true;
  41.    } alert("This features in not supported on this browser");
  42. }; window.onload = startList;
  43. // ]]>
  44. </script>
  45. </head>
  46. <body>
  47. <div id="main">
  48. <p>Paragraph #1</p>
  49. <p>Paragraph #2</p>
  50. <p>Paragraph #3</p>
  51. </div>
  52. </body>
  53. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 6
Reputation: vik85 is an unknown quantity at this point 
Solved Threads: 0
vik85 vik85 is offline Offline
Newbie Poster

Re: need help to my css horizontal menu with javascript for IE

 
0
  #3
Jul 1st, 2009
hey this code give me lots of error .and it cant run in firefox.it mess up everything of what i did.
please give me gud solution .if you need any further info. thn let me know i will forward to you.
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: need help to my css horizontal menu with javascript for IE

 
0
  #4
Jul 1st, 2009
Is that so!? But the whole thing is working perfectly under OPERA. Try to run the whole document 1st before you apply further modification, so that you would know what you are missing. Can i see your code that you've currently converted into above format?
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: need help to my css horizontal menu with javascript for IE

 
0
  #5
Jul 1st, 2009
Here's another workaround:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15. .over {
  16.    padding : .200em 1em .200em 1em;
  17.    border : 1px solid #000;
  18.    background-color : #00FF00;
  19.    color : #FFF; }
  20. /* ]]> */
  21. </style> 
  22. <script type="text/javascript">
  23. // <![CDATA[
  24. var startList = function() {
  25. var li;
  26.  
  27.    try {
  28.    li = (( document.getElementstByTagName ) ? document.getElementsByTagName("ul")["qm"].getElementsByTagName("li") : document.all.tags("ul").item("qm").all.tags("li")); 
  29.    } catch( e ) {
  30.    li = (( document.getElementById ) ? document.getElementById("qm").children : (( document.all ) ? document.all.qm.children : undefined ));
  31.    } if ( typeof li !== "undefined" ) {
  32.       try { 
  33.       for ( var x = 0, y = 0; x < li.length; x++, y++ ) {
  34.       li[ x ].onmouseover = function() {
  35.             if ( this.className !== "over" ) {
  36.             this.className = "over";
  37.             } return;
  38.          };
  39.       li[ y ].onmouseout = function() {
  40.             if ( this.className === "over" ) {
  41.             this.className = this.className.replace(/over/ig, "" );
  42.             }
  43.          };
  44.       }
  45.       } catch( er ) {
  46.       alert( "Your browser is too old to handle this function!\nThrow it!!!" )
  47.       }
  48.    }
  49. };
  50.  
  51. window.onload = startList;
  52. // ]]>
  53. </script>
  54. </head>
  55. <body>
  56. <div id="main">
  57. <ul id="qm">
  58. <li>List Item #1</li>
  59. <li>List Item #2</li>
  60. <li>List Item #3</li>
  61. </ul>
  62. </div>
  63. </body>
  64. </html>
Last edited by essential; Jul 1st, 2009 at 9:28 pm.
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 6
Reputation: vik85 is an unknown quantity at this point 
Solved Threads: 0
vik85 vik85 is offline Offline
Newbie Poster

Re: need help to my css horizontal menu with javascript for IE

 
0
  #6
Jul 2nd, 2009
hey now is over but its not displaying my drop down menu .still its come out.
you can see it i put your code .
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: need help to my css horizontal menu with javascript for IE

 
0
  #7
Jul 2nd, 2009
Don't you know how to say please!? If the whole script does not work, then the problem is with you.

Altering those lines without knowing what you are exactly doing, will cause the entire script to break.

Maybe you should wait for someone else's, answer...

Im off this thread!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



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



acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart checkbox child close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software unicode w3c web window windowofwords wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC