PDA

View Full Version : javascript - hide div on initial page load


moodie
April 30th, 2008, 07:56 PM
I'm building a site and using this bit of code to hide a div on click


{
var obj = document.layers ? document.layers[szDivID] :
document.getElementById ? document.getElementById(szDivID).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}

its all working fine, but i was wanting to know if it was possible to hide a div on the initial page load, but just once off. Basically when the site loads, there is an empty #content div, so I wan to hide it, but that same div holds the content for all the other pages, so it would need to be visible after the first page.

this is the site http://www.blockprojects.com/index.php

any help would be great.
moodie
May 1st, 2008, 08:00 PM
any one?

is it possible to hide the #content div on load, but only on the index.php / home page?
Templarian
May 1st, 2008, 09:17 PM
#content {
display: none;
}

That is some weird show hide code. Usually its better to just use the display style property to show hide divs.

if(document.getElementById('content').style.displa y == "block"){
document.getElementById('content').style.display = "none";
}else{
document.getElementById('content').style.display = "block";
}
uksubhuman
May 1st, 2008, 10:19 PM
It sounds like you want the element to ONLY be hidden on the index page. In that case you can add a class attribute and style that class, ie:



<!-- add this to your <style> declaration -->
div.hideme { display: none }

...

<!-- add the class attribute to your element, but ONLY in index.php -->
<div id="content" class="hideme">


If I may make one distinction, the 'visibility' and 'display' properties are markedly different...

'visibility:hidden' will hide the element, but it will still take up space in the layout.

'display:none' will hide the element and collapse the resulting hole in your layout.

Be sure you're choosing the right one for your purpose.
moodie
May 2nd, 2008, 12:19 AM
thanks guys

the site is set up so that the #content div is in a layer above the #menu div. I have been able to hide the content div to view the menu, which is fine once you are navigating the site, but for the initial page load, i only want the #menu div visible (like you said
uksubhuman)

the problem is its all running of indexhibit, a cms, so any style change to the div holding the content via the css affects the whole site as the content is loaded dynamically into the index page. (i tried your above example and now the #content div is hidden on every page)
jkanakaraj
May 16th, 2008, 04:23 AM
You can create a function to do this, and add an event handler to the body tag.


<script>
function hideDiv(){
document.getElementById('IDGOESHERE').style.displa y = "none";
}
hideDiv()
</script>
bear
May 20th, 2008, 10:08 AM
You can create a function to do this, and add an event handler to the body tag.


<script>
function hideDiv(){
document.getElementById('IDGOESHERE').style.displa y = "none";
}
hideDiv()
</script>


Actually, the onLoad attribute in the <body> tag, and a call to the function there, should be able to assist you. This is for the body part.


<script>
// Check for INT value.
var numInt = 1;

// I'd put this code into a separate script so you don't have to re-write this. Javascript can use variables declared on(Level 2: In the Head) and off(Level 3: Separate file) of the page.
// Variable.
function chckFrInt()
{// Check to see if it's the first time.
if(numInt == 1)
{// if it IS the first time
hideDiv()
}
}

function hideDiv(){
document.getElementById('IDGOESHERE').style.displa y = "none";
}
hideDiv()
</script>
<body onload="javascript:chckFrInt()">