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

Showing and Hiding DIVs in FireFox

P: n/a
I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.

If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is place away from the second div. I've noticed that the
gap is about the size of the hidden div.

Is there a way to do this div show/hide, and still have the third div
lineup directly below the shown div?

Under IE the bluediv is placed exactly as I would like, directly under
the shown div.

Thanks for your help,

Greg

<html>

<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}
</script>
<style>

..Section {
border: 1px solid black;
}

..BlueDiv {
background-color:blue;
color:white;
}

</style>

<body>
<div class="Section" id="GeneralStatic">
<div>
<a href="javascript:showGeneralEdit(true)">Edit</a> in static mode
</div>
</div>
<div style="display:none;" class="Section" id="GeneralEdit">
<div>
<a href="javascript:showGeneralEdit(false)">Cancel</a> in edit mode
</div>
</div>
<div class="BlueDiv">
<div>
blue div
</div>
</div>
</body>
</html>

Oct 11 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a

gr********@gmail.com wrote:
I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.

If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is place away from the second div. I've noticed that the
gap is about the size of the hidden div.

Is there a way to do this div show/hide, and still have the third div
lineup directly below the shown div?

Under IE the bluediv is placed exactly as I would like, directly under
the shown div.

Thanks for your help,

Greg

<html>
Where is doctype?
No doctype = quirks mode.

<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}


I use this as well as set visibility to "visible" or "hidden" in my
scripts that toggle divs, and I don't have an issue with it taking up
space, so try that.
And use doctype.
Quirks mode is responsible for all kinds of cross-browser issues, IME.

Oct 11 '05 #2

P: n/a
I try this but the results are the same...

Any other ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}
</script>

<style>

Oct 11 '05 #3

P: n/a
gr********@gmail.com wrote:
I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.

If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is place away from the second div. I've noticed that the
gap is about the size of the hidden div.

Is there a way to do this div show/hide, and still have the third div
lineup directly below the shown div?

Under IE the bluediv is placed exactly as I would like, directly under
the shown div.

The difference between the two browsers is that Firefox inserts text
nodes in the document to preserve whitespace in the source code, IE
doesn't. How this whitespace is handled is causing your problem.

The whitespace between the end of the 'GeneralStatic' div and the start
of the 'GeneralEdit' div causes the space that you see. For some
reason, the treatment of this whitespace is affecting how the divs are
shown - the behaviour seems a bit bizarre to me. Remove it and all is well.

You might try posting in a comp.infosystems.www.authoring.html to see if
they have a real answer, or look through the Mozilla bug log.

[...] <body>
<div class="Section" id="GeneralStatic">
<div>
<a href="javascript:showGeneralEdit(true)">Edit</a> in static mode
</div>
</div>
<div style="display:none;" class="Section" id="GeneralEdit">
Remove the whitespace between the closing 'GeneralStatic' div tag and
opening 'GeneralEdit' div tag:

</div><div style="display:none;" class="Section" id="GeneralEdit">
<div>
<a href="javascript:showGeneralEdit(false)">Cancel</a> in edit mode
</div>


[...]

--
Rob
Oct 12 '05 #4

P: n/a
> "gr********@gmail.com" <gr********@gmail.com> wrote:
news:11**********************@f14g2000cwb.googlegr oups.com....

I have the following html sample, where I'd like to have a show and
hide two divs, one replacing the other. Following these two divs is a
third div (the bluediv) which I would like to have placed right up
directly below to the first or second div, depending on which is
showing.

If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is place away from the second div. I've noticed that the
gap is about the size of the hidden div.

Is there a way to do this div show/hide, and still have the third div
lineup directly below the shown div?

Under IE the bluediv is placed exactly as I would like, directly under
the shown div.

<html>

<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}
</script>

<style>

.Section {
border: 1px solid black;
}

.BlueDiv {
background-color:blue;
color:white;
}

</style>

<body>
<div class="Section" id="GeneralStatic">
<div>
<a href="javascript:showGeneralEdit(true)">Edit</a> in static mode
</div>
</div>
<div style="display:none;" class="Section" id="GeneralEdit">
<div>
<a href="javascript:showGeneralEdit(false)">Cancel</a> in edit
mode </div>
</div>
<div class="BlueDiv">
<div>
blue div
</div>
</div>
</body>
</html>


<script type="text/javascript">
function showGeneralEdit() {
var diva = document.getElementById("GeneralEdit").style;
var divb = document.getElementById("GeneralStatic").style;
(diva.display=='')?
(diva.display='none')&(divb.display=''):
(diva.display='')&(divb.display='none');
document.body.style.display='none';
document.body.style.display='';
}
</script>

--
BootNic Wednesday, October 12, 2005 1:03 AM

Humor is emotional chaos remembered in tranquility.
*James Thurber*
Oct 12 '05 #5

P: n/a
gr********@gmail.com wrote:
I try this but the results are the same...
Maybe because ...
Any other ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<script>
.... it's not Valid HTML 4.01. <http://validator.w3.org/>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.displ ay = "";
document.getElementById("GeneralStatic").style.dis play = "none";
} else {
document.getElementById("GeneralEdit").style.displ ay = "none";
document.getElementById("GeneralStatic").style.dis play = "";
}
}
You access either element in both cases, so you should at least compact to

function showGeneralEdit(show)
{
var
oGE = document.getElementById("GeneralEdit"),
oGS = document.getElementById("GeneralStatic");

if (show)
{
oGE.style.display = "";
oGS.style.display = "none"
}
else
{
oGE.style.display = "none";
oGS.style.display = "";
}
}

This of course leaves the task of performing proper feature tests
on properties before, see <http://pointedears.de/scripts/test/whatami> ff.

<style>


Where's the type attribute and it's value?
PointedEars
--
This above all: To thine own self be true.
-- William Shakespeare (1564-1616)
Oct 16 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.