CODEWITHSUNDEEP
javascriptjquerycsshtmlvisibility
user974896
user974896

Reputation: 1813

Initially hiding a div for later display

My web page is like the following:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

Under this I have jQuery click events which set the display of the clicked item to inherit and the others to none.

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

The showing and hiding works correctly however I do notice that some things in the initially hidden divs do not render correctly, especially the elements that get manipulated by CSS. Essentially when the page loads the hidden divs do not correctly get rendered and when they are shown things look ugly. What is the way to properly do this?

EDIT::::::::::::::::::::::::::::::::::::::::::::::

What I ended up doing is setting all of the initially hidden divs to "visibility: none", then in the pages onLoad() event setting the display: none. When I toggle I change both the visibility and display. Everything renders correctly and because things are statically set to not visible there is no ugly 2 seconds where all the divs show.

Upvotes: 24

Views: 78704

Answers (6)

Oliver Moran
Oliver Moran

Reputation: 5157

Try using visibility instead. Example:

$("#id2").click(function (e) {
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
});

Both display and visibility can have an effect on browser behavior.

An alternative work-around to both is to set the opacity of the divs you want to hide to 0. That always works in my experience but is less elegant.

Update in reply to comment: In that case, you can set other properties like the width and height to 0px and the over-flow to hidden so that the divs don't occupy any space on screen. Ugly, but basic, and works.

<style>
.hidden {
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

You can use the jQuery addClass and removeClass methods to make the divs visible and invisible, e.g.: $("#id1").removeClass("hidden"); and $("#id3").addClass("hidden");.

Upvotes: 15

user5044085
user5044085

Reputation: 

window.onload = pre_loader;

function pre_loader() {

    javascript:document.getElementById('loader').style.visibility='hidden';

    javascript:document.getElementById('loader').style.opacity=0;

}

Upvotes: 0

Sven van Zoelen
Sven van Zoelen

Reputation: 7219

Why not use jQuery show and hide?

Hide the elements you want to hide (duh) on page load with CSS:

#id1, #id2, .. {
    display: none;
}

Or you can hide it with Javacript:

$('#id1, #id2, ..').hide();

Show or hide them by using:

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});

Upvotes: 6

Dom
Dom

Reputation: 2325

Maybe .toggle can help you achieve this?

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});

Upvotes: 1

Aust
Aust

Reputation: 11602

I like to do it like this:
javascript:

$('#btn2').click(function(){
    $('#id1').addClass('hidden');
    $('#id3').addClass('hidden');
    $('#id2').removeClass('hidden');
});

css:

.hidden {
    display: none;
}

html:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10260

Its best not to add display logic into your mark up a better way to do this would be 

.hidden{ display:none;}

.

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden" >
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

.

$(".stuff").click(function () {
    $(".stuff").addClass('hidden');
    $(this).removeClass('hidden');

});

Hope that helps if your still having rendering issues then maby try 

.hidden{ visibility:hidden; }
.stuff{display:block;}

Upvotes: 5

Related Questions