John Resig has just posted an excellent resource for getting your feet wet with jQuery and even introducing some advanced features you may not yet be familiar with.
The presentation & source files are available here:
http://ejohn.org/blog/building-interactive-prototypes-with-jquery/
Niall Doherty just released a minor update to the powerful & sexy jQuery CodaSlider widget. The version 1.1.1 release increases the visual styling capabilities of the widget by adding more css support.
Not a major update, but the drop in nature and dramatically increased styling ability make this an obvious addition to any projects currently using the widget.
Get it at ndoherty.com:
Yesterday, I posted instructions for handling a series of nested clicks with jquery. Today I’m going to follow up that post with a more sophisticated solution to handle a corner case we discovered in testing. I will be rehashing some but not all of yesterdays solution in this tutorial, but you may want to review it.
The problem:
We have nested clickable divs created by using the jQuery $().click( function … ) function. If the user clicks on the nested div, the click event fires for the parent div as well. Since this isn’t traditional event bubbling, we aren’t able to restrict the event to the innermost div by returning false from the click function or using event.stopPropagation(); & event.cancelBubble = true;.
We handled this yesterday by the simple expedience of using a status flag to verify that a child div hasn’t already been clicked on and erasing the status flags globally when ever an element is selected. This works beautifully for most cases, unfortunately it makes it impossible to select the parent of a previously selected element.
The Solution:
We needed to build a solution that could deal with 5 cases:
Our previous solution handled cases 1 – 3 well. We now need a fix for cases 4 & 5. We accomplish this by providing a tracking a bit more information than the selected / not selected flag. We declare a global variable clickedDivStack that maintains an array of the currently selected div & its ancestors.
First we determine if the target is the innermost div of a selected stack (none of its children have the selected flag set on them). In this case, we know we don’t have to worry about situations 4 & 5 so we simply set the div as selected. Then we reset the clickedDivStack array to contain only the target.
if (!$(target).find(".selected").size()) {
$('.selected').removeClass("elected");
$(target).addClass("selected");
clickedDivStack = [target];
return; }
Next, we check for case 4 & 5 by comparing the target to the contents of the clickedDivStack Array. If the length of the array is greater than 1 & the target is already in the array, we know that this was an attempt to click on the parent of a previously selected element & the current target is the innermost div of the new selection. We can then process this as a new innermost selection and return.
for (var i = 1; i < selecteddiv.length; i++) {
if (selecteddiv[i] == target) {
$('.selected').removeClass("elected");
$(target).addClass("selected");
clickedDivStack = [target];
return; }}
If the target is not a new innermost selection, it must be a parent div. Since we need to track parent divs, we add it to the array of parent divs.
clickedDivStack = [target];
return;
It’s a bit more complex, but the perfomance is excellent and it smoothly handles the click selection of divs, even coping with nested elements in all corner cases found.
Alright, so here’s the problem. I need to apply the ability to select any div inside an ajax app. Including divs nested inside other nestable divs. ex.
<div id="outer" class="clickable">
<div id="inner" class="clickable"></div>
</div>
In jQuery, if I simply call $('.clickable').click(...); I wind up with a click event that fires twice when inner is clicked. Once with target inner and once with target outer. Since I only care about the inner most div selected, I need some way to ignore the click event on the outer div.
I achieve this by assigning an attribute to the currently selected div. In the case of my most recent project, I was able to piggyback on a class change, but any attribute would do.
Step 1: Determine if this is the innermost selected div
There are two possible scenarios for any target div. It is either the innermost clicked div or it isn’t. If it isn’t the innermost div it will either already have a child div with a set “selected” attribute or it won’t. If it has a selected child div, we escape.
if ($(target).find(".selected").size() ) { return; }Otherwise, we remove all elements with set selected attributes and set the selected attribute for the target div.
$('.selected').removeClass( "selected");
$(target).addClass( "selected" );Note: If the containing div was the first processed, we don’t have a problem because we will clean up the current selection when the function is called on the innermost div.
The system is working like a charm for me in my current project. If anyone knows a more efficient way to do it, please share it in the comments below.
Here’s a quick and dirty little jQuery plugin to create text areas that automatically resize.
I based it off of Richard McMahon’s Prototype Version
jQuery.fn.smartArea = function (){
return this.each(function() {
if (!jQuery(this).is("textarea")) {
return false;
}
jQuery(this).click( function(){
jQuery.SA.resizeArea( this ); } )
.keyup( function(){
jQuery.SA.resizeArea( this ); } );
return this;
});
}
jQuery.SA = {
resizeArea : function ( t ) {
var lines = t.value.split('\n') || [];
var newRows = lines.length;
var oldRows = t.rows;
for (var i = 0; i < lines.length; i++)
{ var line = lines[i]; if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
}
if (newRows > t.rows) t.rows = newRows;
if (newRows < t.rows) t.rows = Math.max(1, newRows);
}
}
As excellent as Xinha, YUI RTE, Tiny MCE, FCK & the other heavyweight Rich Text Widgets are, they can be massive overkill for many projects Weighing in at only 7k (uncompressed). This jQuery Editor is an incredibly light weight and responsive alternative to the big guns for most projects.
Features:
Supported Browsers
Check it out online here:
http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
Ingrid is a wonderfully feature rich Table Widget built in jQuery.
Features
Ingrid’s biggest strength & biggest weakness is its focus on server side data manipulation. In a world where table widgets that support page views of data are less & less common, this is a welcome surprise. It’s also a weakness and overkill for small data sets. Over all, it’s a handy table widget to add to your toolkit.
ScrollShow is a unique photo gallery implementation that uses scrolling to display the items. It’s similar to a carousel implementation, but simpler and more flexible.
Check it out here:
One of the most powerful jQuery plugins is dimension. Using dimension you can obtain the position, height & width of just about any element on the page and the window itself.
Uses:
Find Plugin & API Documentation here:
Yesterday I brought you Jeditable a simple plugin to handle edit in place Ajax events. Today I bring you an Autocompleting, Inplace edit based on Jeditable by Ritesh Arawal.
This plugin extends Jeditiable with a simple AJAX call to retrieve an array of possible values based on user input.
What it ads:
Check it out online at http://php.scripts.psu.edu/rja171/widgets/autocomplete.php
Latest Posts