Libraries

jqPuzzle - jQuerry Sliding Puzzle

jqPuzzle is a nice puzzle script based on jQuery. The script has some very nice effects using the jQuery library.

You can get jqPuzzel as well as see a few demos here.

jQuery UI 1.5 - Rethinking UI

Congratulations to the jQuery UI team on their release of jQuery UI 1.5!

jQuery UI provides low to high-level interactions and themeable widgets for your rich internet applications. Since it's built on the jQuery JavaScript Library, you have a solid foundation on which to build your apps. The library revolves around different mouse interactions, including drag/drop, sorting, selecting, and resizing. Also, you can expect to find the jQuery Enchant effects framework along with some reusable widgets [accordions, date picks, dialogs, sliders, and tabs] included in this release.

What's new?

- Refactored API
95% less exposed methods means 95% less methods you have to remember.

- Increased Stability
A dedicated bug tracker, new unit tests, and the addition of jquery.simulate.js - a plugin specifically designed to fire true browser events..

- Effects
As mentioned above, this release includes Enchant as a part of jQuery UI and includes features like advanced easing, class transitions (morphing) and color animations. You also get all the effects that come standard with script.aculo.us (blind,bounce,drop,fold,slide …), but also some new effects like transfer, explode. clip, and scale. Check out the demos.

View the changelog for a full list of features, bug fixes, and other changes in this release

Imagine you've downloaded a new UI library and are ready to integrate it into one of your applications, what's one of your big obstacles? That's right, figuring out how to get it to match your application's color scheme and look and feel. Wouldn't it be nice if you had a tool that could easily do most of the work for you?

Well get ready for ThemeRoller: a new theme creator for the jQuery UI library created by the crew at the Filament Group in Boston.

ThemeRoller gives you the ability to style your jQuery UI components in minutes. You can easily preview your theme as you make adjustments and when you're done, you can download a ZIP package containing the css, image, and demo page files for your theme. If you don't feel like rolling your own, or maybe want some inspiration, check out ThemeRoller's gallery to browse and download a variety of predefined themes.

Special thanks has to be given to the Liferay staff, who invested countless hours into the development of the new UI website, and with whom the team worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

jQuery UI v1.5 Final Release: http://ui.jquery.com/download

Check out Themeroller

Image Manipulation with JavaScript

Tagged:  

Ajaxorized has released a GPL licensed image manipulation script called Phototype. Phototype is a client/server-side library, based on prototype, which provides image manipulation functionality. On the server, it uses the PHP/GD framework to render the image. While the client is an interface that makes these features easily accessible in JavaScript, including the ability to chain effects.

l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy();

Phototype supports:

  • image rotatation
  • resizing
  • flipping
  • drop shadows
  • effects
  • grey scale
  • captions
  • as well as an addChuckNorris() method [for all you Walker, Texas Ranger fans]

Original:

Modified:

 

Read more about Phototype

Animated Lightweight JavaScript Tooltip

Tagged:  

Michael Leigeber has released an animated JavaScript tooltip script that weighs in at a mere 2kb. It's compatible with IE6+, Firefox, Opera and Safari. A detailed description and implementation guide has been posted at Six Revisions.

Click here to visit the post at Six Revisions.
Click here for the demo.
Click here to download the script.

Vista-like [not in a buggy way] JavaScript/PHP Datepicker

Tagged:  

Over at dev.base86, they've released version 2 of their Vista-like Ajax Calendar (vlaCalendar). The vlaCalendar is an unobtrusive JavaScript library that ports the UI functionality of the Windows Vista datepicker control to the web. The library requires the MooTools JavaScript framework as well as PHP.

In their own words:
Key features:

  • Authentic Vista look-and-feel
    • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
    • Smooth transition animations
  • Customizable features
  • Lightweight (compressed 8,50kB)

New features in version 2:

  • Cleaner and more developer centered - easily editable - CSS, PHP and javascript code
    • Easily changeable date labels (e.g. different languages)
    • Easily stylable. Styles are created on top of the general style; the download include two example styles
    • Both normal and datepicker calendar can be instantiated multiple times

The vlaCalendar has been tested on:

Implement Keypress Navigation using jQuery

Bedrich Rios at NETTUTS.com has put together a tutorial for creating keypress navigation using the jQuery JavaScript library. A keypress navigation, if implemented well, can increase usability of your web applications and sites. Basically, you create a way for users to navigate through your site [or part of it] without the use of their mouse. This has long been possible/common with rich desktop applications, but usually isn't implemented in many of today's web applications.

Bedrich's 8 step tutorial will have you creating keypress navigations in no time. Check out the demo if you want to get a taste. For the 8 course meal, visit How to Create A Keypress Navigation Using jQuery

How to Load In and Animate Content with jQuery

Tagged:  

If you are interested in writing an application with jQuery, but have not used the library before then you are probably looking for a few good tutorials. Over at NETTUTS they have put together a nice tutorial about loading and animating content with jQuery.

You can read an excerpt of the tutorial below.

Step 1

First thing's first, go and download the latest stable release of jQuery and link to it in your document:

<script type="text/javascript" src="jQuery.js"></script>

One of the best things, in my opinion, about jQuery is it’s simplicity. We can achieve the functionality described above coupled with stunning effects in only a few lines of code.

First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded).

