Make a <div> disappear after x number of seconds

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Make a <div> disappear after x number of seconds

Post 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
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post 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
User avatar
phice
Moderator
Posts: 1416
Joined: Sat Apr 20, 2002 3:14 pm
Location: Dallas, TX
Contact:

Post by phice »

That's so cool ;D
Image Image
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

cheerz buddy, worked a treat :)

Mark
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post 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
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post by Vincent Puglia »

Hi Mark,

much prettier

Vinny
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

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

Post by Christopher »

You could do something like this:

Code: Select all

function removeElement(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Lovely thanks - how do I assign the DIV to use that tho?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply