Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2016
    Posts
    6
    Member #
    53398

    Hidden Div sliding in with a timer.

    Several pages on our website include a button/link on the top right corner of our site that, when clicked, will slide a div into view that allows the visitor to fill in a short form and ask a question to a knowledge base. They can also click the same button/link and the div will slide right back out of view.

    It gets used, but not enough that we're wondering if the design is too subtle, or if the message on the button is not clear enough. (that's a design issue, but tptb want to keep the design and they have another solution in mind)

    Since all the pages this button appears are "Gateway" pages - lots of links, not a lot of actual content - the thought is that if anyone lingers on a page like that too long, they either aren't finding what they are looking for, or don't know what they are looking for. We want to nudge them into asking a question.

    So if they stay on the page, after a specific amount of time, and haven't clicked the button to reveal the form, we want the form to slide out automatically.

    We're using a simple Jquery script:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$(".trigger").click(function(){
    		$(".panel").toggle("fast");
    		$(this).toggleClass("active");
    		return false;
    	});
    });
    </script>
    This is the HTML on the page:

    Code:
    <a href="#" class="trigger">Ask [Us]!</a> 
    <div class="panel"> 
    	<h2>Have a Question? Ask Us!</h2> 
    	[Form goes here.] 
    </div>
    The "trigger" link is the button. The "panel" div has the question.

    Can the script be modified so that the div will slide out after maybe 20 or 30 seconds without having to activate the "trigger?"

    I'd like the user to be able to close the div if they don't want to ask a question. I've found scripts that allow a fadeIn of a div on a timer, but I'd rather have the sliding effect, and I'm not sure how to incorporate it into the existing script without breaking it. I still want the "toggle" aspect - open and close on command.

    Any help would be appreciated.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,622
    Member #
    5580
    Liked
    711 times
    Try this (untested):

    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){
     $(".trigger").click(function(){
      $(".panel").toggle("fast");
      $(this).toggleClass("active");
      return false;
     });
    });
    
    // Nudge the user if they don't do anything for 20 seconds.
    function nudge(){
     $(".panel").toggle("fast");
     $(this).toggleClass("active");
     return false;
    }
    
    var t = setTimeout(nudge, 2000);
    
    </script>


  4. #3
    Junior Member
    Join Date
    Feb 2016
    Posts
    6
    Member #
    53398
    Hi mlseim, It's a start! (I tested it.)

    The the timer works and reveals the div after the set time. (20000 = 20 seconds)

    However, the toggle stopped working. When I click the button before the timer, the div "opens" and closes immediately, When the div is "open" you can't toggle the the button to close the div afterwards. It closes, then opens back up again.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,622
    Member #
    5580
    Liked
    711 times
    In that case, after the timer nudges the link box, you need to clear the timer to stop the function.
    See added line below to clear the timer ...

    Code:
    <script type="text/javascript">
    
    $(document).ready(function(){
     $(".trigger").click(function(){
      $(".panel").toggle("fast");
      $(this).toggleClass("active");
      return false;
     });
    });
    
    // Nudge the user if they don't do anything for 20 seconds.
    function nudge(){
     $(".panel").toggle("fast");
     $(this).toggleClass("active");
     clearTimeout(nudge);
     return false;
    }
    
    var t = setTimeout(nudge, 2000);
    
    </script>


  6. #5
    Junior Member
    Join Date
    Feb 2016
    Posts
    6
    Member #
    53398
    Thanks! That fixed it. Much appreciated.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com