CODEWITHSUNDEEP
javascriptjquerywordpress
Ron
Ron

Reputation: 13

Jquery script in Wordpress hide/show class in viewport

Running Wordpress with jQuery. Can't seem to get this script to work.

<script>
  jQuery(document).ready(function($){
    if ($('.ADShow').is(':in-viewport')) {     
      $(".ADShow").delay(6000).slideDown(4000);
    } else { 
      $(".ADShow").hide();           
    }
  });
</script>

The class is hidden until within viewport. Then, when in viewport, a 6-second delay reveals the class div. Any help would be much appreciated.

Upvotes: 1

Views: 741

Answers (3)

Artsrun Hakobyan
Artsrun Hakobyan

Reputation: 112

try this , with animation and some extra function for determining div is in view or not 

jQuery(document).ready(function($){


  var  animated = false;
  var element = $('.ADShow');
    curHeight = element.height();// taking height of div 
    element.css('overflow','hidden');// hiding completely
    zeroHeight = element.css('height','0px') // set height to 0 for hidiing div  

  jQuery(window).scroll(function () {

 if ( isScrolledIntoView(element,true)  && animated == false) { 
     element.height(zeroHeight).delay(6000).animate({height: curHeight}, 4000); // animate

// delay  the css also 
    setTimeout(function(){
          element.css('overflow','visible'); // set back proprty to it's default value 
     },6100)//you can change value to get desirable result

     animated = true; // set to true for executing only one time 
  }  
  })


});

/*
*================ Function  for determining div is in  view or not 
*/
function isScrolledIntoView(elem, partial) {

    if (jQuery(elem).length == 0){

         return false;
    }

    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    if (typeof partial == 'undefined' || partial == false) {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    } else {
        return ((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom));
    }

}

Upvotes: 1

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

Your problem is all on the first line

jQuery(document).ready(....

Your “document” is “ready” only once, when it is fully loaded, so your script is probably working, but is only running too early.

Maybe you want to check if your element is in viewport more than once, not only when your document is loaded.

You can do this in several ways:

  • With an “Interval” you might check your element hundreds of times per second, until the event you are expecting happens.
  • With a “Scroll” event you can repeat your controls every time your page scrolls.
  • With a third party library, like Waypoints, you might call a function exactly when your element enters in viewport, and I bet that this is exactly what you are looking for.

Using Waypoints with jQuery you can write something like this:

$(document).ready(function() {
    $('.ADShow').waypoint({
        handler: function() {
            $(this).delay(6000).slideDown(4000);
        }
    });
});

Upvotes: 0

ianp
ianp

Reputation: 123

I'm not sure if is(':in-viewport') can be used like that.

Are you using a plugin like this isInViewport or jquery_viewport?

I think if you used those, then you could use: $('.ADShow:in-viewport') as the selector.

Upvotes: 0

Related Questions