I was recently looking at popular development site and found the following snippet:

jQuery("#subscribe-main li:nth-child(4)")....

This snippet found the desired elements in 1ms according to FireBug’s console.  A millisecond is lightning fast, but if you slightly change the selector code, you get a faster result:

jQuery("li:nth-child(4)", "#subscribe-main");

// Could use this as well
// jQuery("#subscribe-main").find("li:nth-child(4)")....

The selection code above returns the same elements in 0ms.  A millisecond difference is negligible in one instance, but in a large application, these milliseconds will add up!

This post simply acts a a reminder that selector composition is important.  Here’s a task for you:  go to the sites you’ve written the JavaScript selectors for and compare your selectors like I have above.  If you aren’t familiar with basic selector time testing via the console, here’s how you do it:

console.time("someKey");
jQuery("#mySelector .more .stuff")...
console.timeEnd("someKey");

The console doesn’t do better than millisecond precision, but a different result at that precision gets you started in selector enhancement.  Happy selector revising!

Selector Engines: Right to Left is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

All that’s required is a parent element with which we’d like to listen to node insertions within:

<ul id="parentElement"></ul>

You can use any selector helper you’d like, but I’ve chosen an ID here.

The CSS

In order to get a handle on node insertion detection, we need to set up a series of keyframe animations which will start when the node is inserted. The clip property is used since it has no effect on the node itself:

/* set up the keyframes */
@keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }  
}

@-moz-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-webkit-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-ms-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-o-keyframes nodeInserted {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

With the keyframes created, the animation needs to be applied on the elements you’d like to listen for. Note the tiny duration; that relaxes the animation footprint on the browser.

#parentElement > li {
    animation-duration: 0.001s;
    -o-animation-duration: 0.001s;
    -ms-animation-duration: 0.001s;
    -moz-animation-duration: 0.001s;
    -webkit-animation-duration: 0.001s;
    animation-name: nodeInserted;
    -o-animation-name: nodeInserted;
    -ms-animation-name: nodeInserted;        
    -moz-animation-name: nodeInserted;
    -webkit-animation-name: nodeInserted;
}

Add the animation to the child nodes you are listening for. When the animation ends, the insertion event will fire!

The JavaScript

The first step is creating an function which will act as the event listener callback. Within the function, an initial event.animationName check must be made to ensure it’s the animation name we want to listen for in this specific case:

var insertListener = function(event){
	if (event.animationName == "nodeInserted") {
		// This is the debug for knowing our listener worked!
		// event.target is the new node!
		console.warn("Another node has been inserted! ", event, event.target);
	}
}

If the animation name matches the desired animation, we know a DOM node has been injected. Now it’s time to add the event listener to the parent:

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

How awesomely simple is that?!

Daniel created this solution to aid in his forthcoming web components initiative, an initiative I’ll be covering more in depth very soon. This node insertion hack is useful and uses no framework, so it’s an incredible mechanism that can be used by anyone. Well done to Daniel!

Detect DOM Node Insertions with JavaScript and CSS Animations is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The CSS

The syntax for creating these animations and transitions is the same between media queries as it is between element states; the only difference is actually enacting them between the media queries:

/* base state */
#layout { 
	position: relative; 
	width: 900px; 
	border: 1px solid #ccc; 
	height: 200px; 
	
	/* animate width over a given duration */
	-webkit-transition: width 2s;
	-moz-transition: width 2s;
	-ms-transition: width 2s;
}
.child {
	top: 0; 
	bottom: 0;
	width: 290px;
	position: absolute;
	opacity: 1;
	font-size: 20px;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	
	/* animate opacity, left, width over a given duration */
	-webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-moz-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-ms-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
	#child1 { left: 0; background: lightblue; }
	#child2 { left: 300px; background: lightgreen; }
	#child3 { left: 600px; background: lightyellow; }

/* 
	When the client has 860 width or less:
	 	- animate the first two elements to be wider
		- fade out and hide the third element
		- animate the background colors
		- animate the font-size of the block
*/
@media screen and (max-width: 860px) {
	#layout { width: 600px; }
	.child { width: 290px; font-size: 12px; }
	#child1 { left: 0; background: blue; color: #fff; }
	#child2 { left: 300px; background: green; color: #fff; }
	#child3.child { /* hider */ opacity: 0; width: 0; }
}

The creativity is all in the developer’s hands; animating media queries isn’t difficult, but the use of them is more interesting. Some sites used to animate the position of structure elements during window resize, which is nice but how often is that a realistic usage? A more realistic usage is with mobile devices, animating elements when orientation changes:

/* base mobile styles */
#sidebar {
	-webkit-transition: opacity 2s;
	width: 300px;
	overflow: hidden;
}

