Convert an Image to Canvas with JavaScript

To convert an image to canvas, you use a canvas element’s context’s drawImage method:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

The 0, 0 arguments map to coordinates on the canvas where the image data should be placed.

Convert Canvas to an Image with JavaScript

Assuming modifications to the image have been made, you can easily convert the canvas data to image data with the following snippet:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

The code above magically converts the canvas to a PNG data URI!

Alas, converting an image to canvas and canvas to an image is probably much easier than you think. In future posts, I’ll detail how you can apply different image filters to your canvased image. In the mean time, start buying fancy cars and houses with the future billion you’ll have!

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

<link rel="dns-prefetch" href="//somehost.tld" />

This technique can be very useful when your website links to related host names. Take Twitter for example; they implement two DNS prefetches:

<link rel="dns-prefetch" href="https://si0.twimg.com" />
<link rel="dns-prefetch" href="https://api.twitter.com" />

I’d be willing to bet that most of you didn’t know this tag existed. It’s an interesting idea with a very simple execution. What do you think? Do you manage websites that prefetching could be helpful for?

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

Update: These context menus display even when JavaScript is disabled; so best practice will be to create these menu structures via JavaScript. Mass innerHTML injection can be used or basic DOM node injection.

One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so there’s no need to create a custom plugin. Let me show you how you can create your own custom context menus from basic HTML!

The HTML

Let’s first start by defining a block of HTML and assigning the ID of the menu nodes to be used:

<section contextmenu="mymenu">
	<!-- 
		For the purpose of cleanliness, 
		I'll put my menu inside the element that will use it 
	-->
</section>

With the block defined, now it’s time to create the additional context menu items for the given block:

<menu type="context" id="mymenu">
	<menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
	<menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
	<menu label="Share on..." icon="/images/share_icon.gif">
		<menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
		<menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
	</menu>
</menu>

With a base menu tag with the type of context and id to match the context attribute for the blog it’s to be used for, menu items or submenus may be created. Menu items may have label, icon, and onclick attributes to represent design and actions. Actions can have predefined functions or inline javascript code, just as any element can. Multiple parents can use the same menu, so no need to repeat the same menus.

This is where I’d insert more detail, but this is so damn easy that there’s no point in boring you…

Mozilla Firefox is currently the only browser to support this API. I wouldn’t consider adding context menus a critical necessity but the ability to do so is quite nice, and I plan to add them to my blog soon. This API is the epitome of “used for enhancement and wont harm”. My “share” example is fairly basic and supplemental; have an scenario which the contextmenu API may be more useful? Share!

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

The PHP

Start by reading in the image using file_get_contents (or any other PHP method you’d like), then convert the image to base64 using base64_encode:

// A few settings
$image = 'cricci.jpg';

// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));

// Format the image SRC:  data:{mime};base64,{data};
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

// Echo out a sample image
echo '';

With the image data in base64 format, the last step is placing that data within the data URI format, including the image’s MIME type. This would make for a good function:

function getDataURI($image, $mime = '') {
	return 'data: '.(function_exists('mime_content_type') ? mime_content_type($image) : $mime).';base64,'.base64_encode(file_get_contents($image));
}

The thing to remember is that IE7 and lower don’t support data URIs, so keep that in mind if you’re considering switching from image paths to data URIs!

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

Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.

The HTML

The tooltip structure consists of five elements:

	

		

			

				{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
			
		
		

	

The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I’ve changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.

The CSS

The CSS to create the tooltip layout is actually very minimal:

body {
	font-size: 11px;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	color: #333;
	line-height: 1.28; 
	text-align: left;
	direction: ltr;
}

.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
	position: absolute;
	z-index: 200;
}

.uiContextualDialogLeft .uiContextualDialog {
	right: 0;
}

.uiOverlayArrowRight {
	padding-right: 10px;
}

.uiOverlay {
	position: relative;
	z-index: 200;
}

.uiContextualDialog, .uiContextualDialog:focus {
	outline: 0 solid transparent;
}

.uiOverlayContent {
	background: white;
	border: 1px solid #8C8C8C;
	border: 1px solid rgba(0, 0, 0, .45);
	border-bottom: 1px solid #666;
	-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	position: relative;
}

.uiOverlayContentHolder {
	padding: 10px;
}

.uiOverlayArrow {
	position: absolute;
	overflow: hidden;
}

.uiOverlayArrowRight .uiOverlayArrow {
	background-image: url(sprite.png);
	background-repeat: no-repeat;
	background-position: -177px -309px;
	height: 16px;
	right: 2px;
	width: 9px;
}

The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript — the choice would be up to the individual implementing the tooltip.

Why Show This?

Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I’ll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!

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

The CSS

Assuming you have an element that’s focusable (usually via tabIndex), the CSS to adjust the outline is as simple as you would expect it to be:

.tableWidget td {
	outline-offset: 2px;
}

A positive outline-offset moves the offset further outside the element, whereas you can create an inner outline using negative outline-offset:

.tableWidget td {
	outline-offset: -1px;
}

In the case of the bug I mentioned above, using a negative outline-offset fixed the problem because the outline stays within element.

I wasn’t aware of the outline-offset property before coming across this issue and I’m certainly glad I know about it now. Removing the outline property is never a good idea because usability and accessibility, so the ability to control its placement relative to the element border is very valuable.

Control Element Outline Position with outline-offset is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Creating DOM Nodes

Creating new nodes is just about as simple as it gets:

// Create an empty DIV
var div = put("div");

Boom, there’s your new DIV element! And if you want your new code to have a few CSS classes:

// Create a DIV with some CSS classes
var div2 = put("div.classOne.classTwo");

How about creating nodes with attributes?

// Create a DIV with some CSS classes and attributes
var div3 = put("div.classOne.classTwo[title=Hover over me][style=display:inline-block]");

The syntax for inserting the DOM node is a bit different because the parent then becomes the first argument in the put signature:

// Create an INPUT with an ID and an attribute, place it into the body
// The body text goes into the third argument;  not(!) innerHTML, just text
var div4 = put(document.body, "input[type=text]#myInput", "This is inner html");

Manipulating Existing DOM Nodes

Manipulating DOM nodes is actually very much like creating the nodes themselves:

var myInput = document.getElementById("myInput");
put(myInput, ".anotherClass");

// Add CSS classes attributes to the element
put(myInput, "[placeholder=first name][required=true][title=first name element].yetAnotherClass");

Just remove the tagName and you can modify the node.

Node, Class, and Attribute Deletion

The “!” character is meaningful in that it represents deletion within put. Let’s remove a few classes and attributes from a given node, then let’s remove the node itself:

// Remove a CSS class from the INPUT element
put(myInput, "!anotherClass");

// Remove attributes from the INPUT element
put(myInput, "[!required][!title]");

// Delete a node!
put(myInput, "!");

The syntax for deletion is short but sweet. The only criticism I have is that if this could create a maintenance problem if developers are not experience with put.

Creating and Managing Child Nodes

Creating childNodes for an existing node is another functionality made easier by put:

// Create a base node so we can add nodes around it
var baseNode = put(document.body, "div#baseNode");

// Add two DIVs *after* the baseNode
put(baseNode, "+div +div");

// Add a SPAN element *before* the baseNode
put(baseNode, "-span");

// Create the parent list element 
var ul = put(document.body, "ul");

// Create a child list item
var firstItem = put(ul, "li");

Moving and ReParenting Nodes

Reparenting and moving elements within the DOM is another basic task that, when you use JavaScript’s native functions, takes far too much code. Let’s have a look at moving nodes around with put:

// Move one node to another parent
// parent > child
put(ul, ">", firstItem);

// Put one element after the first
put(div1, "+", div2);

A simple series of symbols designates where within the node try an element should go!

More Traditional Node Property Management

For those who prefer a more verbose element creation syntax, put-selector provides that as well:

var span = put(parent, "span", {
	title: "Hover over me!",
	style: "font-style: italic;"
});

Kris’ tool is great in that it’s ultra-efficient, modular, and easy to learn. On the other side, it’s possible that the syntax may be a bit too compact for persons try to maintain an application that they didn’t write. What do you think of put? An easy to use utility or a “simple but complicated” resource? If I’m honest, I’m teetering on the fence — maybe you can convince me?

DOM Manipulation with put-selector is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser’s DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them.  Outstanding!  I’ve researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.

Initial Setup

The HTML setup is quite simple:

