fa-screensizeobserver
v0.4.4
Published
Observes window size
Downloads
3
Maintainers
Readme
fa-screensizeobserver
Observes screen size
###Usage
####"Normal" way
Script needs jquery to work (for now). Before your closing <body>
tag add:
<script src="path/to/jquery/jquery.js"></script>
<script src="path/to/fa-screensizeobserver/fa-screensizeobserver.js"></script>
where path/to/jquery
is location of your jquery
script and path/to/fa-screensizeobserver
is location of your fa-screensizeobserver
script.
####NPM Install
npm install fa-screensizeobserver --save
####Browserify
var ScreenSizeObserver = require('fa-screensizeobserver'); //returns class
Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
sizes | array of objects | [{ maxWidth : 767 , className : 'size-xs' }, { maxWidth : 991 , className : 'size-sm' }, { maxWidth : 1199, className : 'size-md' }, { className : 'size-lg' }]
| Define possible sizes. Each size must have maxWidth and className. Last size requires only className. You can also define onSizeEnter and onSizeLeave events for each size.
$element | jquery element | $(document.documentElement)
| Current className is going to be added to $element class attribute.
####Example:
var settings = {
$element: $(document.body),
sizes: [
{
className:'size-sm',
maxWidth:1000,
}, {
className:'size-lg',
},
]
};
var SSO = new ScreenSizeObserver(settings);
Events
Event | Params | Description ----- | ------ | ----------- onInit | data | Fires after object was initialized onSizeChanged | data | Fires after size was changed
####Example:
var settings = {
onSizeChanged : function(e) {
console.log('Current class: ' + e.className);
},
onInit : function(){
console.log('Initialized');
},
};
var SSO = new ScreenSizeObserver(settings);
//you can also do this
SSO.onSizeChanged(function(e){
console.log("Data: " + e);
});
SSO.onInit(function(e){
console.log("Initialized");
});
Specific Size Related Events
Event | Params | Description ----- | ------ | ----------- onSizeEnter | data | Fires when specific size is entered. onSizeLeave | data | Fires when specific size is left.
Example:
var settings = {
sizes: [
{
className:'size-sm',
maxWidth:1000,
onSizeEnter: function(e) {
console.log("Entering: " + e.className);
},
onSizeLeave: function(e) {
console.log("Leaving: " + e.oldClassName);
}
}, {
className:'size-lg'
},
]
};
var SSO = new ScreenSizeObserver(settings);
Methods
Method | Args | Returns | Description ------ | ---- | ------- | ----------- getSize | size: int or string | object | Gets size by index (int) or class name (string) getSizeIndexByWidth | width: int | int | Get size index by width (should be in px)
Example:
var size0 = SSO.getSize(0); //gets size by index
var sizesm = SSO.getSize('size-sm'); //gets size by class name
var sizeIndex = SSO.getSizeIndexByWidth(780); //gets size index by width (in pixels)
###Dependencies
jQuery
###License
Copyright (c) 2016 Aleksander Fras
Licensed under the MIT license.