/* portrait */
@media screen and (orientation:portrait) { 
	/* portrait-specific styles */ 
	#sidebar {
		opacity: 0;
		width: 0;
	}
}

/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	#sidebar {
		opacity: 1;
	}
}

The animation above triggers when the device goes from portrait to landscape, and visa versa. This is incredibly useful when hiding a pane in portrait view and elegantly showing that pane when the user switches to landscape view.

CSS animations between media queries have traditionally been a delicacy of web design, but there are practical uses. The best part of them? There is no JavaScript involved and you can force CSS hardware acceleration if you’d like. Take a few moments to look at your mobile site to see if you can add this effect.

CSS Animations Between Media Queries is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The CSS

Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;
						
	background-position: 0 0,
						 30px 70px,
						 right top;
	
	width: 400px; 
	height: 400px;
	border: 1px solid #ccc;
}

Trying to stuff all properties via shorthand within the background property wont work, unfortunately; multiple property declarations must be used. All of the background properties may be used (background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size), as well as CSS gradients.

Another awesome CSS feature that we can finally used. Using multiple CSS backgrounds is an incredible useful tool, preventing the need for nested elements for the sole purpose of formatting.

Multiple Backgrounds with CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

As you could probably guess, this task is best accomplished with regular expressions:

function camelize(str) {
	return (str + "").replace(/-\D/g, function(match) {
		return match.charAt(1).toUpperCase();
	});
}
camelize("border-bottom-color"); // "borderBottomColor"


function hyphenate(str) {
	return (str + "").replace(/[A-Z]/g, function(match) {
		return "-" + match.toLowerCase();
	});
}
hyphenate("borderBottomColor"); // "border-bottom-color"

A couple of really handy JavaScript String to corresponding String format functions. Instead of expecting strings in only one format, your mini library can now accept both!

JavaScript CSS Helpers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Google Chrome & Canary

The repaint feature needs to be enabled at startup for Chrome and Canary with the --show-paint-rects config:

open ./Google\ Chrome\ Canary.app --args --show-paint-rects

Be sure to include --args in your command or you’ll run into problems opening the browser. Repaints will display on each site you visit.

Mozilla Firefox, Aurora, Nightly

To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is nglayout.debug.paint_flashing. Turn this option to true and you’ll quickly see repaints as the happen!

At the time of publish, only nightly exposed this config feature.

I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!

View Browser Repaints in Google Chrome and Mozilla Firefox is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

In fairness to XStyle, it’s more than just an AMD plugin for loading stylesheets. XStyle provides the capability to:

• Shim and extend CSS
• Load stylesheets and execute callbacks
• Nested @import loading

Shimming and extending CSS is great but doesn’t seem to be something I would need often; loading CSS with JavaScript modules is nice because:

1. Loading modules and templates together but needing to add LINK tags manually sucks
2. One define() to define a complete widget from JS, to template, and CSS, is ideal; especially for third party components

So consider a great JavaScript loader like curl.js. With curl.js, all you need to do to load a CSS file is:

curl(["css!path/to/file.css"], function() {
    // defineCSS loaded, do stuff!
});

Sweet, right? With a different loader, you can load your CSS files with other modules by coding:

define(["xstyle!./path/to/file.css"], function(){
    // module starts after css is loaded
});

Outstanding! With XStyle we can define a complete component, stylesheet and all!

XStyle is capable of much more than what I’ve presented above, but just the ability to load stylesheets with every other piece of a given module is priceless. Improves organization and speed of coding; well done Kris!

Load CSS Files via AMD with XStyle is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Base HTML and CSS

I’m using minimal elements within this code since, theoretically, there would be many of these on a given page and large DOM trees can drastically effect page performance:

<div class="item">
	<a href="/angry-birds">
		<div class="item-billboard">
			<img src="angrybirds.jpg" />
			<h3>Angry Birds</h3>
		</div>
		<div class="item-detail">
			<p>There's more detail about the item inside this DIV!</p>
		</div>
	</a>
</div>

Remember that HTML5 says we can wrap block-level elements with A tags, so don’t hate on me!

There’s a fair amount of base CSS we need too:

.item {
	position: relative;
	width: 240px;
	overflow: hidden;
	border: 1px solid #ccc;
}
	.item {
		height: 200px;
	}
	
	.item a {
		text-decoration: none;
		color: #000;
	}
	
	.item-billboard, .item-detail {
		padding: 10px;
		height: 180px;
	}
	
	.item-billboard {
		margin-top: 0;
		background: #fff;
	}
		.item-billboard h3 {
			font-size: 13px;
			font-weight: bold;
			color: #262626;
			font-family: "Open Sans", arial, sans-serif;
		}
	
	.item-detail {
		background: #ececec;
	}

The only restriction with the CSS above is that we’re explicitly setting a lesser height for the billboard and detail blocks because we’re adding padding to them. We could use the full 200px height of the parent for each of those blocks, and wrap the content for each in an additional DIV, allowing for animating margin-top to 100%, but that would add 2 extra nodes per block.

The CSS-Only Method

Much like my Google Photo Stack post, the CSS-only version gets us 90% there. Browser-powered CSS animations give us the ability to animate to the second pane…

.item-billboard {
	margin-top: 0;
	background: #fff;
	
	/* add animations! */
	-webkit-transition-property: margin-top;
	-webkit-transition-duration: .5s;
	
	-moz-transition-property: margin-top;
	-moz-transition-duration: .5s;
	
	-o-transition-property: margin-top;
	-o-transition-duration: .5s;
	
	-ms-transition-property: margin-top;
	-ms-transition-duration: .5s;
}

/* animate on hover */
.itemCss:hover .item-billboard {
	margin-top: -200px;
}

Since the CSS transition settings are on the .billboard elements, the margin will animate both on hover and then back to its original state during mouseleave. Unfortunately you’re out of luck if the client doesn’t support CSS transitions. That’s where we can use MooTools or jQuery to make it happen!

The jQuery and MooTools JavaScript

Overriding the CSS animation with a bit of JavaScript will allow the same animation in older browsers. We can jQuery or MooTools to make that happen:

// MooTools
window.addEvent("domready", function() {
	$$(".itemJs").addEvents({
		mouseenter: function() {
			var billboard = this.retrieve("billboardElement");
			if(!billboard) {
				billboard = this.getElements(".item-billboard")[0];
				this.store("billboardElement", billboard);
			}
			billboard.tween("margin-top", "-200px");
		},
		mouseleave: function() {
			this.retrieve("billboardElement").tween("margin-top", 0);
		}
	});
});

// jQuery
jQuery(document).ready(function() {
	jQuery(".itemJQuery").bind({
		mouseenter: function() {
			var self = jQuery(this), billboard = self.data("billboardElement");
			if(!billboard) {
				billboard = jQuery(jQuery(".item-billboard", this)[0]);
				self.data("billboardElement", billboard);
			}
			jQuery(billboard).stop().animate({
				"margin-top": "-200px"
			});
		},
		mouseleave: function() {
			jQuery(this).data("billboardElement").stop().animate({
				"margin-top": 0
			});
		}
	});
});

In each case, we lazy-find billboard elements when they’re hovered over and animate them just as the CSS does. Simple!

I love the design of these blocks by Google. They provide a beautiful default view and allow for more detail when the user shows interest. I can see this strategy and effect being useful in many situations, as behind it is brilliant. A business that sells records could use the same sort of effect, for example. Well done to Google!

Google Extension Effect with CSS or jQuery or MooTools JavaScript is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The WebKit CSS

/* warp speed ahead */
.animClass {
	-webkit-transform: translate3d(0, 0, 0);
	/* more specific animation properties here */
}

The use of translate3d pushes CSS animations into hardware acceleration. Even if you’re looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem:

.animClass {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

There you have it; more power, less flicker. Happy animating!

Force Hardware Acceleration in WebKit with translate3d is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML and CSS

Let’s assume that an HTML element exists within the current page, and it’s style however a background should be. It has a CSS gradient, text, and numerous CSS properties:

<div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);">
	I'm in the background.  
</div>

I’ve inlined the styles on the element, but -moz-element will work with styles declared in style tags or external stylesheets. With the element existing within our page, we can now use it as a “background” for another element:

#mySpecialElement {
	/* mozElementBack exists as an element within the page */
	-moz-element(#mozElementBack) repeat;
}

Simply setting the -moz-element to the element ID, theoretically, converts the given element to a background image, allowing for background-repeat capabilities, and so on. Also note that the background updates as the element content and style updates, so you’re working with a “live” background!

An incredible CSS property, no? The ability to use an existing HTML element as a CSS background is wild, but thanks to Mozilla, it’s entirely possible. Let me know if you can think of a great, real-life usage of this property. The advantage I see in -moz-element is that you can include text in backgrounds, as well as elements generated from scripts you don’t control (social bookmarking JS files, for example). What an interesting implementation though!

Use Elements as Background Images with -moz-element is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.