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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    if visible after x time

    If div1 is visible 5 secs after div2 is clicked, then execute a function.. Is this possible?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by harbingerOTV View Post
    i don't mind the fiddle, put please put solution text here so that searching the forum works and to prevent the answer from vanishing if the third party site goes belly up...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    I wrote a solution for this yesterday, but the forum was down for an upgrade, so...

    Quote Originally Posted by resin View Post
    If div1 is visible 5 secs after div2 is clicked, then execute a function.. Is this possible?
    The solution depends on what you mean by "if div1 is visible". It isn't clear if (A) div1's visibility is triggered by an event and should chain another event (executing the function) or (B) if div1 is always visible and you want to execute a function when div1 is located within the browser viewport. harbingerOTV's code assumes a third option (C), that checks if div1 takes up space in the layout using jQuery's visible pseudo-class, but doesn't require that the element literally be visible.

    Quote Originally Posted by harbingerOTV View Post
    Your code could be improved. In particular, your code sets a timer that loops infinitely for no apparent reason. It also requires the jQuery library.

    Here's another try that does what's described in scenario A:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML Demo</title>
    		<style></style>
    	</head>
    	<body>
    		<p id="element1">This is a paragraph.</p>
    		<p id="element2" hidden>This is a second paragraph.</p>
    		<script>
    			// This script was validated at http://jshint.com/ using the following settings:
    			/* jshint browser: true, curly: true, eqeqeq: true, devel: false, forin: true, immed: true, latedef: true, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    			(function () {
    				"use strict";
    				var element1 = document.getElementById("element1");
    				var element2 = document.getElementById("element2");
    				var timer = null;
    				function changeBackgroundColor() {
    					document.documentElement.style.setProperty("background-color", "forestgreen");
    					document.documentElement.style.setProperty("color", "white");
    				}
    				function revertBackgroundColor() {
    					document.documentElement.style.removeProperty("background-color");
    					document.documentElement.style.removeProperty("color");
    				}
    				function toggleElement2Visibility() {
    					if (element2.hasAttribute("hidden")) {
    						element2.removeAttribute("hidden");
    						timer = setTimeout(changeBackgroundColor, 5000);
    					}
    					else { // !element2.hasAttribute("hidden")
    						element2.setAttribute("hidden", "");
    						clearTimeout(timer);
    						revertBackgroundColor();
    					}
    				}
    				element1.addEventListener("click", toggleElement2Visibility);
    			})();
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    In particular, your code sets a timer that loops infinitely for no apparent reason.
    It counts to 5 visually so the OP doesn't have to tap their feet or set an egg timer.

    It also requires the jQuery library.
    The OP posted in the Frameworks section.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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