<a href="" class="album">
	<img src="http://davidwalsh.name/dw-content/gplus/photo4.png" class="photo1" />
	<img src="http://davidwalsh.name/dw-content/gplus/photo1.png" class="photo2" />
	<img src="http://davidwalsh.name/dw-content/gplus/photo2.png" class="photo3" />
</a>

I’ve used an A elements so that we can also play the animation with focus via tab. With the images in place, we need to style the A and images themselves:

/* the A tag */
.album {
	position: relative;
	z-index: 5;
	width: 250px;
	vertical-align: top;
	display:block;
}

/* the images */
.album img { 
	position: absolute;
	top: 0;
	left: 0;
	border: 5px solid #f3f3f3;
	box-shadow: 1px 1px 2px #666;
	-webkit-box-shadow: 1px 1px 2px #666;
	-moz-box-shadow: 1px 1px 2px #666;
	width:250px;
	height:250px;
	display:block;
}

These styles act as a base to the CSS and MooTools methods of animation.

The CSS Version

Both the CSS-only and MooTools versions will rely on browser-provided CSS3 animations via transforms.  The transforms we’ll be using are rotate, translate, and scale.  The scale will be kept relatively small so that the magnification isn’t abrupt.

The first step is getting our @-keyframes properties set up so that we can use the animations later. The following CSS assumes there will be 3 photos and user Google’s animation values:

