943,578 Members | Top Members by Rank

Ad:
Jun 30th, 2009
0

need help to my css horizontal menu with javascript for IE

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vik85 is offline Offline
7 posts
since Jun 2009
Jul 1st, 2009
0

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

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>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 1st, 2009
0

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

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vik85 is offline Offline
7 posts
since Jun 2009
Jul 1st, 2009
0

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

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?
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 1st, 2009
0

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

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.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 2nd, 2009
0

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

hey now is over but its not displaying my drop down menu .still its come out.
you can see it i put your code .
Reputation Points: 10
Solved Threads: 0
Newbie Poster
vik85 is offline Offline
7 posts
since Jun 2009
Jul 2nd, 2009
0

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

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!
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: JQuery - Help adding automatic fading slides
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: mouseover Dropdown Menu





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC