Snowstorm: A JavaScript Snow Effect for HTML

Posted on 29 November 2011. Tags: effect, javascript, snow

Let It Snow.

So, you want JavaScript snow on your web site, eh?

Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single JavaScript file provides the functionality required. No images are used for the snow effect.

Read the full story

Posted in JavaScript - AjaxComments (0)

ondblclick Event

Posted on 20 October 2011. Tags: click, event, javascript

Definition and Usage

The ondblclick event occurs when an object gets double-clicked.

Read the full story

Posted in HTML - XHTMLComments (0)

jQuery Before/After Plugin

Posted on 18 October 2011. Tags: ajax, javascript, jquery

About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Download

Go to the Before/After download page

What’s So Great About this Plugin?

Slick effect, no Flash needed
It’s just 7K (4K compressed)
Reusable on multiple containers
Degradable. If the visitor doesn’t have JavaScript they will still see both images.

How to Use

First, your before and after images must be the same size. Each image must be inside its own div, and both of those within a containing div which must have an ID. See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of jQuery and the jQuery UI, or point to jquery on Google andjqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

animateIntro – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default false)
introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default 1000)
introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.

Posted in JavaScript - AjaxComments (0)

HTML5 BOILERPLATE

Posted on 15 April 2011. Tags: html, html5, javascript

HTML5 BOILERPLATE IS 1.0!

Monday, March 21, 2011

Along with HTML5 Boilerplate’s rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script, and a custom boilerplate builder. In addition to this, we now support lighttpd, Google App Engine, and NodeJS with optimized server configurations (along with Apache, Nginx, and IIS) and we’ve reduced the overall size of the published boilerplate by 50%.

Read the full story

Posted in HTML - XHTML, ProgrammingComments (0)

PHP Spell Checker

Posted on 30 March 2011. Tags: javascript, PHP, Spell Checker

The PHP Spell Check component adds fast, reliable spell-checking to web sites and intranets. Installed on either IIS and Apache Servers, PHP Spell Check works on all major browsers since IE5.

Read the full story

Posted in PHPComments (0)

JavaScript to scroll to the top of the page

Posted on 21 March 2011. Tags: anchor, javascript, top of page

The following JavaScript link in your page will cause the page to scroll to the top:

Read the full story

Posted in JavaScript - AjaxComments (0)