Hi,
I am using 2-level CSS Drop Down Menu in my perl/CGI program.
here is the code.
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
22 3135
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.
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.
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.
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
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?
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.
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
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.
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?
Change the second startList into startList2. Instead of window.onload, use window.addEventListener, but there are three arguments instead of 2: - window.addEventListener("load",startList,false);
Change the second startList into startList2. Instead of window.onload, use window.addEventListener, but there are three arguments instead of 2: - 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. -
-
#!c:\perl\bin\perl.exe
-
-
use CGI;
-
-
use CGI qw(:standard);
-
-
print header;
-
-
@arr=('a','b');
-
-
-
foreach(@arr)
-
{
-
print<<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">
-
-
#cssdropdown, #cssdropdown ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#cssdropdown li {
-
float: left;
-
position: relative;
-
}
-
-
.mainitems{
-
border: 1px solid black;
-
background-color: #FFEEC6;
-
}
-
-
.mainitems a{
-
margin-left: 6px;
-
margin-right: 8px;
-
text-decoration: none;
-
}
-
-
.subuls{
-
display: none;
-
width: 10em;
-
position: absolute;
-
top: 1.2em;
-
left: 0;
-
background-color: lightyellow;
-
border: 1px solid black;
-
}
-
-
.subuls li{
-
width: 100%;
-
}
-
-
.subuls li a{
-
text-decoration: underline;
-
}
-
-
#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 */
-
top: auto;
-
left: auto;
-
}
-
-
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
-
display: block;
-
}
-
-
#restofcontent { /*wrap rest of content of the page inside this div*/
-
clear: left;
-
}
-
-
</style>
-
-
<script type="text/javascript"><!--//--><![CDATA[//><!--
-
startList = function() {
-
if (document.all&&document.getElementById) {
-
cssdropdownRoot = document.getElementById("cssdropdown");
-
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
-
node = cssdropdownRoot.childNodes[x];
-
if (node.nodeName=="LI") {
-
node.onmouseover=function() {
-
this.className+=" over";
-
}
-
node.onmouseout=function() {
-
this.className=this.className.replace(" over", "");
-
}
-
}
-
}
-
}
-
}
-
-
if (window.attachEvent)
-
window.attachEvent("onload", startList)
-
<!--window.addEventListener("load",startList2,false);-->
-
else
-
-
window.addEventListener("load",startList2,false);
-
<!--window.onload=startList;-->
-
-
//--><!]]></script>
-
-
</head>
-
-
The HTML:
-
-
<body>
-
<ul id="cssdropdown">
-
-
<li class="mainitems">
-
<a href="http://www.cssdrive.com">CSS Gallery</a>
-
<ul class="subuls">
-
<li><a href="">Gordon Mac</a></li>
-
<li><a href="">Juiced Thoughts</a></li>
-
<li><a href="">The Daily Flight</a></li>
-
<li><a href="">GrapeFruit</a></li>
-
</ul>
-
</li>
-
-
<li class="mainitems">
-
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
-
<ul class="subuls" style="width: 15em">
-
<li><a href="">CSS2 Generated Content</a></li>
-
<li><a href="">Custom scrollbar colors</a></li>
-
<li><a href="">Markerless and "no indent" Lists</a></li>
-
</ul>
-
</li>
-
-
</ul>
-
-
<div id="restofcontent">
-
<br />
-
"
-
</div>
-
</body>
-
</html>
-
-
HTML
-
}
-
why is this problem second time it is not showing the drop down menu in IE?
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.
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?
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).
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:-
since array consists two elements it should load twice but in IE its not loading.
How to solve?
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").
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
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.
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: -
#!c:\perl\bin\perl.exe
-
-
use CGI;
-
-
use CGI qw(:standard);
-
-
print header;
-
-
@arr=('a','b');
-
-
$len=@arr;
-
-
print "<br>length of an array=$len<br>";
-
-
if($len >1)
-
{
-
-
#foreach (@arr)
-
#{
-
print<<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">
-
#cssdropdown, #cssdropdown ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#cssdropdown li {
-
float: left;
-
position: relative;
-
}
-
-
#cssdropdown2, #cssdropdown2 ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#cssdropdown2 li {
-
float: left;
-
position: relative;
-
}
-
-
-
.mainitems{
-
border: 1px solid black;
-
background-color: #FFEEC6;
-
}
-
-
.mainitems a{
-
margin-left: 6px;
-
margin-right: 8px;
-
text-decoration: none;
-
}
-
-
.subuls{
-
display: none;
-
width: 10em;
-
position: absolute;
-
top: 1.2em;
-
left: 0;
-
background-color: lightyellow;
-
border: 1px solid black;
-
}
-
-
.subuls li{
-
width: 100%;
-
}
-
-
.subuls li a{
-
text-decoration: underline;
-
}
-
-
#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 */
-
top: auto;
-
left: auto;
-
}
-
-
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
-
display: block;
-
}
-
-
#cssdropdown2 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 */
-
top: auto;
-
left: auto;
-
}
-
-
#cssdropdown2 li:hover ul, li.over ul { /* lists nested under hovered list items */
-
display: block;
-
}
-
-
-
#restofcontent { /*wrap rest of content of the page inside this div*/
-
clear: left;
-
}
-
-
</style>
-
-
<script type="text/javascript"><!--//--><![CDATA[//><!--
-
startList = function() {
-
if (document.all&&document.getElementById) {
-
cssdropdownRoot = document.getElementById("cssdropdown");
-
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
-
node = cssdropdownRoot.childNodes[x];
-
if (node.nodeName=="LI") {
-
node.onmouseover=function() {
-
this.className+=" over";
-
}
-
node.onmouseout=function() {
-
this.className=this.className.replace(" over", "");
-
}
-
}
-
}
-
}
-
}
-
-
if (window.attachEvent)
-
window.attachEvent("onload", startList)
-
else
-
window.onload=startList;
-
-
-
-
-
startList2 = function() {
-
if (document.all&&document.getElementById) {
-
cssdropdownRoot2 = document.getElementById("cssdropdown2");
-
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
-
node = cssdropdownRoot.childNodes[x];
-
if (node.nodeName=="LI") {
-
node.onmouseover=function() {
-
this.className+=" over";
-
}
-
node.onmouseout=function() {
-
this.className=this.className.replace(" over", "");
-
}
-
}
-
}
-
}
-
}
-
-
if (window.attachEvent)
-
window.attachEvent("onload", startList2)
-
else
-
window.onload=startList2;
-
-
//--><!]]></script>
-
-
</head>
-
<body>
-
<ul id="cssdropdown">
-
-
<li class="mainitems">
-
<a href="http://www.cssdrive.com">CSS Gallery</a>
-
<ul class="subuls">
-
<li><a href="">Gordon Mac</a></li>
-
<li><a href="">Juiced Thoughts</a></li>
-
</ul>
-
</li>
-
</ul>
-
<div id="restofcontent">
-
<br />
-
</div>
-
-
<ul id="cssdropdown2">
-
<li class="mainitems">
-
<a href="http://www.cssdrive.com">CSS Gallery</a>
-
<ul class="subuls">
-
<li><a href="">Gordon Mac</a></li>
-
<li><a href="">Juiced Thoughts</a></li>
-
</ul>
-
</li>
-
</ul>
-
<div id="restofcontent">
-
<br />
-
</div>
-
-
-
-
</body>
-
HTML
-
}
-
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
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] - @arr=('a','b');
-
-
$len=@arr;
-
-
$count = 0;
-
-
#foreach (@arr)
-
#{
-
$count++;
-
print<<HTML;
-
-
#cssdropdown$count, #cssdropdown$count ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#cssdropdown$count li {
-
float: left;
-
position: relative;
-
}
and so on. I'm sure you know the proper syntax.
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] - @arr=('a','b');
-
-
$len=@arr;
-
-
$count = 0;
-
-
#foreach (@arr)
-
#{
-
$count++;
-
print<<HTML;
-
-
#cssdropdown$count, #cssdropdown$count ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
}
-
-
#cssdropdown$count li {
-
float: left;
-
position: relative;
-
}
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
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.
Post your reply Sign in to post your reply or Sign up for a free account.
Similar topics
2 posts
views
Thread by Shailan |
last post: by
|
4 posts
views
Thread by Paul |
last post: by
|
8 posts
views
Thread by Vinod |
last post: by
|
1 post
views
Thread by Asapi |
last post: by
|
7 posts
views
Thread by Klaus Friese |
last post: by
|
17 posts
views
Thread by Bill Grigg |
last post: by
|
3 posts
views
Thread by Mike |
last post: by
|
2 posts
views
Thread by Geler |
last post: by
|
47 posts
views
Thread by teju |
last post: by
|
10 posts
views
Thread by sulekhasweety |
last post: by
| | | | | | | | | | |