470,564 Members | 2,270 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > calling css 2-level drop down menu (dhtml issue)

Post your question to a community of 470,564 developers. It's quick & easy.

calling css 2-level drop down menu (DHTML issue)

Hi,

I am using 2-level CSS Drop Down Menu in my perl/CGI program.

here is the code.

Expand|Select|Wrap|Line Numbers
  1. #!c:/perl/bin/perl.exe
  2. use CGI qw(:standard);
  3.  
  4. use CGI;
  5.  
  6. use LWP;
  7.  
  8. print header;
  9.  
  10. @arr=('a','b');
  11.  
  12. $len=@arr;
  13.  
  14. for($limit=0;$limit<$len;$limit++)
  15. {
  16.  
  17. print<<HTML;
  18. <?xml version="1.0" encoding="UTF-8"?>
  19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  20. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  21.  
  22. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  23. <head>
  24. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  25. <style type="text/css">
  26.  
  27. #cssdropdown, #cssdropdown ul {
  28. padding: 0;
  29. margin: 0;
  30. list-style: none;
  31. }
  32.  
  33. #cssdropdown li {
  34. float: left;
  35. position: relative;
  36. }
  37.  
  38. .mainitems{
  39. border: 1px solid black;
  40. background-color: #FFEEC6;
  41. }
  42.  
  43. .mainitems a{
  44. margin-left: 6px;
  45. margin-right: 8px;
  46. text-decoration: none;
  47. }
  48.  
  49. .subuls{
  50. display: none;
  51. width: 10em;
  52. position: absolute;
  53. top: 1.2em;
  54. left: 0;
  55. background-color: lightyellow;
  56. border: 1px solid black;
  57. }
  58.  
  59. .subuls li{
  60. width: 100%;
  61. }
  62.  
  63. .subuls li a{
  64. text-decoration: underline;
  65. }
  66.  
  67. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the 
  68.  
  69. containing li, rather than bottom left */
  70. top: auto;
  71. left: auto;
  72. }
  73.  
  74. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
  75. display: block;
  76. }
  77.  
  78. #restofcontent { /*wrap rest of content of the page inside this div*/
  79. clear: left;
  80. }
  81.  
  82. </style>
  83.  
  84. <script type="text/javascript"><!--//--><![CDATA[//><!--
  85. startList = function() {
  86. if (document.all&&document.getElementById) {
  87. cssdropdownRoot = document.getElementById("cssdropdown");
  88. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  89. node = cssdropdownRoot.childNodes[x];
  90. if (node.nodeName=="LI") {
  91. node.onmouseover=function() {
  92. this.className+=" over";
  93. }
  94. node.onmouseout=function() {
  95. this.className=this.className.replace(" over", "");
  96. }
  97. }
  98. }
  99. }
  100. }
  101.  
  102. if (window.attachEvent)
  103. window.attachEvent("onload", startList)
  104. else
  105. window.onload=startList;
  106.  
  107. //--><!]]></script>
  108.  
  109. <script type="text/javascript"><!--//--><![CDATA[//><!--
  110. startList = function() {
  111. if (document.all&&document.getElementById) {
  112. cssdropdownRoot = document.getElementById("cssdropdown");
  113. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  114. node = cssdropdownRoot.childNodes[x];
  115. if (node.nodeName=="LI") {
  116. node.onmouseover=function() {
  117. this.className+=" over";
  118. }
  119. node.onmouseout=function() {
  120. this.className=this.className.replace(" over", "");
  121. }
  122. }
  123. }
  124. }
  125. }
  126.  
  127. if (window.attachEvent)
  128. window.attachEvent("onload", startList)
  129. else
  130. window.onload=startList;
  131.  
  132. //--><!]]></script>
  133.  
  134. </head>
  135. <body>
  136. <ul id="cssdropdown">
  137.  
  138. <li class="mainitems">
  139. <a href="http://www.cssdrive.com">CSS Gallery</a>
  140. <ul class="subuls">
  141. <li><a href="">Gordon Mac</a></li>
  142. <li><a href="">Juiced Thoughts</a></li>
  143. <li><a href="">The Daily Flight</a></li>
  144. <li><a href="">GrapeFruit</a></li>
  145. </ul>
  146. </li>
  147.  
  148. <li class="mainitems">
  149. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  150. <ul class="subuls" style="width: 15em">
  151. <li><a href="">CSS2 Generated Content</a></li>
  152. <li><a href="">Custom scrollbar colors</a></li>
  153. <li><a href="">Markerless and "no indent" Lists</a></li>
  154. </ul>
  155. </li>
  156.  
  157. </ul>
  158.  
  159. <div id="restofcontent">
  160. <br />
  161. "
  162. </div>    
  163. </body>
  164. </html>
  165. HTML
  166. }
  167.  
