473,385 Members | 2,044 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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 3394
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,509 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,509 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

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

Similar topics

2
Calling cgi from cgi thru 'system' function. Different behaviour on browser v/s cmd line
by: Shailan | last post by:
Hi Im having trouble with the following code that seems to be behave differently when called from the browser as opposed to the command line. The calling script is a cgi that forks, with the...
Perl
4
Return a value from stored procedure to calling application
by: Paul | last post by:
Hi, In SQL Books Online in the section on @@Error it gives the following example: -- Execute the INSERT statement. INSERT INTO authors (au_id, au_lname, au_fname, phone, address, city,...
Microsoft SQL Server
8
Calling Exe in Asp
by: Vinod | last post by:
Hi, I have a problem, i am calling an exe from asp program. Its not working fine. When i execute the exe through the dos program directly i get the desired result. My exe will convert files in...
ASP / Active Server Pages
1
Linkage and calling convention
by: Asapi | last post by:
1. Are linkage convention and calling convention referring to the same thing? 2. Does calling convention differ between languages C and C++? 3. How does calling convention differ between...
C / C++
7
c++ calling java calling c++ ...
by: Klaus Friese | last post by:
Hi, i'm currently working on a plugin for Adobe InDesign and i have some problems with that. I'm not really a c++ guru, maybe somebody here has an idea how to solve this. The plugin is...
C / C++
17
calling DLL
by: Bill Grigg | last post by:
I have been successfully calling DLL's using VC++ 6.0 and also using VC++7.1 (.NET). I only mention this because I have never felt comfortable with the process, but nonetheless it did work....
.NET Framework
3
Timeout Calling Web Service
by: Mike | last post by:
Timeout Calling Web Service I am calling a .NET 1.1 web service from an aspx page. The web service can take several minutes to complete its tasks before returning a message to the aspx page. ...
Visual Basic .NET
2
C/C++ calling convention
by: Geler | last post by:
A theoretical question: Sorry if its a beginner question. Here is a quote from the MSDN explaning the C/C++ calling convention.. It demonstrates that the calling function is responsible to clean...
C / C++
47
c++ calling c functions
by: teju | last post by:
hi, i am trying 2 merge 2 projects into one project.One project is using c language and the other one is using c++ code. both are working very fine independently.But now i need to merge both...
C / C++
10
calling conventions
by: sulekhasweety | last post by:
Hi, the following is the definition for calling convention ,which I have seen in a text book, can anyone give a more detailed explanation in terms of ANSI - C "the requirements that a...
C / C++
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!