wait 10 sec before the dispaly

**bondigor69** · 06-25-2012 01:50 PM

hello guys I have this script and I want to wait 10 seconds before display the hidden text

Thank you

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

**burnme** · 06-25-2012 02:05 PM

Do a search for setTimeout and clearTimeout on javascript, should give you what you need.

Edit

In fact here's a link http://www.w3schools.com/js/js_timing.asp

**bondigor69** · 06-25-2012 03:23 PM

Originally Posted by burnme

Do a search for setTimeout and clearTimeout on javascript, should give you what you need.

Edit

In fact here's a link http://www.w3schools.com/js/js_timing.asp

I tried that but it dosent work for me
Im a begginer so can you please help me

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)

setInterval(function(divId),10000);
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

**burnme** · 06-25-2012 03:36 PM

Code:

/* Get rid of the onclick, the timer is what is showing the item, not the click */
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

/* add to your body tag the timer so when the page is done loading it calls up the text */
<body onload="TimerSet();">

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
/* set a global var so we can clear out timer */

var otime;

/* add this to the script since you don't want the timer set in the function that does whatever the timer is supposed to do */
function TimerSet(){
otime = setInterval(ShowHide(divId),10000);
}

/* Notice the change, where the timer wasn't in the function at all, and is not there anymore */
function ShowHide(divId){

if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}

/*clear out the timer to we don't have it run */
clearTimeout(otime);

}
</script>

**bondigor69** · 06-25-2012 04:18 PM

Originally Posted by burnme

Code:

/* Get rid of the onclick, the timer is what is showing the item, not the click */
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

/* add to your body tag the timer so when the page is done loading it calls up the text */
<body onload="TimerSet();">

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
/* set a global var so we can clear out timer */

var otime;

/* add this to the script since you don't want the timer set in the function that does whatever the timer is supposed to do */
function TimerSet(){
otime = setInterval(ShowHide(divId),10000);
}

/* Notice the change, where the timer wasn't in the function at all, and is not there anymore */
function ShowHide(divId){

if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}

/*clear out the timer to we don't have it run */
clearTimeout(otime);

}
</script>

I dont want to get rid of the onlick since the hidden text will show up only if someone clicks the link.
when he clicks the link I want to wait 10 seconds before the hidden text appears

**burnme** · 06-25-2012 04:37 PM

okay, then replace the click information of the anchor tag with the onload information in the body tag.

**bondigor69** · 06-25-2012 05:10 PM

Originally Posted by burnme

okay, then replace the click information of the anchor tag with the onload information in the body tag.

hummm .. I know it sound stupid but I dont know that much about javascript.

I tried the code below and it dosent work

Code:

<a onclick ="javascript:TimerSet('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function TimerSet(){
otime = setInterval(ShowHide(divId),10000);
}
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

**007Julien** · 06-25-2012 05:18 PM

Simply add a setTimeout with an anonymous function

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="display:none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
   setTimeout(function(){document.getElementById(divId).style.display='block'},10000);
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

**bondigor69** · 06-25-2012 05:22 PM

Originally Posted by 007julien

simply add a settimeout with an anonymous function

Code:

<a onclick ="javascript:showhide('hiddendiv')" href="javascript:;" >show/hide</a>

<div class="mid" id="hiddendiv" style="display:none" >
this text was hidden
</div>

<script language="javascript">
function showhide(divid)
{
if(document.getelementbyid(divid).style.display == 'none')
{
   settimeout(function(){document.getelementbyid(divid).style.display='block'},10000);
}
else
{
document.getelementbyid(divid).style.display = 'none';
}
}
</script>

you are amazing
thank you

**007Julien** · 06-25-2012 05:22 PM

Simply add a setTimeout with an anonymous function

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="display:none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId) {
   if(document.getElementById(divId).style.display == 'none'){
      setTimeout(function(){document.getElementById(divId).style.display='block'},10000);}
   else {
       document.getElementById(divId).style.display = 'none';}
}
</script>

Thread: wait 10 sec before the dispaly

Thread Tools

Display

Hybrid View

wait 10 sec before the dispaly

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions