/
Gists
/
jQuery-plugins
Gists - jQuery-plugins
On gists
jQuery
jQuery-plugins
Modal object with private functions
modal.js #
function feedbackModalFn(selector){
//var feedbackModal = $('.feedback-modal');
var feedbackModal = $(selector);
var winH;
var topPane;
var feedbackModalHeight;
// private scope
function init()
{
winH = $(window).height();
//topPane = $('.top-pane').height();
topPane = 0;
feedbackModalHeight = winH - topPane;
feedbackModal.height(feedbackModalHeight);
}
// private scope
function show()
{
init();
feedbackModal.animate({
bottom: 0
}, 600);
}
// private scope
function hide()
{
init();
feedbackModal.animate({
bottom: "-" + feedbackModalHeight
}, 600);
}
return {
'init': init,
'show': show,
'hide': hide
};
}
On gists
Jquery - řazení tabulky - tablesorter demo - https://jsfiddle.net/bmfz1pau/
•
jQuery
Helpers-Filters-Plugins
jQuery-plugins
tablesortersimple.js #
$(document).ready(function() {
$('th').each(function(col) {
$(this).hover(
function() {
$(this).addClass('focus');
},
function() {
$(this).removeClass('focus');
}
);
$(this).click(function() {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function(a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function(index, row) {
$('tbody').append(row);
});
});
});
});
On gists
jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery.
•
jQuery
jQuery-plugins
jquery.ba-tinypubsub.min.js #
/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
* http://benalman.com/
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function(a){var b=a({});a.subscribe=function(){b.on.apply(b,arguments)},a.unsubscribe=function(){b.off.apply(b,arguments)},a.publish=function(){b.trigger.apply(b,arguments)}})(jQuery)
On gists
jQuery
jQuery-plugins
From https://www.sitepoint.com/introduction-jquery-deferred-objects/
deferred-timeout.js #
function timeout(milliseconds) {
// Create a new Deferred object
var deferred = $.Deferred();
// Resolve the Deferred after the amount of time specified by milliseconds
setTimeout(deferred.resolve, milliseconds);
// Return the Deferred's Promise object
return deferred.promise();
}
timeout(1000).then(function() {
console.log('I waited for 1 second!');
});
On gists
jQuery
jQuery-plugins
jQuery e-mail plugin validation
jquery-email-validation.js #
(function ($) {
$.fn.validateEmail = function () {
return this.each(function () {
var $this = $(this);
$this.change(function () {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if ($this.val() == "") {
$this.removeClass("badEmail").removeClass("goodEmail")
}else if(reg.test($this.val()) == false) {
$this.removeClass("goodEmail");
$this.addClass("badEmail");
}else{
$this.removeClass("badEmail");
$this.addClass("goodEmail");
}
});
});
};
})(jQuery);
On gists
jQuery
jQuery-plugins
jQuery - own methods
jquery-own-methods.js #
$(function(){
jQuery.fn.putBefore = function(dest){
return this.each(function(){
$(dest).before($(this));
});
}
jQuery.fn.putAfter = function(dest){
return this.each(function(){
$(dest).after($(this));
});
}
});
On gists
jquery simple plugins
•
jQuery-plugins
simplejquery-plugins.js #
(function( $ ){
$.nette.init();
// simple function
$.extend( {
swapArticleMaskClasses: function(obj, classAttr)
{
if (obj.hasClass(classAttr))
{
obj.removeClass(classAttr).addClass(classAttr + '--');
}
},
swapArticleMaskClassesRevert: function(obj, classAttr)
{
if (obj.hasClass(classAttr + '--'))
{
obj.removeClass(classAttr + '--').addClass(classAttr);
}
},
exists: function(selector) {
return ($(selector).length > 0);
}
});
// jqury fn
$.fn.extend({
swapClass: function(class1, class2) {
return this.each(function() {
var $element = $(this);
if ($element.hasClass(class1)) {
$element.removeClass(class1).addClass(class2);
}
else if ($element.hasClass(class2)) {
$element.removeClass(class2).addClass(class1);
}
});
},
// simplier way if ( $('#myDiv')[0] ) ;)
exists: function() {
return ($(this).length > 0);
},
hasParent: function(a) {
return this.filter(function() {
return !!$(this).closest(a).length;
});
}
});
})( jQuery );
On gists
Custom grid
•
jQuery-plugins
SassMeister-rendered.html #
<div class="container">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">
<div>3.1</div>
<div>3.1</div>
<div>3.1</div>
</div>
</div>
On gists
js-object-examples.js
•
JavaScript-OOP
jQuery-plugins
js-object-hamburger.js #
/* Mobile version, MENU
---------------------------------------------------------------------------------------------------- */
var hamburger = {
init: function(el) {
this.elements = {};
this.elements.el = $(el);
this.elements.header = $('#header-mobile');
this.elements.closeButton = $('.hamburger-close');
},
open: function(e) {
this.elements.header.fadeIn();
e.preventDefault();
},
close: function(e) {
this.elements.header.fadeOut();
e.preventDefault();
},
getElement: function(el)
{
return this.elements[el];
}
};
// init
hamburger.init('.hamburger');
// open
hamburger.getElement('el').click(function(e){
hamburger.open(e);
$('#bg-overlay').show();
});
// close
hamburger.getElement('closeButton').click(function(e){
hamburger.close(e);
$('#bg-overlay').hide();
});
$(document).click(function(e){
var $hamburgerLink = $('a.hamburger .icon-11');
var $mobileNav = $('.navigation--mobile');
if ($hamburgerLink.is(e.target))
{
// nic
}
else if (!$mobileNav.is(e.target)
&& $mobileNav.has(e.target).length === 0)
{
if ($('#bg-overlay').is(':visible') && $('#header-mobile').is(':visible'))
{
$('#bg-overlay').hide();
hamburger.close(e);
}
}
});
On gists
Easy Modal by JacklMoore
•
jQuery
jQuery-plugins
Easy Modal.html #
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>jQuery Modal Demo</title>
<style>
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.empty().append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay, $modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$.get('ajax.html', function(data){
modal.open({content: data});
});
$('a#howdy').click(function(e){
modal.open({content: "Hows it going?"});
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='howdy' href='#'>Howdy</a>
</body>
</html>