Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    javascript close link?

    Can someone tell me how to make a close button for this? The close button I currently have here makes the IMAGE2 disappear but I cannot see IMAGE1 until the time runs out on the setTmeout. I want to be able to click the closeX and close out the whole script leaving IMAGE1 showing. Here is what I have:

    Code:
                <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
    	<tr>
    		<td align="center">
    <script type="text/javascript"> 
    window.onload = function () { 
    setTimeout(function () { 
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    </script>
    <div id="hideOverlay">
    <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
    	<tr>
    		<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="var lyr =document.getElementById('hideOverlay'); lyr.innerHTML='';"/><font color="#666666" size="2">Close [x]</font></a>IMAGE2 GOES HERE</td>
    			</tr>
    		</table></div>
    		</td>
    	</tr>
    </table>
    </div>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Assign a variable name to the function

    var tim = setTimeout(function () {

    and then when the button is clicked

    window.clearTimeout("tim")


    Quizmaster: What "R" was Hilary Clinton's maiden name?
    Contestant: Er, um . .. is it Rottweiler?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Philip. I added the var tim = setTimeout(function () { to the Javascript at:

    Code:
    <script type="text/javascript"> 
    window.onload = function () { 
    var tim = setTimeout(function () {  
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    </script>
    But how do I add the other code to make it work? It is a text word CLOSE that I want to close the javascript not a button.

    Thanks again for any help

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by WildcatBart View Post
    Thanks Philip. I added the var tim = setTimeout(function () { to the Javascript at:

    Code:
    <script type="text/javascript"> 
    window.onload = function () { 
    var tim = setTimeout(function () {  
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    </script>
    But how do I add the other code to make it work? It is a text word CLOSE that I want to close the javascript not a button.

    Thanks again for any help
    Just put the text into a span, or you can even use an anchor.

    for example:

    Code:
    <a href='#' onclick='window.clearTimeout("tim");return false'>Close [x]</a>
    Or even make window.clearTimeout('tim') a function and then 'onclick=myFunction()', etc
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by mvmacd View Post
    Code:
    <a href='#' onclick='window.clearTimeout("tim");return false'>Close [x]</a>
    Use <a href="javascript: void(0)" rather than <a href = "#" which will cause a scroll to the top of the page.

    OP - You asked for "Can someone tell me how to make a close button for this?"
    Last edited by Philip M; 12-09-2011 at 04:39 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You are right Philip I did ask for a button. Sorry

    I tried what you suggested and I click the Close [X] and it does nothing. it won't close...it just waits and after the seconds the IMAGE1 appears and IMAGE2 disappears.

    Here is what I have

    Code:
    <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
    	<tr>
    		<td align="center">
    <script type="text/javascript"> 
    window.onload = function () { 
    var tim = setTimeout(function () { 
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    </script>
    <div id="hideOverlay">
    <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
    	<tr>
    		<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="javascript:window.clearTimeout('tim')"/>Close [x]</a><br>IMAGE2 GOES HERE</td>
    			</tr>
    		</table>
    		</td>
    	</tr>
    </table>
    </div>
    Any ideas?

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump....Does anyone know of any other forums that have more javascript coders that might know how to get this working?

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Don't be impatient. We are not around 24/7, especially at weekends. Please look at Posting Guideline #5.

    But I am sorry that my advice to use clearTimeout() was not correct in this situation. Try this:-

    Code:
    <script type="text/javascript"> 
    
    window.onload = function () { 
    var tim = setTimeout(function () { 
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    
    function stop() {
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE'; 
    }
    </script>
    
    <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="350">
    <tr>
    <td align="center">
    
    <div id="hideOverlay">
    <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
    <tr>
    <td align="center" width="650" height="350"><a style="text-decoration: none"  href="javascript:void(0)" onclick="stop()">Close [x]</a><br>IMAGE2 GOES HERE</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    Last edited by Philip M; 12-11-2011 at 12:08 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry about being impatient I understand you guys are not here all the time...I will be more patient in the future.

    That code almost did it. When it loads...and I let it sit. After 6 seconds the IMAGE1 (animated GIF) appears and plays (it is a 20 second gif). if it loads and I click close[X] IMAGE1 (animated GIF) appears and plays but after the 6 seconds it restarts again then completes the 20 second animated.gif. It seems like the 6 second countdown is not stopping once you click close

    Any ideas? and thanks again

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You did not mention anything about animated gifs.

    If you click on the link after (say) 3 seconds, then function stop() is called and IMAGE1 appears. The timeout does continue to run, but after a further 3 seconds it expires and does what has already occured, that is show IMAGE1 in the div where it is already displayed. In other words, it starts the animated gif over again. If the image was static that would not be apparant.

    Change the script as follows:-

    Code:
    <script type="text/javascript"> 
    
    var tim;
    window.onload = function () { 
    tim = setTimeout(function () { 
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
    
    function stop() {
    clearTimeout(tim);
    var div = document.getElementById('hideOverlay'); 
    div.innerHTML = 'IMAGE1 GOES HERE'; 
    }
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by Philip M View Post
    Use <a href="javascript: void(0)" rather than <a href = "#" which will cause a scroll to the top of the page.

    OP - You asked for "Can someone tell me how to make a close button for this?"
    Yeah, or you can do
    Code:
    <a href='#' onclick='return false'>
    I was just using that as an example, I guess I wasn't thinking, or I expected the OP to figure out the scrolling part
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #13
    New Coder
    Join Date
    Dec 2011
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked perfectly...thank you so much Philip...thanks for your help too mvmacd


  •  

    Posting Permissions

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