The script works fine in mozilla firefox but in IE first time the javascript gets

loaded and displays drop down menu but second time it doesnot display the

drop down menu.But in mozilla both the times the drop down menu is displayed.

(i.e i am calling the HTML DROP DOWN MENU inside the loop so that many

number of times it should be loaded. This is working in mozilla not in IE)

How to solve this problem?


with regards
Archana
Oct 16 '07 #1
22 3135
KevinADC
4,059 Expert 2GB
there is no reason I am aware of to print the same CSS and javascript code more than once in an html document. Print the CSS code and the javascipt code in the head of the html document like it's supposed to be done.
Oct 16 '07 #2
there is no reason I am aware of to print the same CSS and javascript code more than once in an html document. Print the CSS code and the javascipt code in the head of the html document like it's supposed to be done.

Hi ,

There is no other way to figure out why it is not working in IE.
Oct 17 '07 #3
KevinADC
4,059 Expert 2GB
This is not really a CGI or Perl question. It appears to be a D/HTML question. Why it does not work in IE has nothing to do with perl. You are only using perl to print the code to the browser. Just try your D/HTML code in a static document and see how well it works in IE.

I tried just the HTML code in Firefox 2 and IE 6 and it appeared the same in both browsers.
Oct 17 '07 #4
numberwhun
3,503 Expert Mod 2GB
This is not really a CGI or Perl question. It appears to be a D/HTML question. Why it does not work in IE has nothing to do with perl. You are only using perl to print the code to the browser. Just try your D/HTML code in a static document and see how well it works in IE.

I tried just the HTML code in Firefox 2 and IE 6 and it appeared the same in both browsers.
I have to agree with Kevin. Take the (D)HTML code and put it into a normal file (outside of the Perl file). If it works there, then it should work in the Perl code. If not, then I can move this entire thread to the HTML forum for more assistance.

Regards,

Jeff
Oct 17 '07 #5
This is not really a CGI or Perl question. It appears to be a D/HTML question. Why it does not work in IE has nothing to do with perl. You are only using perl to print the code to the browser. Just try your D/HTML code in a static document and see how well it works in IE.

I tried just the HTML code in Firefox 2 and IE 6 and it appeared the same in both browsers.
Hi,

I just tried in static document i.e html it is working in IE as well as mozilla.

but when i used this dhtml code in mozilla it worked perfectly but in IE only once it is loaded.

wht can be done to solve this problem?
Oct 18 '07 #6
KevinADC
4,059 Expert 2GB
Hi,

I just tried in static document i.e html it is working in IE as well as mozilla.

but when i used this dhtml code in mozilla it worked perfectly but in IE only once it is loaded.

wht can be done to solve this problem?

Sorry, I don't know.
Oct 18 '07 #7
numberwhun
3,503 Expert Mod 2GB
Hi,

I just tried in static document i.e html it is working in IE as well as mozilla.

but when i used this dhtml code in mozilla it worked perfectly but in IE only once it is loaded.

wht can be done to solve this problem?
Ok, that said, this is a DHTML issue and not a Perl issue. I am moving this thread.

Initially, I am moving this to the HTML/CSS forum. I am not sure if it should go there or to the Javascript forum. So, if it is determined to go elsewhere, it will be moved accordingly.

Regards,

