www.webdeveloper.com
Results 1 to 10 of 10

Thread: wait 10 sec before the dispaly

  1. #1
    Join Date
    Dec 2011
    Posts
    29

    Question wait 10 sec before the dispaly

    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>

  2. #2
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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

  3. #3
    Join Date
    Dec 2011
    Posts
    29
    Quote Originally Posted by burnme View Post
    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>

  4. #4
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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>
    Last edited by burnme; 06-25-2012 at 04:39 PM.

  5. #5
    Join Date
    Dec 2011
    Posts
    29
    Quote Originally Posted by burnme View Post
    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

  6. #6
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    okay, then replace the click information of the anchor tag with the onload information in the body tag.

  7. #7
    Join Date
    Dec 2011
    Posts
    29
    Quote Originally Posted by burnme View Post
    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>

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    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>

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    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>

  10. #10
    Join Date
    Dec 2011
    Posts
    29
    Quote Originally Posted by 007julien View Post
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles