50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
"use strict";
|
|
//Plugin for adding CSS classes depending from element width
|
|
//adding CSS classes for elements that needs different styles depending on they widht
|
|
(function ( $ ) {
|
|
|
|
$.fn.addWidthClass = function( options ) {
|
|
|
|
// Default options.
|
|
var settings = $.extend({
|
|
breakpoints: [200,400,600,1000,1200]
|
|
}, options );
|
|
|
|
//string which contains all of the possible CSS classes (needs for remove classes on windows resizing)
|
|
var availableClassesString = '';
|
|
for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
|
|
availableClassesString += " " + "width-lt-" + settings.breakpoints[i] + " " + "width-gt-" + settings.breakpoints[i];
|
|
};
|
|
|
|
return this.each(function(){
|
|
var $this = jQuery(this);
|
|
var newClassesString = '';
|
|
for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
|
|
if( $this.width() <= settings.breakpoints[i] ) {
|
|
newClassesString += ' width-lt-' + settings.breakpoints[i]
|
|
|
|
} else {
|
|
newClassesString += ' width-gt-' + settings.breakpoints[i]
|
|
}
|
|
};
|
|
$this.addClass(newClassesString);
|
|
|
|
//processing window resize event
|
|
jQuery(window).on('resize', function(){
|
|
//removing all classes
|
|
newClassesString = '';
|
|
$this.removeClass(availableClassesString);
|
|
|
|
for (var i = settings.breakpoints.length - 1; i >= 0; i--) {
|
|
if( $this.width() <= settings.breakpoints[i] ) {
|
|
newClassesString += ' width-lt-' + settings.breakpoints[i]
|
|
|
|
} else {
|
|
newClassesString += ' width-gt-' + settings.breakpoints[i]
|
|
}
|
|
};
|
|
$this.addClass(newClassesString);
|
|
});
|
|
});
|
|
};
|
|
}( jQuery ));
|