$("img").attr("src", "http://cdn.css-tricks.com/images/banner.jpg");$("div").attr("id", function (arr) {
return "div-id" + arr;
})$("img").attr({
src: "http://cdn.css-tricks.com/images/banner.jpg",
title: "banner",
alt: "banner"
});var $source = $("img").attr("src");
window.load can fire super duper fast if the page is cached. If you want to use that event but make sure a minimum amount of time has passed until it does...
(function fn() {
fn.now = +new Date;
$(window).load(function() {
if (+new Date - fn.now < 500) setTimeout(fn, 500);
// Do something
});
})();
This snippet presupposed an HTML form with and ID of "age-form" and three inputs (text or select) with the IDs "day", "month", and "year" respectively.
$("#age-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;
});You may wish to do something more elegant than an alert, and should also probably validate the form with server side code or else this protection only works for users with JavaScript enabled.
There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans. Here's jQuery to do that to h1 elements.
$('h1').each(function() {
var words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < words.length; i++) {
if (i == 0) {
$(this).append('<span>' + words[i] + '</span>');
} else {
$(this).append(' <span>' + words[i] + '</span>');
}
}
});
});Then you could do:
h1 span {
text-decoration: underline;
}Similar and slightly more robust solution: Lettering.js
$.event.special.tripleclick = {
setup: function(data, namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.bind('click', jQuery.event.special.tripleclick.handler);
},
teardown: function(namespaces) {
var elem = this, $elem = jQuery(elem);
$elem.unbind('click', jQuery.event.special.tripleclick.handler)
},
handler: function(event) {
var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
clicks += 1;
if ( clicks === 3 ) {
clicks = 0;
// set event type to "tripleclick"
event.type = "tripleclick";
// let jQuery handle the triggering of "tripleclick" event handlers
jQuery.event.handle.apply(this, arguments)
}
$elem.data('clicks', clicks);
}
};$("#whatever").bind("tripleclick", function() {
// do something
}
Labels should have "for" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector to trigger a click on the input itself. Assuming of course you have some reason to watch for clicks on inputs.
var labelID;
$('label').click(function() {
labelID = $(this).attr('for');
$('#'+labelID).trigger('click');
});
Sparkbox has this snippet to help figure out how often browser windows really are resized.
(function() {
var resizeTimer;
// Assuming we have jQuery present
$( window ).on( "resize", function() {
// Use resizeTimer to throttle the resize handler
clearTimeout( resizeTimer );
resizeTimer = setTimeout(function() {
/* Send the event to Google Analytics
*
* https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking
* _trackEvent(category, action, opt_label, opt_value, opt_noninteraction)
*/
var $window = $( window );
_gaq.push( [ "_trackEvent", "User Actions", "Browser Resize", $window.width() + " x " + $window.height() ] );
}, 1000);
});
})();Note how easy it is to track events in Google Analytics. That can be used for just about anything.