Wordpress Custom Jquery/Javascript Div Appearance After Delay/Scroll

by Mogly
5 replies
  • WEB DESIGN
  • |
Is there any way to make a specific DIV appear when someone scrolls down to the bottom of a blog post? (And then after a set delay?).

So basically I'd like to make it so my opt-in form appears after the bottom of a blog post appears on a viewers screen, but after one second.

Is that possible with jquery/javascript?
#appearance #custom #delay or scroll #div #jquery or javascript #wordpress
  • Profile picture of the author Michael71
    Yes, that is possible with jQuery
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7722706].message }}
  • Profile picture of the author Mogly
    Do you know where I could go to learn how to code that, or where I could get an example of the code behind that?
    {{ DiscussionBoard.errors[7722798].message }}
    • Profile picture of the author Brandon Tanner
      First, set the CSS style of your opt-in div to "display: none".

      Then, you can do this for the jQuery part (assuming the ID of the div in question is "opt-in")...

      Code:
      $(window).scroll(function() {   
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               setTimeout(function(){
                   $('#opt-in').show();
               }, 1000); // 1000 = 1 second delay
           }
      });
      ^^ That code will only work if the user scrolls to the very bottom of the page. If they only get close to the bottom, it won't fire.

      If you want it to fire when they get close to the bottom, then you can do this instead (the following example will fire when they get within 200 pixels of the bottom)...

      Code:
      $(window).scroll(function() {   
           if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
               setTimeout(function(){
                   $('#opt-in').show();
               }, 1000); // 1000 = 1 second delay
           }
      });
      Signature

      {{ DiscussionBoard.errors[7723105].message }}
  • Profile picture of the author Mogly
    Brandon - Thanks so much man.

    Really appreciate it.

    That's almost exactly what I'm looking for!

    The only thing is that because there are comments on my page, the size of the page (the height) will always be changing, so 200 pixels from the bottom could mean the opt-in box should show, but if there are 10+ comments, it might mean they would have to scroll past the opt-in box's location, to get it to show.

    See what I mean?

    Is there anyway to make it show based on the user either

    1) Scrolls past a different DIV
    2) Scrolling to the bottom of the post
    3) Scrolling to the location where the opt-in box will appear?
    {{ DiscussionBoard.errors[7723601].message }}

Trending Topics