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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Onclick show Image or DIV and hide automatically..

    Hi, I am looking to show the image or DIV when clicked and hide it automatically (after specific time). It sounds like simple however I Googled for it but nothing found. So, I am hoping I will get something here in this genius JS programmers forum.

    Any scripts example would be highly appreciated. (Please make it simple)


    Thanks!!
    Last edited by djnp; 06-28-2012 at 07:11 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I don't completely follow. It has to be shown in order to be clicked, so it's already shown. You can automatically hide anything by using setTimeout("function",x); where x is the number of milliseconds (1000 per second) to call the function.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    I don't completely follow. It has to be shown in order to be clicked, so it's already shown. You can automatically hide anything by using setTimeout("function",x); where x is the number of milliseconds (1000 per second) to call the function.
    Thanks for your response. I am new to JS as you can see the code below:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
    function showArrow(o) {
    	document.getElementById(o).style.display='block';
    	setTimeout("showArrow()", 2000);
    	}
    </script>
    
    <a href="javascript: showArrow('arrow');">show that arrow</a>
    <div id="arrow" style="display:none; position: absolute; top: 50px; left: 50px;">↗</div>
    I have tried above code and it works for showing the hidden DIV however it doesn't automatically hide the DIV. As I don't know where to specify following code for hiding the DIV?

    Code:
    document.getElementById(o).style.display='none';

    Thanks!!
    Last edited by djnp; 06-28-2012 at 08:33 PM. Reason: to make it more clear

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    You placed the setTimeout that calls a function within the function, so it loops; every 2 seconds, it sets the display to "block".

    To stop the setTimeout, you need to set it to a variable and use clearTimeout on the variable.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    djnp (06-29-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    You placed the setTimeout that calls a function within the function, so it loops; every 2 seconds, it sets the display to "block".

    To stop the setTimeout, you need to set it to a variable and use clearTimeout on the variable.
    It would be really great if you could show, how to do it. Thanks much..

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!doctype html>
    <html>
    <head><title></title>
    </head>
    <body>
    <div onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},2000)">
      clickme
      <img src="pic.jpg" style="display:none;"></div>
    </body><html>
    Last edited by DaveyErwin; 06-29-2012 at 07:37 PM.

  • Users who have thanked DaveyErwin for this post:

    djnp (06-29-2012)

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
    <doctype html>
    <html>
    <head><title></title>
    </head>
    <body>
    <div onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},2000)">
      clickme
      <img src="pic.jpg" style="display:none;"></div>
    </body><html>
    Genius!! thanks a lot!!

  • #8
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello!! i am so noob! but i would like if you can please tell me the same code like this but with no the timeout.. i want the photo show on click and hide if i click again.. thanks
    <doctype html>
    <html>
    <head><title></title>
    </head>
    <body>
    <div onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},2000)">
    clickme
    <img src="pic.jpg" style="display:none;"></div>
    </body><html>


  •  

    Posting Permissions

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