Embedded Vimeo in HTML Page:

<iframe id="vi" src="https://player.vimeo.com/video/123"></iframe>

Pause:

var msg = JSON.stringify({method: "pause"}

Play:

var msg = JSON.stringify({method: "play"}

jQuery:

$("#vi")[0].contentWindow.postMessage(msg, "*")

Pure JS:

document.getElementById("vi").contentWindow.postMessage(msg, "*")

I found myself in need for swapping div elements. On the one hand, elements, which are situated next to each other (in the code), on the other hand I also wanted to swap only sub-elements of these divs. How can this be done with jQuery? Let’s start with the first case, swapping adjunct divs.

...
...
...
...
...

// get a handle on the elements
var elements = $(".elements");

// let's assume, we want to swap #e2 and #e3
var leftElement = $(elements[2]);
var rightElement = $(elements[3]);

leftElement.insertAfter(rightElement); // inserts leftElement after rightElement

insertAfter takes the object, with with the method is associated (leftElement) and inserts the object’s div after the div specified as a method argument. Here’s more on SO about it. In a previous version of the code, i mistakenly though, that it’s necessary to replace the leftElement with the right one prior to inserting…

// NG
leftElement.replaceWith(rightElement);
leftElement.insertAfter(rightElement);

This also seemed to work ok. Only later I found out, that any jQuery data() objects connected to the rightElement will get wiped when replaceWith is being called. Finally you’ll also want to do an update to the elements array, to get them in their new order:

var elements = $(".elements");

Let’s say you have a number of identical class elements:

One Title
Another Title
Brrrr
Zzzzzz

And you want to get a particular element from this list.

var myArray = $(".myClass");
var thirdElement = myArray[2];
console.log(thirdElement);
// 
Brrrr

But note, that myArray[2] is the HTML element, not an jQuery object. If you want to access it via jQuery, you’ll have to “arm” it…

var myArray = $(".myClass");
var thirdElement = $(myArray[2]);
console.log(thirdElement);
// [
Brrrr
]

Interrating over a jQuery selected list can be done with the each() function:

myArray.each(function(i, element){
	var myElement = myArray[i];
	// this
	// element
}

myElement, element and this would all hold the same value at each iteration. i is obviously the index counter. It’s also described quite clearly at the jQuery Docs, but I think it’s important enough to reiterate.

Let’s say you are having some HTML elements that should only be enabled, if the browser sports certain features. By default, the element is disabled, like in the following example:

Open File...

Next, we check in Javascript is this certain feature is supported. If it is, we replace the disabled element with an active version.

if (isSupported()) {
	$('#item').replaceWith('Open File...');
}

Which results in this:

Open File...

Simple, but effective.

Update Since jQuery 1.7 live() is marked for deprecation and should not be used any more. Use on() instead. When content is dynamically created by jQuery it is not automatically inserted into the DOM. Therefore, if you dynamically add – for example – a link, and you want to capture a click on this link, it is necessary to use the live() function.it is necessary to use the on() function.

NG. The link is added to the container, but the click function is not called.

// $('.container > a').live('click', function(e) {	// pre jQuery 1.7
$(document).on('click', '.container > a', function(e){
	// do things
	e.preventDefault();
});


OK. The link is added to the DOM, and the click function is called.

Yeah.

Of course the same also goes for appended elements:

$("#container").append('');

// ...

// $('#container canvas').live('mousedown', function (e) {
$(document).on('click', '#container canvas', function(e){	// pre jQuery 1.7
	console.log(this.id);
});


      

With jQuery document ready:

$(function(){
	var canvas = $('#testCanvas')[0];
	canvas.addEventListener('mousedown', function(e){
		e.preventDefault();
		e.stopPropagation();
		e.target.style.cursor = 'move';
	}, false);
	canvas.addEventListener('mouseup', function(e){
		e.target.style.cursor = 'default';
	}, false);
});

And without…

$('#testCanvas')[0].addEventListener('mousedown', function(e){
	e.preventDefault();
	e.stopPropagation();
	e.target.style.cursor = 'move';
}, false);

$('#testCanvas')[0].addEventListener('mouseup', function(e) {
	e.target.style.cursor = 'default';
}, false);

Based on this: http://stackoverflow.com/questions/2659999/html5-canvas-hand-cursor-problems

http://wordpress.org/support/topic/226935

The Prototype library was added to WordPress first, so the ‘$’ is set aside for all Prototype functionality. WordPress makes the coder use ‘jQuery’ in place of ‘$’. Therefore the first few lines of code should appear as: