Showing and Hiding DIVs in FireFox

G

gregmercer

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.display = "";
document.getElementById("GeneralStatic").style.display = "none";
} else {
document.getElementById("GeneralEdit").style.display = "none";
document.getElementById("GeneralStatic").style.display = "";
}
}
</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>
 
N

nikki

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>
Click to expand...

Where is doctype?
No doctype = quirks mode.
<script>
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.display = "";
document.getElementById("GeneralStatic").style.display = "none";
} else {
document.getElementById("GeneralEdit").style.display = "none";
document.getElementById("GeneralStatic").style.display = "";
}
}
Click to expand...

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

gregmercer

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.display = "";
document.getElementById("GeneralStatic").style.display = "none";
} else {
document.getElementById("GeneralEdit").style.display = "none";
document.getElementById("GeneralStatic").style.display = "";
}
}
</script>

<style>
 
R

RobG

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.
Click to expand...


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">
Click to expand...

Remove the whitespace between the closing 'GeneralStatic' div tag and
opening 'GeneralEdit' div tag:

<div>
<a href="javascript:showGeneralEdit(false)">Cancel</a> in edit mode
</div>
Click to expand...

[...]
 
B

BootNic

[email protected] said:
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.display = "";
document.getElementById("GeneralStatic").style.display = "none";
} else {
document.getElementById("GeneralEdit").style.display = "none";
document.getElementById("GeneralStatic").style.display = "";
}
}
</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>
Click to expand...

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

Thomas 'PointedEars' Lahn

I try this but the results are the same...
Click to expand...

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>
Click to expand...

.... it's not Valid HTML 4.01. said:
function showGeneralEdit(show) {
if (show) {
document.getElementById("GeneralEdit").style.display = "";
document.getElementById("GeneralStatic").style.display = "none";
} else {
document.getElementById("GeneralEdit").style.display = "none";
document.getElementById("GeneralStatic").style.display = "";
}
}
Click to expand...

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
<style>
Click to expand...

Where's the type attribute and it's value?


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
How do I fix this issue in sqaurespace code block? 1
hiding all text with a given CLASS 13
Javascript not hiding nested elements simultaneously 2
Closing an overlay outside the overlay as well 1
Dropdown menu in a fixed navbar 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Hiding selected divs 1

Members online

Total: 56 (members: 1, guests: 55)
Robots: 247

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top