Jeff
Oct 18 '07 #8
drhowarddrfine
7,435 Expert 4TB
The D in the old term DHTML is for dynamic which would not be HTML or CSS so I'm transferring this to javascript but:

1) You are using the xml declaration on the first line of your document but only modern browsers understand it which means IE chokes on it and goes into quirks mode. Remove the first line of the HTML.

2) You are using xhtml version 1.1 which should only be served as 'application/xhtml+xml' but you are serving it as 'text/html'. Drop this back down to version 1.0 or, better yet, since you are serving as html use html4.01.
Oct 18 '07 #9
The D in the old term DHTML is for dynamic which would not be HTML or CSS so I'm transferring this to javascript but:

1) You are using the xml declaration on the first line of your document but only modern browsers understand it which means IE chokes on it and goes into quirks mode. Remove the first line of the HTML.

2) You are using xhtml version 1.1 which should only be served as 'application/xhtml+xml' but you are serving it as 'text/html'. Drop this back down to version 1.0 or, better yet, since you are serving as html use html4.01.
Hi,

I tried changing but no use.

Since i am giving inside the loop it should print twice.It is doing that in mozilla

but in IE first time drop down menu is displayed but second time drop down is not displayed.

why in IE it doesnot display?
Oct 19 '07 #10
acoder
16,027 Expert Mod 8TB
Change the second startList into startList2. Instead of window.onload, use window.addEventListener, but there are three arguments instead of 2:
Expand|Select|Wrap|Line Numbers
  1. window.addEventListener("load",startList,false);
Oct 19 '07 #11
Change the second startList into startList2. Instead of window.onload, use window.addEventListener, but there are three arguments instead of 2:
Expand|Select|Wrap|Line Numbers
  1. window.addEventListener("load",startList,false);
Hi,

I tried dng but no use.I am not understanding that it works perfectly in mozilla but

in IE only first time drop down menu is displayed why not second time.

Here is the code.

Expand|Select|Wrap|Line Numbers
  1.  
  2. #!c:\perl\bin\perl.exe
  3.  
  4. use CGI;
  5.  
  6. use CGI qw(:standard);
  7.  
  8. print header;
  9.  
  10. @arr=('a','b');
  11.  
  12.  
  13. foreach(@arr)
  14. {
  15. print<<HTML;
  16.  
  17. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  18.         "http://www.w3.org/TR/html4/loose.dtd">
  19. <html>
  20. <head>
  21.  
  22. <style type="text/css">
  23.  
  24. #cssdropdown, #cssdropdown ul {
  25. padding: 0;
  26. margin: 0;
  27. list-style: none;
  28. }
  29.  
  30. #cssdropdown li {
  31. float: left;
  32. position: relative;
  33. }
  34.  
  35. .mainitems{
  36. border: 1px solid black;
  37. background-color: #FFEEC6;
  38. }
  39.  
  40. .mainitems a{
  41. margin-left: 6px;
  42. margin-right: 8px;
  43. text-decoration: none;
  44. }
  45.  
  46. .subuls{
  47. display: none;
  48. width: 10em;
  49. position: absolute;
  50. top: 1.2em;
  51. left: 0;
  52. background-color: lightyellow;
  53. border: 1px solid black;
  54. }
  55.  
  56. .subuls li{
  57. width: 100%;
  58. }
  59.  
  60. .subuls li a{
  61. text-decoration: underline;
  62. }
  63.  
  64. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the 
  65.  
  66. containing li, rather than bottom left */
  67. top: auto;
  68. left: auto;
  69. }
  70.  
  71. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
  72. display: block;
  73. }
  74.  
  75. #restofcontent { /*wrap rest of content of the page inside this div*/
  76. clear: left;
  77. }
  78.  
  79. </style>
  80.  
  81. <script type="text/javascript"><!--//--><![CDATA[//><!--
  82. startList = function() {
  83. if (document.all&&document.getElementById) {
  84. cssdropdownRoot = document.getElementById("cssdropdown");
  85. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  86. node = cssdropdownRoot.childNodes[x];
  87. if (node.nodeName=="LI") {
  88. node.onmouseover=function() {
  89. this.className+=" over";
  90. }
  91. node.onmouseout=function() {
  92. this.className=this.className.replace(" over", "");
  93. }
  94. }
  95. }
  96. }
  97. }
  98.  
  99. if (window.attachEvent)
  100. window.attachEvent("onload", startList)
  101. <!--window.addEventListener("load",startList2,false);-->
  102. else
  103.  
  104. window.addEventListener("load",startList2,false);
  105. <!--window.onload=startList;-->
  106.  
  107. //--><!]]></script>
  108.  
  109. </head>
  110.  
  111. The HTML:
  112.  
  113. <body>
  114. <ul id="cssdropdown">
  115.  
  116. <li class="mainitems">
  117. <a href="http://www.cssdrive.com">CSS Gallery</a>
  118. <ul class="subuls">
  119. <li><a href="">Gordon Mac</a></li>
  120. <li><a href="">Juiced Thoughts</a></li>
  121. <li><a href="">The Daily Flight</a></li>
  122. <li><a href="">GrapeFruit</a></li>
  123. </ul>
  124. </li>
  125.  
  126. <li class="mainitems">
  127. <a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
  128. <ul class="subuls" style="width: 15em">
  129. <li><a href="">CSS2 Generated Content</a></li>
  130. <li><a href="">Custom scrollbar colors</a></li>
  131. <li><a href="">Markerless and "no indent" Lists</a></li>
  132. </ul>
  133. </li>
  134.  
  135. </ul>
  136.  
  137. <div id="restofcontent">
  138. <br />
  139. "
  140. </div>
  141. </body>
  142. </html>
  143.  
  144. HTML
  145. }
  146.  