$(document).ready(function() {
	// Stuff here
});

Step 2

So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page.

We want to target the links within the navigation menu and run a function when they are clicked:

$('#nav li a').click(function(){
	// function here
});

Let's summarize what we want this function to do in event order:

  1. Remove current page content.
  2. Get new page content and append to content DIV.

We need to define what page to get the data from when a link is clicked on. All we have to do here is obtain the 'href' attribute of the clicked link and define that as the page to call the data from, plus we need to define whereabouts on the requested page to pull the data from - i.e. We don't want to pull ALL the data, just the data within the 'content' div, so:

var toLoad = $(this).attr('href')+' #content';

To illustrate what the above code does let's imagine the user clicks on the 'about' link which links to 'about.html' - in this situation this variable would be: 'about.html #content' - this is the variable which we'll request in the ajax call. First though, we need to create a nice effect for the current page content. Instead of making it just disappear we're going to use jQuery's 'hide' function like this:

$('#content').hide('fast',loadContent);

The above function 'hides' the #content div at a fast rate, and once that effect finished it then initiates the "loadContent" function (load the new content [via ajax]) - a function which we will define later (in step 4).

Step 3

Once the old content disappears with an awesome effect, we don't want to just leave the user wondering before the new content arrives (especially if they have a slow internet connection) so we'll create a little "loading" graphic so they know something is happening in the background:

$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');

Here is the CSS applied to the newly created #load div:

#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

So, by default this 'load' span is set to display:none, but when the fadeIn function is initiated (in the code above) it will fade in to the top right hand corner of the site and show our animated GIF until it is faded out again.

Step 4

So far, when a user clicks on one of the links the following will happen:

  1. The current content disappears with a cool effect
  2. A loading message appears

Now, let's write that loadContent function which we called earlier:

function loadContent() {
	$('#content').load(toLoad,'',showNewContent)
}

The loadContent function calls the requested page, then, once that is done, calls the 'showNewContent' function:

function showNewContent() {
	$('#content').show('normal',hideLoader);
}

This showNewContent function uses jQuery's show function (which is actually a very boring name for a very cool effect) to make the new (requested) content appear within the '#content' div. Once it has called the content it initiates the 'hideLoader' function:

function hideLoader() {
	$('#load').fadeOut('normal');
}

We have to remember to "return false" at the end of our click function - this is so the browser does not navigate to the page

It should work perfectly now. You can see an example of it here: [LINK]

Here is the code so far:

$(document).ready(function() {

    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Step 5

You could stop there but if you're concerned about usability (which you should be) it's important to do a little more work. The problem with our current solution is that it neglects the URL. What if a user wanted to link to one of the 'pages'? - There is no way for them to do it because the URL is always the same.

So, a better way to do this would be to use the 'hash' value in the URL to indicate what the user is viewing. So if the user is viewing the 'about' content then the URL could be: 'www.website.com/#about'. We only need to add one line of code to the 'click' function for the hash to be added to the URL whenever the user clicks on a navigation link:

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

The code above basically changes the URL hash value to the value of the clicked link's 'href' attribute (minus the '.html' extension. So when a user clicks on the 'home' link (href=index.html) then the hash value will read '#index'.

Also, we want to make it possible for the user to type in the URL and get served the correct page. To do this we check the hash value when the page loads and change the content accordingly:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    } 
});

With this included here is all the javascript code required: (plus the jQuery library)

$(document).ready(function() {
	
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        } 
    });
    
    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});
You can read the full tutorial here.

jQuery is one of the best JavaScript/Ajax libraries that I've seen, so it is always good to see more tutorials using the library. If you haven't used jQuery before then I would recommend using it and this tutorial is a great place to start.

YUI based Color Picker Widget

Dynamic Drive has posted a new color picker widget built with the YUI JavaScript toolkit. This widget can be integrated in a form field to provide an inline or floating color picker. A control can also be assigned the color picker, activated with a click, with an option to set the control's background color based on the value chosen in the color picker widget. Since each color picker is defined as an empty DIV on the page, you can surround it with content and style it as you like. This new implementation also supports multiple instances of the color picker on the same page. So, two form elements can have two separate color pickers, as opposed to having one picker shared by all elements.

Visit Dynamic Drive for the script, demos, and installation instructions.

Explore Dojo with Dojo Campus Feature Explorer

Dojo Campus has an interesting application called the Dojo Campus Feature Explorer. The application allows you to see examples of various features of the Dojo library and the HTML for each example. The application has an incredible amount of information.

You can go to the Dojo Campus Feature Explorere here.

I recommend this application to anybody that is wanting to learn more about using Dojo.

Meteora JavaScript Widgets 0.5

Meteora is set of cross-browser Widgets and Controls that you can use to write rich web applications. Meteora is an Open Source project of Astrata Software. It's based on the MooTools framework (version 1.11) and is released under the MIT license.

With the recent 0.5 release, you'll find the following updates:

  • Picbox: A control to display images in top of an overlay. It is smart enough to adapt itself to the screen size. [ demo | doc ]
  • Bubble: Shows "idea bubbles" in any element. We are using it within the Form control as an user-friendly way to display input errors. [ demo | doc ]
  • Treeview: Displays and allows the user to interact with hierarchical nodes. You can use AJAX to create and display new nodes. [ demo | doc ]

Download Meteora


Syndicate content