Present Aspect Primarily based On Scroll Place Or Time On Web page – jQuery showElement

showElement is a jQuery plugin that gives a easy method to present a component in your webpage based mostly on the consumer’s scroll place or the period of time they’ve spent on the web page.

With the plugin, you may present a popup window (as proven under) after a sure variety of seconds, or when the consumer scrolls to a particular level on the web page. Helpful for displaying calls to motion, promotional banners, electronic mail subscription kinds, or different essential content material you need to guarantee your guests see.

As well as, it additionally makes use of browser cookies to retailer the state of the ingredient being closed by the consumer, to make sure that this ingredient doesn’t reappear on the following go to till the cookies expire.

Methods to use it:

1. To get began, obtain the plugin and embrace the jquery.showelement.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.showelement.min.js"></script>

2. Use the plugin to create a popup window that shall be displayed 5 seconds after the consumer visits this web page.

<div class="popup js-popup is-hidden">
  <div class="popup-content">
    <div class="popup-close js-close">Shut</div>
    A Pattern Popup
  </div>
</div>

/* conceal the popup on web page load */
.is-hidden {
  show: none;
}

$(doc).prepared(perform() {
  $('.js-popup').showElement({
    activation: 'time',
    timeActivation: 5000, // default: 0
  });
});

3. Show the popup window when the consumer scrolls down 50% of the physique top.

$(doc).prepared(perform() {
  $('.js-popup').showElement({
    activation: 'scroll',
    scrollPosition: 50, // default: 100
  });
});

4. Config the cookies.

$(doc).prepared(perform() {
  $('.js-popup').showElement({
    cookieName: 'showElement',
    cookieDuration: 365, // 1 yr
  });
});

5. Override the default CSS lessons.

$(doc).prepared(perform() {
  $('.js-popup').showElement({
    closeClass: 'js-close',
    hideClass: 'is-hidden', 
    showClass: 'is-visible'
  });
});

6. Occasions.

$('.js-popup').on( 'showElement', perform( occasion ) {
  // do one thing
});

$('.js-popup').on( 'hideElement', perform( occasion ) {
  // do one thing
});

This superior jQuery plugin is developed by danyeah. For extra Superior Usages, please test the demo web page or go to the official web site.