why is this problem second time it is not showing the drop down menu in IE?
Oct 22 '07 #12
acoder
16,027 Expert Mod 8TB
They're both called startList. You will have to call the second one a different name.

In your latest code, you're creating two full HTML documents which will create invalid code. Only repeat the parts that you need twice.
Oct 22 '07 #13
They're both called startList. You will have to call the second one a different name.

In your latest code, you're creating two full HTML documents which will create invalid code. Only repeat the parts that you need twice.

Hi,

I tried doing that but no use it is working in mozilla not in IE.

Do i have to call the javascript twice?

I want the array elements to replace with CSS gallery onmouseover 2 links it should display.

I tried calling the javascript twice but it is not working in IE.

How to proceed?
Oct 23 '07 #14
acoder
16,027 Expert Mod 8TB
Do i have to call the javascript twice?

I want the array elements to replace with CSS gallery onmouseover 2 links it should display.

I tried calling the javascript twice but it is not working in IE.

How to proceed?
What array elements?

How does this Perl code turn out in the browser? (View Source in the browser).
Oct 24 '07 #15
What array elements?

How does this Perl code turn out in the browser? (View Source in the browser).
Hi,

i have @arr=('a','b');

That array elements has to be passed i checked the source (view source) in IE its
like this:-
Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3.         "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6.  
  7. <style type="text/css">
  8.  
  9. #cssdropdown, #cssdropdown ul {
  10. padding: 0;
  11. margin: 0;
  12. list-style: none;
  13. }
  14.  
  15. #cssdropdown li {
  16. float: left;
  17. position: relative;
  18.  
  19. }
  20.  
  21. .mainitems{
  22. border: 1px solid black;
  23. background-color: #FFEEC6;
  24. }
  25.  
  26. .mainitems a{
  27. margin-left: 6px;
  28. margin-right: 8px;
  29. text-decoration: none;
  30. }
  31.  
  32. .subuls{
  33. display: none;
  34. width: 10em;
  35. position: absolute;
  36. top: 1.2em;
  37. left: 0;
  38. background-color: lightyellow;
  39. border: 1px solid black;
  40. }
  41.  
  42. .subuls li{
  43. width:50%;
  44. }
  45.  
  46. .subuls li a{
  47. text-decoration: underline;
  48. }
  49.  
  50. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
  51. top: auto;
  52. left: auto;
  53. }
  54.  
  55. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
  56. display: block;
  57. }
  58.  
  59. #restofcontent { /*wrap rest of content of the page inside this div*/
  60. clear: left;
  61. }
  62.  
  63. </style>
  64.  
  65. <script type="text/javascript"><!--//--><![CDATA[//><!--
  66. startList = function() {
  67. if (document.all&&document.getElementById) {
  68. cssdropdownRoot = document.getElementById("cssdropdown");
  69. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  70. node = cssdropdownRoot.childNodes[x];
  71. if (node.nodeName=="LI") {
  72. node.onmouseover=function() {
  73. this.className+=" over";
  74. }
  75. node.onmouseout=function() {
  76. this.className=this.className.replace(" over", "");
  77. }
  78. }
  79. }
  80. }
  81. }
  82. if (window.attachEvent)
  83.  
  84. window.attachEvent("onload", startList)
  85.  
  86. else
  87.  
  88. <!--window.onload=startList;-->
  89.  
  90. window.addEventListener("load",startList,false);
  91. //--><!]]></script>
  92.  
  93. </head>
  94.  
  95. <body>
  96. <ul id="cssdropdown">
  97. <li class="mainitems">
  98. <a href="http://www.cssdrive.com">a</a>
  99. <ul class="subuls">
  100. <li><a href="/cgi-bin/p.cgi?a">Gordon Mac</a></li>
  101. <br>
  102. <li><a href="">Juiced Thoughts</a></li>
  103. </ul>
  104. </li>
  105. <div id="restofcontent">
  106. <br>
  107. </div>
  108. </body>
  109. </html>
  110.  
  111. <body>
  112. <ul id="cssdropdown">
  113. <li class="mainitems">
  114. <a href="http://www.cssdrive.com">b</a>
  115. <ul class="subuls">
  116. <li><a href="/cgi-bin/p.cgi?b">Gordon Mac</a></li>
  117. <br>
  118. <li><a href="">Juiced Thoughts</a></li>
  119. </ul>
  120. </li>
  121. <div id="restofcontent">
  122. <br>
  123. </div>
  124. </body>
  125. </html>
  126.  
  127.  
