hiding boxes dynamically in ie

[Chris Sharman]

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>.s tyle 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.visibili ty = "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 ccaweddingsdire ct.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

[Razzbar]

Chris Sharman <ch***********@ sorry.nospam> wrote in message news:<cf******* ************@ne ws.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>.s tyle 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.visibili ty = "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.

[Chris Sharman]

Razzbar wrote:

Chris Sharman <ch***********@ sorry.nospam> wrote in message news:<cf******* ************@ne ws.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.visibili ty = "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

[Razzbar]

Chris Sharman <ch***********@ sorry.nospam> wrote in message news:<41******* *******@sorry.n ospam>...

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...

[Robert]

> 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(t heWhat) {
var theDisplay;

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

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

// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById(theWha t).style.displa y = 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.d isplay = [ ];
changeDisplay.d isplay["comesAndGo es"] = true;
changeDisplay.d isplay["worddisapp ear"] = true;

</script>
</head>

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

<form>
<button name="myButton"
onclick="change Display('comesA ndGoes');
return false;">Toggle
display of prior sentence.</button>
</form>

<p>This is our disappearing and
reappearing<spa n id="worddisappe ar"> word</span>.</p>
<form>
<button name="myButton"
onclick="change Display('worddi sappear');
return false;">Toggle
display of the word in the prior sentence.</button>

</form>
</body>
</html>
Robert