JavaScript

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.

The Ext JS team has released version 1.0 of its SDK for developing GWT applications with the Ext JS library. Despite some controversy around Ext's licensing strategy (namely the switch from LGPL to GPL), Ext GWT is currently one of the better integrations between a Java web application framework and a JavaScript framework.

Ext GWT 1.0 has been compiled and tested against GWT 1.5 RC1. Downloads are located here.

A very useful design element on the modern web is the accordion element. With this useful design element you can never have enough accordion scripts to use. Well, WebTecker has put together a nice list of accordion scripts.

Below is an excerpt from the post.

• jQuery Horizontal Accordion - This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin.
  
  
• MooTools Accordion - This MooTools Accordion script is very nice script that is very easy to implement. There is no additional plugins that you need to get this script to work. The one problem with this is that there is no support for this script. But you can easily figure out how to integrate by viewing the source code.
  
  
• Horizontal JavaScript Accordion - This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement.
  

  

• Accordion v2.0 - This accordion script is built with Prototype and Scriptaculous. This script handles both horizontal and vertical accordions. It can even have an accordion inside an accordion. You should check this out.
  
  

You can read the full list here.

This is a great list and many of these scripts could be useful if you want a different accordion script.

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

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

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.

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:

New features in version 2:

The vlaCalendar has been tested on:

• IE7 on Vista and XP Service Pack 2
• IE6 on XP Service Pack 2
• FireFox 2
• Opera 9

This script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License.

A major drawback of the script is that it requires PHP. Although PHP is pretty common in web development, a better implementation could have been done with 100% JavaScript with no dependence on the server. Implementing the datepicker in this manner would have made it more flexible and compatible with all server-side languages. Hopefully we'll see this solution, or one like it, become fully client driven in the near future.

Learn more about vlaCalendar and check out some demos

Share
Close
• Social Web
• E-mail
• Delicious
• Digg
• StumbleUpon
• Propeller
• Reddit
• Magnoliacom
• Newsvine
• Furl
• Facebook
• Google
• Yahoo
• Technorati
• Icerocket
Your Email: *
Your Name: *
Send To: *
Enter one address or multiple addresses separated with commas.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Math Question: * 1 + 17 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Since Ajax applications are so popular we developers are always looking for better JavaScript tools. Well, jsLex is an eclipse plug-in that attempts to make it easier to improve JavaScript/Ajax performance.

Below is an excerpt from the jsLex site.

Why jsLex?

As Ajax is used for an increasing number of projects it is also being used in projects with larger and larger code base. When the code base of a project increases, chances are you will run into performance issues.

Working on the Apache XAP project and Nexaweb's Universal Client Framwework, which has a large code base it became apparent that hand injection of profiling code only worked so well. A new technique was needed to make it possible to capture a complete view of the performance of an Ajax application in a similar way to using jProfile for Java code.

jsLex is that tool!

• Go to the features page for more information. Click Me!
• Go to the screen shots page to view screen shots of the application. Click Me!

jsLex gives developers a complete picture of the performance issues with-in thier Ajax application. By auto injecting profiling code using jsLex ant task, developers don't need to modify their code to track down bottlenecks, minimizing coding erros and saving time.

Currently developers need to hand inject profiling code into their applicaiton. Though this can be easily done as in the example below. Such a technique offers limited information and requires the developer to know percisely where the problem is located. Otherwise developers need to modify their code over and over as the try to find the problem area(s).

function doLongTask(){
  var start = new Date(); 

  for (var index = 0; index < infinite; index++){
     //Do something here
  }

  end = new Date(); 
  alert ("doLongTask took " + (end - start) + 
         " milliseconds to complete." );
}

You can read more about jsLex here.

I think that jsLex makes a good attempt of improving performance profiling of Ajax applications. Also, since the tool plugs-in to the extremely popular Eclipse IDE it can be very useful to many developers. If you have used jsLex, I would love to hear your experience with the plug-in.

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.

John Resig has written a good JavaScript port of the excellent Perl script written by John Gruber that provides pretty capitalization of titles. It is amazing how well the script works for capitalizing words.

Below is an excerpt from the post.

The excellent John Gruber recently released a Perl script which is capable of providing pretty capitalization of titles (generally most useful for posting links or blog posts).

The code handles a number of edge cases, as outlined by Gruber:

• It knows about small words that should not be capitalized. Not all style guides use the same list of words — for example, many lowercase with, but I do not. The list of words is easily modified to suit your own taste/rules: "a an and as at but by en for if in of on or the to v[.]? via vs[.]?" (The only trickery here is that “v” and “vs” include optional dots, expressed in regex syntax.)
• The script assumes that words with capitalized letters other than the first character are already correctly capitalized. This means it will leave a word like “iTunes” alone, rather than mangling it into “ITunes” or, worse, “Itunes”.
• It also skips over any words with line dots; “example.com” and “del.icio.us” will remain lowercase.
• It has hard-coded hacks specifically to deal with odd cases I’ve run into, like “AT&T” and “Q&A”, both of which contain small words (at and a) which normally should be lowercase.
• The first and last word of the title are always capitalized, so input such as “Nothing to be afraid of” will be turned into “Nothing to Be Afraid Of”.
• A small word after a colon will be capitalized.

He goes on to provide a full list of edge cases that this script handles.

You can read the full post here.

I can see some uses for this script in applications that would like to take user input and make it into a properly formatted title. This could be handy in a del.icio.us or digg like application.