since array consists two elements it should load twice but in IE its not loading.

How to solve?
Oct 25 '07 #16
acoder
16,027 Expert Mod 8TB
Your code is invalid. You have two body tags and two list items with the same ID (IDs should be unique). On line 107-108, you close the body and html tags and then repeat that on lines 123-24.

In your Perl code, only display the list item twice (but remember to change the id for the second one, e.g. cssdropdown2). You will also have to add more CSS rules for the second dropdown. You will need to repeat the rules for #cssdropdown renamed as #cssdropdown2 (or whatever id you choose). In your JavaScript code, repeat the code again, but renamed as startList2 and the id should be cssdropdown2 in document.getElementById("cssdropdown").
Oct 26 '07 #17
Your code is invalid. You have two body tags and two list items with the same ID (IDs should be unique). On line 107-108, you close the body and html tags and then repeat that on lines 123-24.

In your Perl code, only display the list item twice (but remember to change the id for the second one, e.g. cssdropdown2). You will also have to add more CSS rules for the second dropdown. You will need to repeat the rules for #cssdropdown renamed as #cssdropdown2 (or whatever id you choose). In your JavaScript code, repeat the code again, but renamed as startList2 and the id should be cssdropdown2 in document.getElementById("cssdropdown").
Hi,

I am giving elements in array.

The array size might vary .

only 2 elements are there now in but it can be more.

In that case how do i repeat the rules?

could u please tell me wht changes in which lines i have to do?

with regards
Archana
Nov 7 '07 #18
acoder
16,027 Expert Mod 8TB
Keep a count and use that to uniquely name the variables, IDs, etc.

Only repeat the CSS and JavaScript that relate to the dropdown.

Try with only one first within a loop. Once you get that working, change it to 2 or more. You could add all of this using JavaScript only, but that would probably make it more difficult for you.
Nov 7 '07 #19
Keep a count and use that to uniquely name the variables, IDs, etc.

Only repeat the CSS and JavaScript that relate to the dropdown.

