From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
$(document).ready(function() { 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 are not enabled } });
var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; });
$("ul > li").click(function () { var index = $(this).prevAll().length; });
$("#lda-form").submit(function(){ var day = $("#day").val(); var month = $("#month").val(); var year = $("#year").val(); var age = 18; var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); if ((currdate - mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; });
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
if($(element).is(":visible")) { //The element is Visible }
<div id="foo"> <div id="bar"></div> <div id="baz"> <div id="biz"> </div> <span><span> </div> //jQuery code to count child elements $("#foo > div").length
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; } //Use the above function as: $(element).center();
$().ready(function() { $('#add').click(function() { !$('#select1 option:selected').appendTo('#select2'); }); $('#remove').click(function() { !$('#select2 option:selected').appendTo('#select1'); }); });
$(document).ready(function(){ $("#checkboxall").change(function(){ var checked_status = this.checked; $("input[name=checkall]").attr("checked", checked_status); }); });
$(document).ready(function() { var pathname = window.location.pathname; });
$(function() { $(document).keypress(function(e){ switch(e.which){ // "ENTER" case 13: alert('enter pressed'); break; // "s" case 115: alert('s pressed'); break; (...) } }); });
Pingback: Some Useful JavaScript & jQuery Snippets | Codrops
Check if cookies are enabled:
$.cookies.test()
(and a bunch more cookie goodness at http://plugins.jquery.com/project/cookies )
Looking at that keypress function reminds me of a jQuery event plugin I wrote called “Keystrokes” – it detects key combos like “shift+ctrl+p” etc:
http://boedesign.com/blog/2009/12/30/keystrokes-for-jquery/
Nice snippet for the element index, I always used a each() for that.
Thanks. 🙂
Pingback: Some Useful JavaScript & jQuery Snippets – Part 2 | Codrops « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: Some Useful JavaScript & jQuery Snippets – Part 2 | Codrops : Popular Links : eConsultant
As far as I know – some of those can be optimized (use .length instead of size(), referencing variables when used twice, etc). Otherwise – nice scripts indeed. Just a sidenote – with the upcoming 1.4 jQuery (due 14th of January) getting the index will be easier: $(“ul > li”).index();
Kindest regards,
Ivan
sigh…
To select checkboxes, use the :checkbox pseudoselector instead of the type attr. To toggle checkboxes, you need to use attr(“checked”,”checked”) and removeAttr(“checked”);
.is() returns a boolean. You can just do if ($(foo).is(“:checked”)). Comparison at all is unnecessary, much less comparing it to the string “true.”
There is no reason for the return statement in the moving select options example.
The correct event to use for checkboxes is the change event, not the click event, as shown in the select all checkboxes example. Also, to check all the checkboxes, use $(“input[name=checkall]”).attr(“checked”,”checked”); The @ in attribute selectors was deprecated in jQuery 1.3, and there is no need for an .each() in that circumstance.
Also, as Ivan mentions above, .length instead of .size() and storing references to queries should be included in these snippets.
These may seem like nitpicks but when posts like this include wrong information or practises they are passed along and duplicated by more and more people.
Thank you all for the corrections. I have updated it already!
Greetings
Very handy.
Thank you for sharing
Pingback: Some Useful JavaScript & jQuery Snippets - Part 2 | Codrops Blog
Cody, thanks for the updates, It’s great to make sure the snippets that get distributed follow best practices. 🙂
You still got a
if($(element).is(“:visible”) == “true”) {
which would be fine to leave as:
if($(element).is(“:visible”)) {
cheers.
Updated! Thanks
Pingback: Some Useful JavaScript & jQuery Snippets - Part 3 | Codrops
if($(element).is(“:visible”)) {
this doesn’t take visibility of element’s parents into account. something like this might lead to the expected behaviour:
if($(element).is(“:visible”) && $(element).parents().not(‘:visible’).length == 0) {…
Pingback: Snippets de Javascript y jQuery para ahorrar tiempo (Parte 2) - elWebmaster.com
Fantastic list, keep it up…
always good keeping a good snippet library. 🙂
Pingback: links for 2010-01-17 « Web????????? Web??????????? S5-Style
Nice snippet for the element index, I always used a each() for that.that have working capability
Thanks. 🙂
Nice snippet for the element index
thank you very much for code.
Nice to extract the index of the item, I always used one each () to do so. Thank you. 🙂
I know you really like to use jQuery for everything but sometimes the simplest solution is the best solution…
navigator.cookieEnabled
The cookieEnabled property is supported in all major browsers.
http://www.w3schools.com/jsref/prop_nav_cookieenabled.asp
Just a sidenote – with the upcoming 1.4 jQuery (due 14th of January) getting the index will be easier: $(“ul > li”).index();
if($(element).is(“:visible”)) {
this doesn’t take visibility of element’s parents into account. something like this might lead to the expected behaviour:
if($(element).is(“:visible”) && $(element).parents().not(‘:visible’).length == 0) {…
thank you very much good explain
nice tutorial Mr.Cody, thanks for the sharing 🙂
Cody great share. this will work perfectly with a few projects I’m working on