jQuery Plugin For Corner Popup While Scrolling - cornerSlider

jQuery Plugin For Corner Popup While Scrolling - cornerSlider
File Size: 46.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

cornerSlider is a jQuery plugin for creating a corner popup window that slides out or in from the edge of the web page while scroll down or up. You can place Ads or recommended posts of your website into the corner popup that appears or disappears as the user scrolls down / up the web page.

How to use it:

1. Load the latest jQuery library and the jQuery cornerSlider.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.cornerslider.js"></script>

2. Place your corner slider content into the container 'corner-slider'.

<div id="corner-slider">      
  <!--Your corner slider content goes here.-->  
</div>

3. Style the corner slider in the CSS.

#corner-slider {
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  /*Change to your own dimensions*/
  height: 119px;
  width: 269px;
  /*Change to your own colors*/
  border: 1px solid #b3b3b3;
  background: #34BC9D;
}

#corner-slider.hidden { display: none; }

#corner-slider .close {
  position: absolute;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  z-index: 1002;
  /*Change here the close button position*/
  right: 24px;
  top: 18px;
  color: #fff;
}

4. Call the plugin and setup the corner slider.

$("#corner-slider").cornerSlider({

// where to show
showAtScrollingHeight : 1300,
elemToPresent         : "#presentSlider",

// effect
directionEffect       : "right",
speedEffect           : 300,

// margin
bottom                : 6,
right                 : 6,
left                  : 6,
top                   : 6,

// the 'cornerSliderHide' cookie is generated
// when a user chooses to close the slider 
cookieName            : 'cornerSliderHide',
cookieValue           : 'hidden',
cookieDomain          : '',
cookieMinutesToExpiry : 15,


// callback functions that the user can use.
onShow  : function(){},
onHide  : function(){},
onClose : function(){},

});

Change log:

2015-03-28

  • option for domain name in the cookie

This awesome jQuery plugin is developed by reshetech. For more Advanced Usages, please check the demo page or visit the official website.