Try with only one first within a loop. Once you get that working, change it to 2 or more. You could add all of this using JavaScript only, but that would probably make it more difficult for you.
Hi,

I tried doing like that it is working fine in Mozilla but not in IE.
Here is the code:
Expand|Select|Wrap|Line Numbers
  1. #!c:\perl\bin\perl.exe
  2.  
  3. use CGI;
  4.  
  5. use CGI qw(:standard);
  6.  
  7. print header;
  8.  
  9. @arr=('a','b');
  10.  
  11. $len=@arr;
  12.  
  13. print "<br>length of an array=$len<br>";
  14.  
  15. if($len >1)
  16. {
  17.  
  18. #foreach (@arr)
  19. #{
  20. print<<HTML;
  21.  
  22. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  23.         "http://www.w3.org/TR/html4/loose.dtd">
  24. <html>
  25. <head>
  26. <style type="text/css">
  27. #cssdropdown, #cssdropdown ul {
  28. padding: 0;
  29. margin: 0;
  30. list-style: none;
  31. }
  32.  
  33. #cssdropdown li {
  34. float: left;
  35. position: relative;
  36. }
  37.  
  38. #cssdropdown2, #cssdropdown2 ul {
  39. padding: 0;
  40. margin: 0;
  41. list-style: none;
  42. }
  43.  
  44. #cssdropdown2 li {
  45. float: left;
  46. position: relative;
  47. }
  48.  
  49.  
  50. .mainitems{
  51. border: 1px solid black;
  52. background-color: #FFEEC6;
  53. }
  54.  
  55. .mainitems a{
  56. margin-left: 6px;
  57. margin-right: 8px;
  58. text-decoration: none;
  59. }
  60.  
  61. .subuls{
  62. display: none;
  63. width: 10em;
  64. position: absolute;
  65. top: 1.2em;
  66. left: 0;
  67. background-color: lightyellow;
  68. border: 1px solid black;
  69. }
  70.  
  71. .subuls li{
  72. width: 100%;
  73. }
  74.  
  75. .subuls li a{
  76. text-decoration: underline;
  77. }
  78.  
  79. #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the 
  80.  
  81. containing li, rather than bottom left */
  82. top: auto;
  83. left: auto;
  84. }
  85.  
  86. #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
  87. display: block;
  88. }
  89.  
  90. #cssdropdown2 li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the 
  91.  
  92. containing li, rather than bottom left */
  93. top: auto;
  94. left: auto;
  95. }
  96.  
  97. #cssdropdown2 li:hover ul, li.over ul { /* lists nested under hovered list items */
  98. display: block;
  99. }
  100.  
  101.  
  102. #restofcontent { /*wrap rest of content of the page inside this div*/
  103. clear: left;
  104. }
  105.  
  106. </style>
  107.  
  108. <script type="text/javascript"><!--//--><![CDATA[//><!--
  109. startList = function() {
  110. if (document.all&&document.getElementById) {
  111. cssdropdownRoot = document.getElementById("cssdropdown");
  112. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  113. node = cssdropdownRoot.childNodes[x];
  114. if (node.nodeName=="LI") {
  115. node.onmouseover=function() {
  116. this.className+=" over";
  117. }
  118. node.onmouseout=function() {
  119. this.className=this.className.replace(" over", "");
  120. }
  121. }
  122. }
  123. }
  124. }
  125.  
  126. if (window.attachEvent)
  127. window.attachEvent("onload", startList)
  128. else
  129. window.onload=startList;
  130.  
  131.  
  132.  
  133.  
  134. startList2 = function() {
  135. if (document.all&&document.getElementById) {
  136. cssdropdownRoot2 = document.getElementById("cssdropdown2");
  137. for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
  138. node = cssdropdownRoot.childNodes[x];
  139. if (node.nodeName=="LI") {
  140. node.onmouseover=function() {
  141. this.className+=" over";
  142. }
  143. node.onmouseout=function() {
  144. this.className=this.className.replace(" over", "");
  145. }
  146. }
  147. }
  148. }
  149. }
  150.  
  151. if (window.attachEvent)
  152. window.attachEvent("onload", startList2)
  153. else
  154. window.onload=startList2;
  155.  
  156. //--><!]]></script>
  157.  
  158. </head>
  159. <body>
  160. <ul id="cssdropdown">
  161.  
  162. <li class="mainitems">
  163. <a href="http://www.cssdrive.com">CSS Gallery</a>
  164. <ul class="subuls">
  165. <li><a href="">Gordon Mac</a></li>
  166. <li><a href="">Juiced Thoughts</a></li>
  167. </ul>
  168. </li>
  169. </ul>
  170. <div id="restofcontent">
  171. <br />
  172. </div>
  173.  
  174. <ul id="cssdropdown2">
  175. <li class="mainitems">
  176. <a href="http://www.cssdrive.com">CSS Gallery</a>
  177. <ul class="subuls">
  178. <li><a href="">Gordon Mac</a></li>
  179. <li><a href="">Juiced Thoughts</a></li>
  180. </ul>
  181. </li>
  182. </ul>
  183. <div id="restofcontent">
  184. <br />
  185. </div>
  186.  
  187.  
  188.  
  189. </body>
  190. HTML
  191. }
  192.  
