Created
October 7, 2015 12:58
-
-
Save JacobLett/f081be99694eaa0a92c7 to your computer and use it in GitHub Desktop.
Collection of snippets for jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//---- Center an element in the center of your screen. | |
$(document).ready(function() { | |
jQuery.fn.center = function () { | |
this.css("position","absolute"); | |
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); | |
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); | |
return this; | |
} | |
}); | |
//---- Clone a object | |
$(document).ready(function() { | |
var cloned = $('#id').clone(); | |
}); | |
//---- Columns of equal height | |
$(document).ready(function() { | |
function equalHeight(group) { | |
tallest = 0; | |
group.each(function() { | |
thisHeight = $(this).height(); | |
if(thisHeight > tallest) { | |
tallest = thisHeight; | |
} | |
}); | |
group.height(tallest); | |
} | |
// how to use | |
$(document).ready(function() { | |
equalHeight($(".left")); | |
equalHeight($(".right")); | |
}); | |
}); | |
//---- Count an element | |
$(document).ready(function() { | |
$("p").size(); | |
}); | |
//---- Count an element | |
$(document).ready(function() { | |
// Target Firefox 2 and above | |
if ($.browser.mozilla && $.browser.version >= "1.8" ){ | |
// do something | |
} | |
// Target Safari | |
if( $.browser.safari ){ | |
// do something | |
} | |
// Target Chrome | |
if( $.browser.chrome){ | |
// do something | |
} | |
// Target Camino | |
if( $.browser.camino){ | |
// do something | |
} | |
// Target Opera | |
if( $.browser.opera){ | |
// do something | |
} | |
// Target IE6 and below | |
if ($.browser.msie && $.browser.version <= 6 ){ | |
// do something | |
} | |
// Target anything above IE6 | |
if ($.browser.msie && $.browser.version > 6){ | |
// do something | |
} | |
}); | |
//---- Disable right click | |
$(document).ready(function(){ | |
$(document).bind("contextmenu",function(e){ | |
return false; | |
}); | |
}); | |
//---- Disappearing search field text | |
$(document).ready(function() { | |
$("input.text1").val("Enter your search text here"); | |
textFill($('input.text1')); | |
}); | |
}); | |
function textFill(input){ //input focus text function | |
var originalvalue = input.val(); | |
input.focus( function(){ | |
if( $.trim(input.val()) == originalvalue ){ input.val(''); } | |
}); | |
input.blur( function(){ | |
if( $.trim(input.val()) == '' ){ input.val(originalvalue); } | |
}); | |
} | |
//---- Font resizing | |
$(document).ready(function() { | |
// Reset the font size(back to default) | |
var originalFontSize = $('html').css('font-size'); | |
$(".resetFont").click(function(){ | |
$('html').css('font-size', originalFontSize); | |
}); | |
// Increase the font size(bigger font0 | |
$(".increaseFont").click(function(){ | |
var currentFontSize = $('html').css('font-size'); | |
var currentFontSizeNum = parseFloat(currentFontSize, 10); | |
var newFontSize = currentFontSizeNum*1.2; | |
$('html').css('font-size', newFontSize); | |
return false; | |
}); | |
// Decrease the font size(smaller font) | |
$(".decreaseFont").click(function(){ | |
var currentFontSize = $('html').css('font-size'); | |
var currentFontSizeNum = parseFloat(currentFontSize, 10); | |
var newFontSize = currentFontSizeNum*0.8; | |
$('html').css('font-size', newFontSize); | |
return false; | |
}); | |
}); | |
//---- Get the mouse cursor x and y axis | |
$(document).ready(function() { | |
$().mousemove(function(e){ | |
//display the x and y axis values inside the div with the id XY | |
$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); | |
}); | |
}); | |
//---- jQuery timer callback functions | |
$(document).ready(function() { | |
window.setTimeout(function() { | |
// do something | |
}, 1000); | |
}); | |
//---- Make the entire DIV clickable | |
$(document).ready(function() { | |
$("div").click(function(){ | |
//get the url from href attribute and launch the url | |
window.location=$(this).find("a").attr("href"); return false; | |
}); | |
}); | |
//---- Opening links in a new window | |
$(document).ready(function() { | |
//Example 1: Every link will open in a new window | |
$('a[href^="http://"]').attr("target", "_blank"); | |
//Example 2: Links with the rel="external" attribute will only open in a new window | |
$('a[@rel$='external']').click(function(){ | |
this.target = "_blank"; | |
}); | |
}); | |
//---- Remove a word | |
$(document).ready(function() { | |
var el = $('#id'); | |
el.html(el.html().replace(/word/ig, "")); | |
}); | |
//---- Replace an element | |
$(document).ready(function() { | |
$('#id').replaceWith('<div>I have been replaced</div>'); | |
}); | |
//---- Smooth(animated) page scroll | |
$(document).ready(function() { | |
$('a[href*=#]').click(function() { | |
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
&& location.hostname == this.hostname) { | |
var $target = $(this.hash); | |
$target = $target.length && $target | |
|| $('[name=' + this.hash.slice(1) +']'); | |
if ($target.length) { | |
var targetOffset = $target.offset().top; | |
$('html,body').animate({scrollTop: targetOffset}, 900); | |
return false; | |
} | |
} | |
}); | |
// how to use | |
// place this where you want to scroll to | |
//<a name="top"></a> | |
// the link | |
//<a href="#top">go to top</a> | |
}); | |
//---- Switch between classes or id’s when resizing the window. | |
$(document).ready(function() { | |
function checkWindowSize() { | |
if ( $(window).width() > 1200 ) { | |
$('body').addClass('large'); | |
} | |
else { | |
$('body').removeClass('large'); | |
} | |
} | |
$(window).resize(checkWindowSize); | |
}); | |
//---- Use Your Own Bullets | |
$(document).ready(function() { | |
$("ul").addClass("Replaced"); | |
$("ul > li").prepend("‒ "); | |
}); | |
//---- Verify if an Element is empty | |
$(document).ready(function() { | |
if ($('#id').html()) { | |
// do something | |
} | |
}); | |
//---- Verify that an element exists in jQuery | |
$(document).ready(function() { | |
if ($('#id').length) { | |
// do something | |
} | |
}); | |
//---- Write our own selector | |
$(document).ready(function() { | |
$.extend($.expr[':'], { | |
moreThen1000px: function(a) { | |
return $(a).width() > 1000; | |
} | |
}); | |
$('.box:moreThen1000px').click(function() { | |
// creating a simple js alert box | |
alert('The element that you have clicked is over 1000 pixels wide'); | |
}); | |
}); | |
//---- Parse JSON | |
var obj = jQuery.parseJSON(' | |
{"name":"Larry King", | |
"age": "5000" | |
}'); | |
alert( obj.name === "Larry King" ); //true | |
alert (obj.age === "50");//false | |
alert (obj.age === "5000"); //true | |
//---- How To Limit The Number Of Characters in a "Text-Area" field: | |
jQuery.fn.maxLength = function(max){ | |
this.each(function(){ | |
var type = this.tagName.toLowerCase(); | |
var inputType = this.type? this.type.toLowerCase() : null; | |
if(type == "input" && inputType == "text" || inputType == "password"){ | |
//Apply the standard maxLength | |
this.maxLength = max; | |
} | |
else if(type == "textarea"){ | |
this.onkeypress = function(e){ | |
var ob = e || event; | |
var keyCode = ob.keyCode; | |
var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; | |
return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); | |
}; | |
this.onkeyup = function(){ | |
if(this.value.length > max){ | |
this.value = this.value.substring(0,max); | |
} | |
}; | |
} | |
}); | |
}; | |
//Usage: | |
//$('#mytextarea').maxLength(500); | |
//--- How to test if an element is visible in jQuery | |
if($(element).is(':visible') == 'true') { //The element is Visible } | |
//---- How to Toggle All the checkboxes on a page | |
var tog = false; // or true if they are checked on load | |
$('a').click(function() { | |
$("input[type=checkbox]").attr("checked",!tog); | |
tog = !tog; | |
}); | |
//---- How to Check if Cookies Are Enabled Or Not | |
var dt = new Date(); | |
dt.setSeconds(dt.getSeconds() + 60); | |
document.cookie = "cookietest=1; expires=" + dt.toGMTString(); | |
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; | |
if(!cookiesEnabled) | |
{ | |
//cookies have not been enabled | |
} | |
//---- How to expire a Cookie | |
var date = new Date(); | |
date.setTime(date.getTime() + (x * 60 * 1000)); | |
$.cookie('example', 'foo', { expires: date }); | |
//-- Retrieve url params with jquery | |
$.urlParam = function(name){ | |
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); | |
return results[1] || 0; | |
} | |
// example.com?someparam=name&otherparam=8&id=6 | |
$.urlParam('someparam'); // name | |
$.urlParam('id'); // 6 | |
$.urlParam('notavar'); // null | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment