The Dump - Code and Beyond > The cornerSlider jQuery plugin

The cornerSlider jQuery plugin

The CornerSlider is a jQuery plugin that slides content in and out the page when the user scrolls down and up the page.

Demo

Download

You can also install via npm:


    npm install cornerslider

Compliant with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 9+

# Usage

Corner slider expects an object on which it can perform its tricks.


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

Corner slider is jQuery dependent.


(function($){
$(document).ready(function () {
    $("#corner-slider").cornerSlider();
});
}(jQuery));

Corner slider is customizable.


(function($){
$(document).ready(function () {
    $("#corner-slider").cornerSlider({
        showAtScrollingHeight : 1300,
        speedEffect           : 300,
        cookieMinutesToExpiry : 1
    });
});
}(jQuery));

# How to install

Download the cornerSlider plugin.
Unzip, and see how the plugin is implemented in the attached index.html page.
Add an html element to hold the content that you want to slide in and out the page.
For example, element with id of "corner-slider".
```
<div id="corner-slider">      
  
</div>
```

Use the the following css rules that you can adjust to your needs:


#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:#efefef;
}
#corner-slider.hidden{
    display:none;
}
#corner-slider .close{
    position:absolute;
    cursor:pointer;
    font-size:16px;
    display:inline-block;
    z-index:1002;
    
    /*Change the close button position*/
    right:24px;
    top:18px;
}

Include the jQuery library before you include the plugin.
```
<script src="assets/js/jquery.min.js"></script>
```
Include the plugin file.
For example, if you extract the folder plugin straight to the root of your website:
```
<script src="assets/js/jquery.cornerslider.min.js"></script>
```

Call the plugin on the element you want to work with.


<script>
$("#corner-slider").cornerSlider();
</script>

You can customize the plugin with the setting options as specified in this page.
For example:


<script>
(function($){
$(document).ready(function () {
    $("#corner-slider").cornerSlider({
        showAtScrollingHeight : 1300,
        directionEffect       : "right",
        speedEffect           : 300,
        right                 : 20,
        bottom                : 20,
        cookieMinutesToExpiry : 15,
        // onClose               : function() {
        //  alert("The element will not appear in 15 minutes.");
        //},
    });
});
}(jQuery));
</script>

# Settings

Property	Default	Description
showAtScrollingHeight	1300	How much the user needs to scroll to show the corner slider element.
elemToPresent	"#presentSlider"	To which element the user needs to scroll to show the corner slider element. Mutual exclusive with the 'showAtScrollingHeight' property.
directionEffect	"right"	"right" - The element pops from the right most corner. "left" - The element pops from the left most corner. "bottom right" - The element pops from the bottom right most corner. "bottom center" - The element pops from the bottom center. "bottom left" - The element pops from the bottom left most corner.
bottom	6	The margin to the bottom.
left	6	The margin to the left.
right	6	The margin to the right.
speedEffect	300	The speed at which the corner slider element pops or hides.
cookieName	"cornerSliderHide"	The name of the cookie that is generated when the user chooses to close the cornerSlider element.
cookieValue	"hidden"	The value for the cookie.
cookieMinutesToExpiry	15	How much time in minutes to hide the element if the user chooses to close it. Give it a value of zero if you don't want the cookie to be generated.
cookieDomain		Needed for the plugin to work on some servers.

Callbacks

Callback	Default	Description
onShow	false	Callback that fires right before the element starts to appear.
onHide	false	Callback that fires right before the element starts to disappear.
onClose	false	Callback that fires right before the element closes when the user chooses to do so.

License

The MIT License (MIT)