But to i dont know to pass array elements.

It works fine in mozilla.

why it is not working in IE?

pls do suggest what to be changed in the code.

with regards
Archana
Nov 8 '07 #20
acoder
16,027 Expert Mod 8TB
Keep the HTML separate. You can't have two doctypes.

Deal with the CSS first. Note that I'm not too sure of Perl syntax.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. @arr=('a','b');
  2.  
  3. $len=@arr;
  4.  
  5. $count = 0;
  6.  
  7. #foreach (@arr)
  8. #{
  9. $count++;
  10. print<<HTML;
  11.  
  12. #cssdropdown$count, #cssdropdown$count ul {
  13. padding: 0;
  14. margin: 0;
  15. list-style: none;
  16. }
  17.  
  18. #cssdropdown$count li {
  19. float: left;
  20. position: relative;
  21. }
and so on. I'm sure you know the proper syntax.
Nov 8 '07 #21
Keep the HTML separate. You can't have two doctypes.

Deal with the CSS first. Note that I'm not too sure of Perl syntax.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. @arr=('a','b');
  2.  
  3. $len=@arr;
  4.  
  5. $count = 0;
  6.  
  7. #foreach (@arr)
  8. #{
  9. $count++;
  10. print<<HTML;
  11.  
  12. #cssdropdown$count, #cssdropdown$count ul {
  13. padding: 0;
  14. margin: 0;
  15. list-style: none;
  16. }
  17.  
  18. #cssdropdown$count li {
  19. float: left;
  20. position: relative;
  21. }
and so on. I'm sure you know the proper syntax.
Hi,
Does count indicates the number of elements in an array?

do i have to call javascript twice?

with regards
Archana
Nov 12 '07 #22
acoder
16,027 Expert Mod 8TB
Instead of that, use a for loop, since you don't make use of the array anyway.

If you do make use of 'a' and 'b' somewhere in your code, then you would need an array, otherwise a for loop should suffice.

For the JavaScript, you could use document.getElementsByTagName("ul") to get all unordered lists on the page and then loop over them using JavaScript. This would avoid having to duplicate code using Perl. If you have any other lists besides the menus on the page, you will have to make checks for them.
Nov 12 '07 #23

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
Calling Exe in Asp
8 posts views Thread by Vinod | last post: by
Linkage and calling convention
1 post views Thread by Asapi | last post: by
c++ calling java calling c++ ...
7 posts views Thread by Klaus Friese | last post: by
calling DLL
17 posts views Thread by Bill Grigg | last post: by
Timeout Calling Web Service
3 posts views Thread by Mike | last post: by
C/C++ calling convention
2 posts views Thread by Geler | last post: by
c++ calling c functions
47 posts views Thread by teju | last post: by
calling conventions
10 posts views Thread by sulekhasweety | last post: by
Programming
1 post views Thread by livre | last post: by
BYTES.COM © 2022
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.