/
Gists
/
jQuery
Gists - jQuery
On gists
jQuery
jQuery-plugins
CtrlEnter plugin
plugin.js #
$.fn.ctrlEnter = function (btns, fn) {
var thiz = $(this);
btns = $(btns);
function performAction (e) {
fn.call(thiz, e);
}
thiz.bind("keydown", function (e) {
if (e.keyCode === 13 && e.ctrlKey) {
performAction(e);
e.preventDefault();
}
});
btns.bind("click", performAction);
}
$("#msg").ctrlEnter("button", function () {
$("<p></p>").append(this.val().replace(/\n/g, "<br />")).prependTo(document.body);
this.val("");
});
On gists
JavaScript
jQuery
jQuery-plugins
Jquery tiny slider - binding via events
slider.js #
(function($) {
$.fn.slideshow = function(options) {
return this.each(function() {
var $img = $(this),
current = 0;
function show(index) {
var total = options.images.length;
while(index < 0)
{
index += total;
}
while(index >= total)
{
index -= total;
}
current = index;
$img.attr('src', options.images[index]);
}
function prev() {
show(current - 1);
}
function next() {
show(current + 1);
}
$img.bind('prev', prev)
.bind('next', next)
.bind('goto',function(e, index) {
show( index );
});
});
};
})(jQuery);
On gists
jQuery
jQuery-plugins
Styleswitcher
styleswitcher.js #
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$('body').append('<div id="overlay" />');
$('body').css({height:'100%'});
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(img/loading.gif) no-repeat center'
})
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
$('#stylesheet').attr('href','css/' + data + '.css');
cssDummy.check(function(){
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
On gists
Plugin patterns
jQuery
jQuery-plugins
jQuery plugin pattern
pattern.js #
;(function($) {
var privateFunction = function () {
//do something
}
var methods = {
init : function( options ) {
var defaults = {
center: {
lat: -36.8442,
lng: 174.7676
}
};
var t = $.extend(true, defaults, options);
return this.each(function () {
var $this = $(this),
data = $this.data('myMapPlugin');
if ( !data ) {
var map = new google.maps.Map(this, {
zoom: 8,
center: new google.maps.LatLng(t['center'][lat], t['center']['lng']),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:{
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
}
});
var geocoder = new google.maps.Geocoder();
var $form = $('form', $this.parent());
var form = $form.get(0);
var $search = $('input[data-type=search]', $form);
$form.submit(function () {
$this.myMapPlugin('search', $search.val());
return false;
});
google.maps.event.addListener(map, 'idle', function () {
// do something
});
$this.data('myMapPlugin', {
'target': $this,
'map': map,
'form':form,
'geocoder':geocoder
});
}
});
},
resize : function ( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('myMapPlugin');
google.maps.event.trigger(data.map, 'resize');
});
},
search : function ( searchString ) {
return this.each(function () {
// do something with geocoder
});
},
update : function ( content ) {
// ToDo
},
destroy : function ( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('myMapPlugin');
$(window).unbind('.locationmap');
data.locationmap.remove();
$this.removeData('locationmap');
});
}
};
$.fn.myMapPlugin = function (method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.myMapPlugin' );
}
};
})(jQuery);
On gists
jQuery
jQuery-plugins
Vymazání formulářových prvků / Reset form fields
reset.js #
function formFieldCleaner(formObject) {
$(":input", formObject).not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").removeAttr("selected");
}
formFieldCleaner("#odesilaciFormular");
On gists
jQuery
jQuery-plugins
Obalit každý prvek / Wrap element with other
wrap.js #
(function($){ $.fn.wrapMatch = function(count, className) { var length = this.length; for(var i = 0; i '); } return this; }; })(jQuery);
$('.list-parent li').wrapMatch(5,'newclass');
On gists
JavaScript
jQuery
Slick slider with thumbs
example.js #
// https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js
// //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
On gists
jQuery
JS Bin Rating panel via CSS 3 & jQuery // source http://jsbin.com/denukot
jsbin.denukot.js #
$('#wrapper div').mouseover(function(){
$(this).children('span').addClass('active');
$(this).prevAll().children('span').addClass('active')
});
$('#wrapper div').mouseout(function(){
$(this).prevAll().children('span').removeClass('active')
$(this).children('span').removeClass('active');
});
On gists
jQuery
Multiple animation with one finish callback
demo.js #
$(document).ready(function () {
animate([$('#one'), $('#two'), $('#three')], finished);
});
function finished() {
$('body').append('Finished');
}
function animate(list, callback) {
if (list.length === 0) {
callback();
return;
}
$el = list.shift();
$el.animate({left: '+=200'}, 1000, function () {
animate(list, callback);
});
}