/* first image:  webkit */
@-webkit-keyframes image1 {
	0%   { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}

/* first image:  firefox */
@-moz-keyframes image1 {
	0%   { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}

/* first image:  opera */
@-o-keyframes image1 {
	0%   { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1); }
}

/* second image:  webkit */
@-webkit-keyframes image2 {
	0%   { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image:  firefox */
@-moz-keyframes image2 {
	0%   { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}
/* second image:  opera */
@-o-keyframes image2 {
	0%   { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(0deg) translate(0, -3px) scale(1.1); }
}

/* third image:  webkit */
@-webkit-keyframes image3 {
	0%   { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}

/* third image:  firefox */
@-moz-keyframes image3 {
	0%   { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}

/* third image:  opera */
@-o-keyframes image3 {
	0%   { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }
	100% { -o-transform: rotate(6deg) translate(100px, -3px) scale(1.1); }
}

With the keyframes ready, it’s time to implement the CSS settings within the selectors themselves:

/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {

	/* webkit animation properties */
	-webkit-animation-name: image1;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
	
	/* firefox animation properties */
	-moz-animation-name: image1;
	-moz-animation-duration: .2s;
	-moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
	
	/* opera animation properties */
	-o-animation-name: image1;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
	
	/* microsoft animation properties */
	-ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}

/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {

	/* webkit animation properties */
	-webkit-animation-name: image2;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
	
	/* firefox animation properties */
	-moz-animation-name: image2;
	-moz-animation-duration: .2s;
	-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
	
	/* opera animation properties */
	-o-animation-name: image2;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
	
	/* microsoft animation properties */
	-ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}

/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {

	/* webkit animation properties */
	-webkit-animation-name: image3;
	-webkit-animation-duration: .2s;
	-webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
	
	/* firefox animation properties */
	-moz-animation-name: image3;
	-moz-animation-duration: .2s;
	-moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
	
	/* opera animation properties */
	-o-animation-name: image3;
	-o-animation-duration: .2s;
	-o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
	
	/* microsoft animation properties */
	-ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}

The :hover state signals showtime, and the animation is wonderful.  You’ll see that I’ve duplicated the 100% setting within the :hover state as well, and that ensures the elements stay at their destination transformation after the animation is playing (otherwise the elements would abruptly revert to original state one the animation was done playing).

While this animation looks great, and requires no JavaScript, the abruptness in return to original state is slightly off-putting.  Time for some MooTools magic.

UPDATE: CSS Transformations FTW

Using CSS transformations instead of animations, we can create a complete CSS-only solution!

/* the A tag */
.album {
  position: relative;
  z-index: 5;
  width: 250px;
  vertical-align: top;
  display:block; 
}

/* the images */
.album img { 
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #f3f3f3;
  box-shadow: 1px 1px 2px #666;
  -webkit-box-shadow: 1px 1px 2px #666;
  -moz-box-shadow: 1px 1px 2px #666;
  width:250px;
  height:250px;
  display:block;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -transition: all .3s ease-in-out;
    
}
/* first image animation properties */
.album:hover .photo1, .album:focus .photo1 {
    -webkit-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
    -moz-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
    -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
    -ms-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}

/* second image animation properties */
.album:hover .photo2, .album:focus .photo2 {
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
    -ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}

/* third image animation properties */
.album:hover .photo3, .album:focus .photo3 {
    -webkit-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
    -moz-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
    -o-transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
    -ms-transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}

Thanks to @ActualGabe for pointing this out!

The MooTools Version

Since there was no method for animating each image to its original position with just CSS, and considering MooTools has the smoothest animations on the web, it was only natural that I use MooTools to complete the effect.  JavaScript is also nice in that we can do variable animations based on developer configuration and variable numbers of images.

After creating an initial inline-script, I refactored what I had to provide the following MooTools JavaScript class:

var PhotoStack = new Class({
	
	Implements: [Options],
	
	options: {
		images: "img", // Which images inside the wrapper should we grab?
		rotationMax: 6, // Rotation max (both positive and negative)
		translationChange: 100, // Positive and negative,
		translationPxChange: 3, // Only positive
		scaleMax: 1.1, // Only positive, obviously,
		duration: 100 // Animation duration
	},
	
	initialize: function(wrapper, options) {
		this.setOptions(options);
		
		// Sort out elements
		this.wrapper = wrapper;
		this.images = [];
		
		// Add images
		wrapper.getElements(this.options.images).each(this.addImage, this);
		this.initialAdded = true;
		this.calculateSteps();
		
		// Add events
		this.addEvents();
		
		// This string will hold the proper calculation
		this.calculatedStyle = "";
	},
	
	calculateSteps: function() {
		// Get the images and calculation transformation values based on those images
		var images = this.images,
			numImages = images.length,
			halfImages = (numImages / 2),
			options = this.options;
		
		// Calculate the fx properties
		this.rotationIncrement = (options.rotationMax * 2 / (numImages - 1));
		this.rotationStart = options.rotationMax * -1;
		this.translationIncrement = options.translationChange / (numImages - 1);
		this.translationStart = options.translationChange * -1;
		this.translationPx = options.translationPxChange * -1;
	},
	
	addImage: function(image) {
		this.images.push(image);
		if(this.initialAdded) this.calculateSteps();
	},
	
	createFx: function(image) {
		if(image.retrieve("photostack")) return;
		
		// Create an instance of select
		var fx = new Fx({ duration: this.options.duration });
		fx.set = function(value) {
			
			// Calculate image settings specific to this instance
			var index = image.retrieve("photostack-index"),
				targetRotation = (this.rotationStart + (index * this.rotationIncrement)), // deg
				targetTranslation = (this.translationStart + (index * this.translationIncrement)), // px
				targetTranslationPx = this.translationPx; //px
			
			// Create the style string for this spot in the animation
			var style = "rotate(" + (targetRotation * value) + "deg) translate(" + (targetTranslation * value) + "px, " + (targetTranslationPx * value) + "px) scale(" + (1 + (value * (this.options.scaleMax - 1))) + ")";
			
			// Update those styles accordingly
			image.setStyles({
				"-webkit-transform": style,
				"-moz-transform": style,
				"-o-transform": style,
				"-ms-transform": style,
				transform: style
			});
		}.bind(this);
		
		// Store the fx object
		image.store("photostack", fx);
	},
	
	addEvents: function() {
		var images = this.images, wrapper = this.wrapper;
		
		// Create an event to lazyload photodeck fx creation
		var lazyFxEvent = function() {
			images.each(this.createFx, this);
			wrapper.removeEvent("mouseenter", lazyFxEvent);
			wrapper.removeEvent("focus", lazyFxEvent);
		}.bind(this);
		
		// Add the proper events
		wrapper.addEvent("mouseenter", lazyFxEvent);
		wrapper.addEvent("focus", lazyFxEvent);
		
		// Create basic mouseenter/leave events
		var todo = function(images, to, from) {
			return function() {
				images.each(function(image, index) {
					image.store("photostack-index", index);
					image.retrieve("photostack").start(to, from);
				});
			};
		};
		
		// Add the mouseenter and leave events to the album wrapper
		wrapper.addEvents({
			mouseenter: todo(images, 0, 1),
			focus: todo(images, 0, 1),
			mouseleave: todo(images, 1, 0),
			blur: todo(images, 1, 0)
		});
	}
});

There can be a lot of math involved with allowing for a variable number of images, so to ease the burden of those calculations, I’ve placed “max” options within the class to manage those calculations for the developer.  Using the class is as simple as:

window.addEvent("domready", function() {
	$$(".album2").each(function(album) {
		new PhotoStack(album);
	});
});

The animation back to original state is a nice change from the abrupt state restoration from the CSS-only solution.  Feel free to take and update the class however you’d like!

Duplicating Google’s photo stack effect was much easier than I had expected it to be thanks to MooTools’ flexible, easy to use Fx class.  If you aren’t worried about animating back to original position, you can stick to the simple CSS solution.  You can’t lose with either effect;  they’re both very smooth and add a subtle touch of class to an otherwise dull photo display.

If you’re looking for a jQuery alternative, this method appears to be close to mine.

Create a Photo Stack Effect with Pure CSS Animations or MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Google’s new Google+ service is taking the development world by storm, and why shouldn’t it?  It’s minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I’ve seen in quite a while (I was going to say “since Google Wave”, but that one didn’t end up well, did it?) Google+ allows you to share photos, links, statuses, and much more;  consider it a mesh between Twitter and Facebook.

Google+ will only gain more traction, meaning that the information we share will be pushed to more and more people.  This presents an excellent opportunity to promote our websites, much in the way that Twitter and Facebook have.  Let me show you a few different ways to add the new Google+1 badge to your website.

The Simple HTML

Adding a Google+1 badge is as easy as adding a few HTML tags:

<!-- one button, uses canonical link or current URL -->
<g:plusone></g:plusone>

<!-- customized for a specific address -->
<g:plusone href="http://davidwalsh.name/google-plus-badge"></g:plusone>

<!-- include the JS file -->
<script src="https://apis.google.com/js/plusone.js"></script>

Provide the g:plusone tag the URL to share via the HREF attribute (if none is provided, the page’s canonical link will be searched for and used, otherwise the current URL is used) and the desired size of button via the size attribute.  This tag should be added wherever within the page that you’d like the button to appear;  the SCRIPT tag should be found at the bottom of the page.  If you’d prefer not to dabble with the HTML yourself, Google provides a Google+1 button builder to do the dirty work for you.  Four button sizes are currently offered.

You could also use the following HTML5 code to render your button:

<div class="g-plusone" data-size="standard" data-count="true"></div>

Your button must have the g-plusone CSS class and data- attributes for options.

Deferring Loading

The HTML code above will render with the rest of the page, but what if you want to render a button on your own schedule?  No worries — Google’s API allows you to render buttons whenever you’d like:

<!-- one button, uses canonical link or current URL -->
<g:plusone></g:plusone>

<!-- Place this tag in your head or just before your close body tag -->
<script src="https://apis.google.com/js/plusone.js">
  {parsetags: 'explicit'}
</script>

<!-- Now render! -->
<script>
	gapi.plusone.go();
</script>

Using {parsetags: 'explicit'} and gapi.plusone.go() will turn your g:plusone tags into badges whenever you’d like. You can also render a specific button with the following JavaScript code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
	{"parsetags": "explicit"}
</script>
<script type="text/javascript">
	function renderPlusone() {
		gapi.plusone.render("plusone-div");
	}
</script>
<body>
	<a href="#" onClick="renderPlusone();">Render the +1 button</a>
	<div id="plusone-div"></div>
</body>

Full API information as well as an introductory video is available here.  There are a few more small customization options available so check them out if you’re looking to specify language or play with custom rendering.

Don’t miss out on another avenue for sharing your awesome web content with everyone!  Implementing Twitter, Facebook, and Google+1 sharing buttons takes 5 minutes but the amount of traffic you can gain via these referral avenues is tremendous!

Add a Google+1 Badge to Your Website is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

For those of you who have had the pleasure of following me on Twitter (…), you probably know that I’m a complete soccer (football) fanatic.  I even started a separate Twitter account to voice my footy musings.  If you follow football yourself, you’ll know that we’ve just started the international transfer window and there are a billion rumors about a billion players going to a billion clubs.  It’s enough to drive you mad but I simply HAVE TO KNOW who will be in the Arsenal and Liverpool first teams next season.

The problem I run into, besides all of the rubbish reports making waved, is that I don’t have time to check every website on the hour.  Twitter is a big help, but there’s nothing better during this time than an official report from each club’s website.  To keep an eye on those reports, I’m using the power of PHP Simple HTML DOM Parser to write a tiny PHP script that shoots me an email whenever a specific page is updated.

PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser is a dream utility for developers that work with both PHP and the DOM because developers can easily find DOM elements using PHP. Here are a few sample uses of PHP Simple HTML DOM Parser:

// Include the library
include('simple_html_dom.php');
 
// Retrieve the DOM from a given URL
$html = file_get_html('http://davidwalsh.name/');

// Find all "A" tags and print their HREFs
foreach($html->find('a') as $e) 
    echo $e->href . '<br>';

// Retrieve all images and print their SRCs
foreach($html->find('img') as $e)
    echo $e->src . '<br>';

// Find all images, print their text with the "<>" included
foreach($html->find('img') as $e)
    echo $e->outertext . '<br>';

// Find the DIV tag with an id of "myId"
foreach($html->find('div#myId') as $e)
    echo $e->innertext . '<br>';

// Find all SPAN tags that have a class of "myClass"
foreach($html->find('span.myClass') as $e)
    echo $e->outertext . '<br>';

// Find all TD tags with "align=center"
foreach($html->find('td[align=center]') as $e)
    echo $e->innertext . '<br>';
    
// Extract all text from a given cell
echo $html->find('td[align="center"]', 1)->plaintext.'<br><hr>';

Like I said earlier, this library is a dream for finding elements, just as the early JavaScript frameworks and selector engines have become. Armed with the ability to pick content from DOM nodes with PHP, it’s time to analyze websites for changes.

The Script

The following script checks two websites for changes:

// Pull in PHP Simple HTML DOM Parser
include("simplehtmldom/simple_html_dom.php");

// Settings on top
$sitesToCheck = array(
					// id is the page ID for selector
					array("url" => "http://www.arsenal.com/first-team/players", "selector" => "#squad"),
					array("url" => "http://www.liverpoolfc.tv/news", "selector" => "ul[style='height:400px;']")
				);
$savePath = "cachedPages/";
$emailContent = "";

// For every page to check...
foreach($sitesToCheck as $site) {
	$url = $site["url"];
	
	// Calculate the cachedPage name, set oldContent = "";
	$fileName = md5($url);
	$oldContent = "";
	
	// Get the URL's current page content
	$html = file_get_html($url);
	
	// Find content by querying with a selector, just like a selector engine!
	foreach($html->find($site["selector"]) as $element) {
		$currentContent = $element->plaintext;;
	}
	
	// If a cached file exists
	if(file_exists($savePath.$fileName)) {
		// Retrieve the old content
		$oldContent = file_get_contents($savePath.$fileName);
	}
	
	// If different, notify!
	if($oldContent && $currentContent != $oldContent) {
		// Here's where we can do a whoooooooooooooole lotta stuff
		// We could tweet to an address
		// We can send a simple email
		// We can text ourselves
		
		// Build simple email content
		$emailContent = "David, the following page has changed!\n\n".$url."\n\n";
	}
	
	// Save new content
	file_put_contents($savePath.$fileName,$currentContent);
}

// Send the email if there's content!
if($emailContent) {
	// Sendmail!
	mail("david@davidwalsh.name","Sites Have Changed!",$emailContent,"From: alerts@davidwalsh.name","\r\n");
	// Debug
	echo $emailContent;
}

The code and comments are self-explanatory.  I’ve set the script up such that I get one “digest” alert if many of the pages change.  The script is the hard part — to enact the script, I’ve set up a CRON job to run the script every 20 minutes.

This solution isn’t specific to just spying on footy — you could use this type of script on any number of sites.  This script, however, is a bit simplistic in all cases.  If you wanted to spy on a website that had extremely dynamic code (i.e. a timestamp was in the code), you would want to create a regular expressions that would isolate the content to just the block you’re looking for. Since each website is constructed differently, I’ll leave it up to you to create page-specific isolators. Have fun spying on websites though…and be sure to let me know if you hear a good, reliable footy rumor!

Parse Web Pages with PHP Simple HTML DOM Parser is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.