Page 1 of 1

Make a <div> disappear after x number of seconds

Posted: Thu Sep 04, 2003 3:00 pm
by JayBird
How can i set a <div> to diplay: none afet x number of seconds after a page has loaded using javascript.

CHeerz

Mark

Posted: Thu Sep 04, 2003 4:20 pm
by Vincent Puglia
Hi,

This should provide you with enough to go on:

Code: Select all

<script type="text/javascript">
<!--
function doit()
{
  document.getElementById('a').style.visibility='hidden';
}
setTimeout('doit()',3000);
//-->
</script>
</head>
<body>
<div style="visibility:visible" id="a">
this is the div
</div>
</body>
[\code]

Vinny

Posted: Thu Sep 04, 2003 11:01 pm
by phice
That's so cool ;D

Posted: Fri Sep 05, 2003 2:48 am
by JayBird
cheerz buddy, worked a treat :)

Mark

Posted: Fri Sep 05, 2003 3:04 am
by JayBird
If you wanna see a cool working example i did, check this out

Code: Select all

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=JavaScript>
function getPageItem(itemID) &#123;
	if (document.getElementById) &#123;
		return document.getElementById(itemID);
	&#125;
    
	if (document.all) &#123;
		return document.all&#1111;itemID];
	&#125;

	return null;

&#125;

<!--
function slUpdateSpan(newHtml) &#123;
	var span_obj = getPageItem("idUpdateableSpan");
	if (span_obj) &#123;
		if (span_obj.style.display != "inline") &#123;
			span_obj.style.display = "inline";
		&#125;
	span_obj.innerHTML = newHtml;
	&#125;
&#125;

function killUpdateSpan() &#123;
	var span_obj = getPageItem("idUpdateableSpan");
	if (span_obj) &#123;
		span_obj.style.display = "none";
	&#125;
&#125;
//-->
</script>
</head>

<body>
<div id="idUpdateableSpan"
             style="position: absolute;
                    top: 40%; left: 35%;
                    width: 30%;
                    height: 80px;
                    filter:alpha(opacity=80);
                    -moz-opacity:80%;
                    margin:0;
                    padding:15px;
                    background-color:#eee;
                    border:1px solid #333;
                    text-align: center;
                    z-index:1000;
                    display:none;
                    cursor:default;
                    "></div>
<script language=JavaScript>
<!--
	slUpdateSpan("Yawning...<br><br>");
//-->
</script>


					
<script language=Javascript>
        <!--
		
		setTimeout('killUpdateSpan()',3000);

        //-->
</script>

</body>
</html>
Mark

Posted: Fri Sep 05, 2003 7:35 am
by Vincent Puglia
Hi Mark,

much prettier

Vinny

Posted: Fri Sep 05, 2003 12:58 pm
by Unipus
Nice. One thing: you should modularize the id code so that it works cross-browser, unless you're working with very specific applications.

Re: Make a <div> disappear after x number of seconds

Posted: Wed Mar 27, 2013 8:58 am
by simonmlewis
This is great - but I makes the DIV disappear, it doesn't remove it, thus closing the space.

Be nice if it disappeared and because in theory, that div has now "gone", so the CSS'd space that was taken up, is no longer there.

Re: Make a <div> disappear after x number of seconds

Posted: Wed Mar 27, 2013 9:02 am
by simonmlewis
Think I have it wrong here - it shows the DIV in the code, but it's just not "visible".
Do you know how to literally make it not appear at all - so the entire box "goes" in code ?? I want it to disappear and what's below, moves up.

Re: Make a <div> disappear after x number of seconds

Posted: Wed Mar 27, 2013 10:48 am
by Christopher
You could do something like this:

Code: Select all

function removeElement(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

Re: Make a <div> disappear after x number of seconds

Posted: Wed Mar 27, 2013 10:50 am
by simonmlewis
Lovely thanks - how do I assign the DIV to use that tho?