Use built in jQuery UI icon with datepicker

Needed the date picker in a project today and noticed it doesn’t integrate well with jQuery UI’s icons, if trying to use an icon to open the calendar rather than an input. Found a response on Stackoverflow that talked about having to do it manually. This is the solution I ended up using.

$("#DateFrom").datepicker({ showOn: 'button'}).next('button').text('').button({icons:{primary : 'ui-icon-calendar'}});

By default the datepicker button call automatically inserts three ellipses to the button, so the text(”) is needed to remove the text from the default button. So there you go a fully theme away calendar button. Now if only they would make this easier by having the datepicker do it all for you.

jCrumb Instant Breadcrumb plugin

Just finished up a new plugin for jQuery. I wanted some breadcrumbs for some pages but wanted to do it all client side, so I came up with jCrumb. jCrumb saves the link and title of the most recent page and adds it to a session cookie, creating a dynamic bread crumb navigation bar on the page. It uses jQuery, and can also use jQuery UI for styling, or custom styles created by the user.

Live Demo

Jquery plugin page

Google Code Page

Jquery Snowfall Plugin 1.3

Plugin has been updated to 1.4 please go here for more up to date information

*Updated* fixed a bug, and added an example file to show how to use the plugin.

Added a few new things to the Jquery snowfall plugin, you now have the ability to clear the snow from elements, chaining is supported, and element matching is supported. Its funny today was the hottest day of the year so far and I decided to work on a script to make it snow.

Download Jquery Snowfall 1.3.1

Invoking the snow

    $(document).snowfall();
    $('#elementid').snowfall({flakeCount : 100, maxSpeed : 10});
    $('.class').snowfall({flakeCount : 100, maxSpeed : 10});

Snowfall Methods

    // stopping the snow
    $(document).snowfall('clear');
    $('#elementid').snowfall('clear');
    $('.class').snowfall('clear');

Options currently supported with default values

options = {
	flakeCount : 35,		// number
	flakeColor : '#ffffff', // string
	flakeIndex: 999999,		// number
	minSize : 1,			// number
	maxSize : 3,			// number
	minSpeed : 2,			// number
	maxSpeed : 3			// number
};

Example

Snowfall Plugin Updated

Updated the snowfall plugin that was released yesterday with a few more features.  The primary new feature allows you to specify which elements you want the snow to appear in. An example of this can be seen below. View a full page demonstration


$('#snow-window').snowfall({flakeCount : 100, maxSpeed : 10});

In addition to snowing within elements there are some more options available, properties available are

flakeCount,
flakeColor,
flakeIndex,
minSize,
maxSize,
minSpeed,
maxSpeed

You can still initialize the plugin with

$(document).snowfall();

but the flakes will not use fixed for positioning, they will now travel down the page completely. On some long pages this will make it seem like its not “snowing” as much. Im working on a few more updates that should be released in the following days. If you end up using this I’d love to know. You can download the most recent version here.


Jquery Snowfall plugin

Plugin has been updated to 1.4 please go here for more up to date information

Got bored today and decided to put together a quick snow plugin for Jquery. On my site Undeadgames.com the members look forward to the snow every year. I decided to replace the older one we were using, it was nice overall, but ran terribly slow on some browsers, and didn’t really care about window dimensions.

Click to download the plugin

The plugin is easy to implement, load up the file and call

$(document).snowfall();

or

$(document).snowfall(number of flakes);

Overall the plugin is pretty useless, and hearkens back to the days of old. Next update will include snow collecting on specified page elements. You can see it in action on either zombietweets.com, or undeadgames.com