By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,992 Members | 934 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,992 IT Pros & Developers. It's quick & easy.

show/hide used on checkboxes not working on IE6

P: n/a
Hi all,
I have created the following script that will show/hide a menu based on
checkboxes. It works fine in Opera but not on IE6!
Does anybody knows a workaround this problem?
Thanks for your response.
Sergio
------------------------------------------------
<script language="JavaScript" type="text/javascript">
function dodisplaytbyarray(thewhat) {
if (navigator.appName.indexOf("Microsoft",0) != -1) {
var docloc = "document.all.",style = ".style";
}
var thearrays = new Array();

thearrays = thewhat.split("|");
for (var i = 0; i < "+thearrays+".length; i++) {
eval(docloc+thearrays[i]+style+".visibility='visible'");
eval(docloc+thearrays[i]+style+".position='relative'");
}
</script>
<form action="" method="post">
<div class="form-item"><div id="cat73|cat88"><input type="checkbox"
class="form-checkbox" name="edit[Category][73]" value="73"
onchange="dodisplaytbyarray('cat1')" > business</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat1"><input type="checkbox" class="form-checkbox"
name="edit[Category][1]" value="1">-- agriculture</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat88"><input type="checkbox" class="form-checkbox"
name="edit[Category][88]" value="88">-- B2B</div>
</form>
Jul 23 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
On Thu, 12 Aug 2004 16:31:19 +0200, sergio <no****@nospam.com> wrote:

[snip]
<script language="JavaScript" type="text/javascript">
The language attribute is deprecated; remove it. Moreover, the type
attribute makes it redundant.
function dodisplaytbyarray(thewhat) {
if (navigator.appName.indexOf("Microsoft",0) != -1) {
var docloc = "document.all.",style = ".style";
}
var thearrays = new Array();

thearrays = thewhat.split("|");
for (var i = 0; i < "+thearrays+".length; i++) {
eval(docloc+thearrays[i]+style+".visibility='visible'");
eval(docloc+thearrays[i]+style+".position='relative'");
}
I can guarantee, even without testing it, that that script won't work in
any browser. Even if you corrected the syntax errors, it only has a chance
of working in IE, and I don't see it doing anything useful even then.

If you retyped this, I suggest you don't. It usually leads to errors.
Repost the script and HTML, or better yet, a URL to the page.
</script>
<form action="" method="post">
<div class="form-item"><div id="cat73|cat88"><input type="checkbox"


I also suggest that you validate your HTML. The id in that second DIV
element is invalid. id attributes may only contain "letters, digits
([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods
(".")" (HTML 4.01 Specification). They must also "begin with a letter
([A-Za-z])".

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #2

P: n/a
"sergio" <no****@nospam.com> wrote in message news:<41*********************@news.skynet.be>...
Hi all,
I have created the following script that will show/hide a menu based on
checkboxes. It works fine in Opera but not on IE6!
Does anybody knows a workaround this problem?
Thanks for your response.
Sergio


I'll provide some more information to the problem here. Maybe it will
help someone come up with a solution...
I am not sure why IE is delaying displaying the data. If you open
someother window untop of the IE window and you take the other window
away, IE will show the change. Showhow, IE isn't noticing the change
to the screen. Sometimes minimize will do the trick and sometimes not.
Openning up someother window above the IE window where it covered the
change always showed the change. Obviously, you need to open the
second windo after doing the change. IE displays source worked for
me.

I have seen this before on the Mac version. I kind of ignored it
because of the small market share of the Mac version of IE. I tried
using focus(), but that didn't help. I tried this on MacOS 10.2.6
with IE 5.2.

I included a second file below. I start with item being visible.
Clicking on email will make one line invisible. Clicking on print
makes all three input fiels visible. This works in IE 5.2 on MacOS
10.2.6.

There may be some discussion of this in this forum.

Robert

---------------------- IE delays displaying. ---------

<html>
<head>
<title>forms checking</title>
<style type="text/css">
..form-checkbox {color:black; }
..form-item {color:black; }
</style>

<script type="text/javascript">
function dodisplaytbyarray(thewhat) {

var thearrays = new Array();

thearrays = thewhat.split("|");
// Do not have a clue what "+thearrays+" is about
// Changed it to thearrarys
for (var i = 0; i < thearrays.length; i++) {

// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(thearrays[i]
).style.visibility = 'visible';

}
else if (document.all)
{
alert("Running an older version of IE.");
// I do not know the syntax to avoid the eval.
// I assume there is a way.
eval("document.all." + thearrays[i] +
".style.visibility = 'visible'");
}
else
{ alert("Cannot change visibility of address field"); }

} // of for
} // of function

</script>
</head>

<body>
<br><br><br><br>
<p>Please try out our form.</p>
<form action="" method="post">
<div class="form-item">
<div id="cat73|cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onchange="dodisplaytbyarray('cat1')" > business
</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
</div>
</form>
</body>
</html>
--------------------------------------------------------------------
In a similar use of the hidden visible tag, IE works. Try this file:

<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..formStyle {position:relative; visibility:visible;}
</style>

<script type="text/javascript">

function validate()
{

var x = document.forms["myForm"];
var checkedButton;

// Figure out which radio button was pressed
if (x.receiveVia[0].checked == true)
{ checkedButton = x.receiveVia[0].value;}
else if (x.receiveVia[1].checked == true)
{ checkedButton = x.receiveVia[1].value;}
else
{ checkedButton = '';}

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

alert("checkedButton = " + checkedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (checkedButton == "byEmail")
{
alert("verifying email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (checkedButton=="printed")
{
alert("Verifying printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function showHidden(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("field3").style.visibility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.visibility = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomain.com"
method="POST"
onsubmit="alert('submitting');return validate();">
<!-- semicolons (;) are recommended in event handlers like onclick -->
<p><input type="radio" name="receiveVia" value="printed"
onclick="showHidden('visible');">&nbsp;Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('hidden');
document.forms['myForm'].theAddress.value = '';">&nbsp;Via
Email</p>
<!-- I like to use component names to avoid conflicts with
reserved words. -->
<p>Name:<br>
<input type="text" name="theName" size="20"><br><br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getElementById || document.all)
{ document.write("<div id='field3' class='formStyle'>");}
</script>
Postal address:<br>
<input type="text" name="theAddress" size="40">
<script type="text/javascript">
if (document.getElementById || document.all)
{ document.write("</div>");}
</script>
</p>
<!-- Netscape 4.x doesn't seem to support the onclick event
handler, so I moved the checking code to the form
onsubmit. Netscape doesn't support the alt tag. -->
<p><input type="image" src="submit.gif" border="0" value="Submit"
width="75" height="17"

ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden('visible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hidden');}
else
{ ;}

</script>
</body>
</html>
Jul 23 '05 #3

P: n/a
Robert crossposted over 4(!) newsgroups in 3(!) main hierarchies,
^^^^^^
while the subject being off-topic in 2 of them, without Followup-To:
"sergio" <no****@nospam.com> wrote in message
news:<41*********************@news.skynet.be>...
Please do not write attribution novels. The name of the
poster of the precursor is sufficient most of the time,
see <http://netmeister.org/news/learn2quote.html>.
I have created the following script that will show/hide a menu based on
checkboxes. It works fine in Opera but not on IE6!
Does anybody knows a workaround this problem?
Thanks for your response.
Sergio

^^^^^^
How should one address you anyway?
I'll provide some more information to the problem here. Maybe it will
help someone come up with a solution...
[more hundreds of lines of source code lacking a minimal clue about the
language]


<http://jibbering.com/faq/#FAQ2_3>
F'up2 comp.lang.javascript

PointedEars
Jul 23 '05 #4

P: n/a
"sergio" <no****@nospam.com> wrote in message news:<41*********************@news.skynet.be>...
Hi all,
I have created the following script that will show/hide a menu based on
checkboxes. It works fine in Opera but not on IE6!
Does anybody knows a workaround this problem?


I have looked into the problem some more. It has to do with the event
handler. I changed it to onclick and IE seems to work better. IE
works fine with the onclick event handler and the inclusion of an
alert. Take out the alter and IE seems to miss some of the clicks.

I tried this in IE 5.2 on MacOS 10.2.6.

One should blame the OP if I posted the prior post too much because I
posted where the original post went too. Blame google.

I said the one script worked and the other did not. I didn't know why
at the time.

I tried the following routine:

<html>
<head>
<title>forms checking</title>
<style type="text/css">
..form-checkbox {color:black; }
..form-item {color:black; }
..formStyle {position:relative; visibility:visible;}
</style>

<script type="text/javascript">
function dodisplaytbyarray(thewhat) {
var x = document.forms["myForm"];
var checkedButton;
var thearrays = new Array();

if (x.elements["edit[Category][73]"].checked == true)
{ checkedButton = "visible";}
else
{ checkedButton = "hidden";}

alert("checkedButton = " + checkedButton);

thearrays = thewhat.split("|");

for (var i = 0; i < thearrays.length; i++) {

// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(thearrays[i]
).style.visibility = checkedButton;

}
else if (document.all)
{
alert("Running an older version of IE.");
// I do not know the syntax to avoid the eval.
// I assume there is a way.
eval("document.all." + thearrays[i] +
".style.visibility = " + checkedButton);
}
else
{ alert("Cannot change visibility of address field"); }

} // of for
} // of function

</script>
</head>

<body>
<br><br><br><br>
<!-- edit[Category][73] old name -->
<p>Please try out our form.</p>
<form action=""
method="post"
name="myForm">
<div class="form-item">
<div id="cat73|cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onclick="dodisplaytbyarray('cat1')" > business
</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="visibility:hidden;position:absolute;top:0;l eft:0"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
</div>
</form>

</body>
</html>
Jul 23 '05 #5

P: n/a
Robert,
Thanks a lot for your help! I finally got it working. After some testing my
conclusion is that the <div style=position:??><input></input><div> does not
work very well when setting the position:absolute dynamically. That is why
your last post works well on showing, but it does not work well when
positioning.

So.... my workaround has been to use the attibute "display" which is part of
CSS1, seems to work on NN4 and IE4.

Below is the code.
Thanks again for your help,
Sergio

----------------------------------
<html>
<head>
<title>forms checking</title>
<script type="text/javascript">
function dodisplaytbyarray(thewhat) {
var x = document.forms["myForm"];
var thedisplay,ok;
var thearrays = new Array();

if (x.elements["edit[Category][73]"].checked == true)
{ thedisplay = "";}
else
{ thedisplay = "none";}
thearrays = thewhat.split("|");

for (var i = 0; i < thearrays.length; i++) {

// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(thearrays[i]).style.display = thedisplay;
}
else if (document.all)
{
alert("Running an older version of IE.");
// I do not know the syntax to avoid the eval.
// I assume there is a way.
eval("document.all." + thearrays[i] +
".style.display = " + thedisplay);
}
else
{ alert("Cannot change visibility of address field"); }

}
}

</script>
</head>

<body>
<p>Please try out our form.</p>
<form action=""
method="post"
name="myForm">
<div id="cat73" class="form-item">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][73]"
value="73"
onclick="dodisplaytbyarray('cat1|cat88')"
business

</div>
<div style="display:none"
id="cat1">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][1]"
value="1">-- agriculture
</div>
<div style="display:none"
id="cat88">
<input type="checkbox"
class="form-checkbox"
name="edit[Category][88]"
value="88">-- B2B
</div>
text to see if it flows
</form>
</body>
</html>
Jul 23 '05 #6

P: n/a
On Fri, 13 Aug 2004 11:04:44 +0200, sergio <no****@nospam.com> wrote:

[snip]
// I do not know the syntax to avoid the eval.
// I assume there is a way.
eval("document.all." + thearrays[i] +
".style.display = " + thedisplay);


document.all[thearrays[i]].style.display = thedisplay;

By the way, just as you check for support of getElementById() and all[],
you should check that the style object is supported, too.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #7

P: n/a
sergio wrote:
[snip]

So.... my workaround has been to use the attibute "display" which is part of
CSS1, seems to work on NN4 and IE4.


Not in NN4.....
Mick
Jul 23 '05 #8

P: n/a
> So.... my workaround has been to use the attibute "display" which is part of
CSS1, seems to work on NN4 and IE4.


On IE 5.2 on MacOS 10.2.6, if you pause between clicks all is well.
If you click quickly, IE will eventually get confused. In IE 4.72 on
Windows 95, all is well.

NN4.x cannot reflow text.

Glad that I was able to assist.

Robert
Jul 23 '05 #9

P: n/a
JRS: In article <12****************@PointedEars.de>, dated Thu, 12 Aug
2004 22:54:46, seen in news:comp.lang.javascript, Thomas 'PointedEars'
Lahn <Po*********@web.de> posted :
Robert crossposted over 4(!) newsgroups in 3(!) main hierarchies,
^^^^^^
That is perfectly permissible, provided that he considers the article to
be on-topic in all, as the OP did. There is, rightly, nothing in the
current usenet standards against cross-hierarchy posting.

However, posting by the OP to c.l.j.j was unwise, since the group has no
legitimate existence. Why did you fail to note that?

Also, posts in borland.* should be injected at Borland's server only,
and not cross-posted; it is a private hierarchy, improperly copied on
some other servers. Why did you fail to note that? Why, indeed, did
you break that rule yourself?
while the subject being off-topic in 2 of them, without Followup-To:


There is no requirement to set follow-up to a single group, or to fewer
groups, if an author considers all groups to be on-topic. An author is
perfectly entitled to be wrong in such matters, provided that it is
unintentional.

"sergio" <no****@nospam.com> wrote in message
news:<41*********************@news.skynet.be>...


Please do not write attribution novels. The name of the
poster of the precursor is sufficient most of the time,
see <http://netmeister.org/news/learn2quote.html>.


There is no such requirement in current thinking; see
http://www.ietf.org/internet-drafts/...-useage-00.txt
http://www.ietf.org/internet-drafts/...article-13.txt
--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.