Javascript (and jQuery)

How to select form input elements in jQuery

jQuery can select HTML DOM elements easily. For instance, if you have a form input element you can use the jQuery selector$('input[name="username"]') to interact with the element.

jQuery Date Picker for Birthdays

jQuery datePicker that will show a proper date of birth. In this case it ends on the current year and starts 90 years prior.

$().ready(function() {
initMenus();
$('.datepicker').datepicker({
   altFormat: 'yyyy-mm-dd',
   changeMonth: true,
   changeYear: true, yearRange: new Date().getFullYear()-90 + ":" + new Date().getFullYear()
  });
});

Open PopUp Window

$("a.myPopup").open({ width: 750, height: 500, scrollbars: true });

Prompt Visitor to Save Form before leaving a page

var isDirty = false;
	var msg = 'If you leave, your information will NOT be saved.';
	
	$(document).ready(function(){
		$(':input').change(function(){
			if(!isDirty){
				isDirty = true;
			}
		});
	$(':input').change(function(){isDirty = true;});
	
	// BUT submitting the form should not prompt the warning.
	$('#adult').submit(function(){isDirty = false;});
	
	window.onbeforeunload = function(){
		if(isDirty){
			return msg;
		}
		};		
	});

Script Tag

The script tag always requires a matching close tag.

The scripting language is specified by the “type” attribute. Do not use the “language” attribute. HTML5 defaults to “text/javascript”.

XHTML files should use external script files or CDATA sections to allow special characters.

Dynamic script tag injections allow cross-site resource requests.

The “async” attribute causes a script to execute asynchronously from the rest of the page. It can also preserve order for dynamically inserted scripts.

The “defer” attribute can postpone script execution until the document is ready.

Move the script tags to the end of the body tag when possible.

Use external script files which can be cached and shared among pages.

Set Focus on First Input Field

$(':input:first').focus();

Swap Image using jQuery and CSS Class


$(function() {
 $(".hoverswap").hover(
 function () {
 $(this).attr("src", $(this).attr("src").replace(/.png/, "_over.png"));
 },
 function () {
 $(this).attr("src", $(this).attr("src").replace(/_over.png/, ".png"));
 }
 );
});

Swap a CSS Class with jQuery

$(function() {
 $('.searchButton').hover(function() {
 $(this).removeClass('searchButton');
 $(this).addClass('searchButtonOver');
 }, function() {
 $(this).removeClass('searchButtonOver');
 $(this).addClass('searchButton');
 });
});

Tilt Images with jQuery

TECHNIQUE

jQueryRotate first steps

//step02//

//code//

...

//step03//

//code//

//step04//

//code//

//step05//

//code//

$("#image2").rotate({

bind:{

mouseover : function() {

$(this).rotate(45);

mouseout : function() {

$(this).rotate(0);

}

});

//step06//

//code//

$("#image3").rotate({

bind:{

mouseover : function() {

$(this).rotate({animateTo:210})},

mouseout : function() {

$(this).rotate({animateTo:0})}

}

});

//step07//

//code//

var angleVal=0;

setInterval(function(){

angleVal+=3;

$("#image4").rotate(angleVal);

},20);

//ENDS//

Source: Web Designer Mag Issue 212 LIGHTBOX WORKSHOP _ AXEL AUBERT

Plugins

Every javascript project you should be looking into

List.js: Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

watermark.js - watermarks in the browser

selectize.js

Select 2 The jQuery replacement for select boxes

BonsaiJS - A Graphics Library

trunk8 | Rick Viscomi

Foresight-js | A js plugin to serve High Resolution images

Odometer — Transition numbers with ease

JavaScript reference

Progression.js

Clusterize.js: Display large data sets easily

Flickity

Tweezer.js Demo