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:
Edit in Place rich text areas has been a bit of a holy grail for me lately. Several of my project call for the ability to provide rich text on demand. You can already do this with the YUI rich text editor using some positioning magic. In this Prototype extension, the entire rich text area toggles to replace the inline content.
Rails support is provided out of the box.
Check it out here: http://inplacericheditor.box.re/
Via: Scripteka
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.
What is it:
FastInit is a small JS file to create a Faster window.onload. It implements a powerful onload function queue that fires once teh dom is ready and before all images have been downloaded. Ideally, this results in a dramatic decrease in a pages initialization time.
How it Works
You any functions to the queue by using the FastInit.addOnLoad( function 1, function 2, …); function. All functions are fired in the order in which they were added to the queue. addOnLoad can be called as many times as is necessary. It fails gracefully to standard handlers if the browser doesn’t support the faster methods.
Requirements
As of version 1.4.1 the need for Prototype has been removed freeing the code for use in any project where a speedy onload method is needed.
Check it out here:
http://tetlaw.id.au/view/javascript/fastinit
Stu Nicolls released this excellent CSS menu. It’s javascript free and provides incredibly rich interaction for something solely CSS based.
Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53
This is a bit off topic for this blog, but is something that has very much been on my mind lately. I’ve been maintaining an archive of all of my work over the past 12 years. Everything from coursework to UI markups, Personal Notes to SVN repositories all lived in a set of redundant 750 gb external hard drives. Over the years , I’ve found these archives to be an invaluable asset (especially with modern desktop search tools). Last monday, those drives were stolen.
Although I can cope without the data, I need to start compiling a new personal archive & I’m curious what other people have done for backup systems & how you deal with offsite backup of personal data.
After a rather painful night spent camping in line at Comp USA & a solid week of work repairing, cleaning & rebuilding. I’m back online.
Hi everyone, I won’t be posting much over the next few days. I was burgled yesterday and lost my laptop workstation, development server, personal archives and cable modem among other things. I will be offline until after the holiday & my insurance settlement.
I hope to resume regular posting by monday, November 26th.
Latest Posts