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

hiding boxes dynamically in ie

P: n/a
I've got 3 'alternative' boxes, only one of which I want displayed,
according to the value of an earlier select (so I'm using the
<htmlelement>.style property from javascript).

One is a div containing text, which I amend as appropriate with innerhtml
One is an image.
One is a div containing 4 input text boxes, which are disabled or not as
appropriate.

I've tried .style.visibility = "hidden" / "visible" (correctly leaves
blank space, which I don't want)
I've tried .style.display = "none" / "block" (works for moz, ie treats
as visibility)
I've tried setting .style.height & width to "0px" / null (doesn't work
for ie).

Any suggestions as to how to make the thing disappear and occupy no
space (dynamically) in ie as well as other browsers please ?
If anyone really needs to see the page, go to ccaweddingsdirect.co.uk/basket
login with chris at ccagroup co uk (you'll need to accept a cookie) -
the password is set to testz (it doesn't confer any great privilege,
just accesses my test shopping basket).
then click 'enter personalisation' for 4D01 (christmas card)
Select different wordings to change the bottom section - 10 and 'your
own wording' are the intereesting two, and orderpg.js is the js file.
It's an incomplete work in progress, sorry.

Thanks,
Chris
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Chris Sharman <ch***********@sorry.nospam> wrote in message news:<cf*******************@news.demon.co.uk>...
I've got 3 'alternative' boxes, only one of which I want displayed,
according to the value of an earlier select (so I'm using the
<htmlelement>.style property from javascript).

One is a div containing text, which I amend as appropriate with innerhtml
One is an image.
One is a div containing 4 input text boxes, which are disabled or not as
appropriate.

I've tried .style.visibility = "hidden" / "visible" (correctly leaves
blank space, which I don't want)
I've tried .style.display = "none" / "block" (works for moz, ie treats
as visibility)
I've tried setting .style.height & width to "0px" / null (doesn't work
for ie).

Any suggestions as to how to make the thing disappear and occupy no
space (dynamically) in ie as well as other browsers please ?


To make a long story short (I tried to post the long story and
google puked), use an iframe if you can. There are other problems
with hiding divs, especially if you're using input fields and
buttons. I had discussed similar problems in this ng a few
months ago, and it seems that an iframe is the best workaround.
There are other way cool things you can do with iframes. It's
good practice to create them dynamically rather than directly
in code.
Jul 23 '05 #2

P: n/a
Razzbar wrote:
Chris Sharman <ch***********@sorry.nospam> wrote in message news:<cf*******************@news.demon.co.uk>...
I've got 3 'alternative' boxes, only one of which I want displayed,
according to the value of an earlier select (so I'm using the
<htmlelement>.style property from javascript).

One is a div containing text, which I amend as appropriate with innerhtml
One is an image.
One is a div containing 4 input text boxes, which are disabled or not as
appropriate.

I've tried .style.visibility = "hidden" / "visible" (correctly leaves
blank space, which I don't want)
I've tried .style.display = "none" / "block" (works for moz, ie treats
as visibility)
I've tried setting .style.height & width to "0px" / null (doesn't work
for ie).

Any suggestions as to how to make the thing disappear and occupy no
space (dynamically) in ie as well as other browsers please ?

To make a long story short (I tried to post the long story and
google puked), use an iframe if you can. There are other problems
with hiding divs, especially if you're using input fields and
buttons. I had discussed similar problems in this ng a few
months ago, and it seems that an iframe is the best workaround.
There are other way cool things you can do with iframes. It's
good practice to create them dynamically rather than directly
in code.


I don't think that would work for a form that spanned the [un]hidden
fields, as well as the controlling select and others.

Anyway, if you've still got the long story, please mail to me at
ccagroup co uk (just fill in the dots and my name)

Thanks,
Chris Sharman
Jul 23 '05 #3

P: n/a
Chris Sharman <ch***********@sorry.nospam> wrote in message news:<41**************@sorry.nospam>...
Razzbar wrote:
To make a long story short (I tried to post the long story and
google puked), use an iframe if you can. There are other problems
with hiding divs, especially if you're using input fields and
buttons. I had discussed similar problems in this ng a few
months ago, and it seems that an iframe is the best workaround.
There are other way cool things you can do with iframes. It's
good practice to create them dynamically rather than directly
in code.


I don't think that would work for a form that spanned the [un]hidden
fields, as well as the controlling select and others.


The idea is to put the form on a doc contained in an iframe.

Anyway, if you've still got the long story, please mail to me at
ccagroup co uk (just fill in the dots and my name)


Well, you know how it is when you have a problem and solve it; you
remember the solution rather than the problem (hopefully), so I
had a little trouble recalling exactly what problems I was
encountering by using a div. But using the iframe solved it.

I found this page that demonstrates the problem however. There's
a draggable div in the upper right of the page, and when you
try to drag it over a select box, you see that you can't. If
you use an iframe instead of a div, you can.

http://tinyurl.com/5gfso

But I fear we are drifting from your original problem... Hope
it helps anyhow...
Jul 23 '05 #4

P: n/a
> I've tried .style.display = "none" / "block" (works for moz, ie treats
as visibility)


You were close. Sergio in a post to "Re: show/hide used on checkboxes
not working on IE6" used "" instead of "block". See the article:

http://groups.google.com/groups?hl=e...news.skynet.be

I tried it out in this file. I tried it in Netscape 7.1 and IE 5.2 on
MacOS 10.2.6.

<html>
<head>
<title>forms checking</title>
<script type="text/javascript">

function changeDisplay(theWhat) {
var theDisplay;

alert("in changeDisplay changeDisplay.display[" +
theWhat + "] = " +
changeDisplay.display[theWhat]);

if (changeDisplay.display[theWhat] == true)
{
theDisplay = "none";
changeDisplay.display[theWhat] = false;
}
else
{
theDisplay = "";
changeDisplay.display[theWhat] = true;
}

// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById(theWhat).style.display = theDisplay;
}
else if (document.all)
{
// Path not tested...
alert("Running an older version of IE.");
document.all[theWhat].style.display = theDisplay;
}
else
{ alert("Cannot change visibility of the display element." +
" Was " + theWhat); }

}

// Toggls to keep track of when to display and not display
// a element
changeDisplay.display = [ ];
changeDisplay.display["comesAndGoes"] = true;
changeDisplay.display["worddisappear"] = true;

</script>
</head>

<body>
<p>Please try out our changing display</p>
<div id="comesAndGoes">
<p >This is our disappearing and reappearing
paragraph.</p>
</div>

<form>
<button name="myButton"
onclick="changeDisplay('comesAndGoes');
return false;">Toggle
display of prior sentence.</button>
</form>

<p>This is our disappearing and
reappearing<span id="worddisappear"> word</span>.</p>
<form>
<button name="myButton"
onclick="changeDisplay('worddisappear');
return false;">Toggle
display of the word in the prior sentence.</button>

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

This discussion thread is closed

Replies have been disabled for this discussion.