Steve Reynolds Blog » jQuery UI

Custom 404 with jQuery and jQuery UI

Steve Reynolds — Thu, 10 Sep 2009 16:10:08 +0000

So I thought I would have a whizz at creating a custom 404 error message page, seeing as they’re so dull! What better way to do this, than with some sexy jQuery UI animations, and a snipsy bit of jQuery? This tutorial isn’t limited to 404 error pages, you can use this animation technique anywhere. Here’s the premise – a 404 that’s breaking, the page is literally cracking into bits:

Click to see my cracking demo

You’ve got to check it out above! You like? Here is how I did it.

HTML & CSS

First off I built a basic HTML structure – this obviously has key parts missing, but for the sake of the demo this is what we’ve got:


	
		404 - File Not Found - Reynoldsftw.com

		
		
		
		 

		
	
	
	404
	File Not Found
	We're sorry you are seeing this page, please don't break the site again!

Some DIVS for the text content, and also a couple of empty DIVs that will hold two images. One being the crack, the second being an overlay .png file which we will animate over the top. Here’s the CSS for those two image DIVS:

#crack
{
	z-index: 1;
	position: absolute;
	width: 200px;
	height: 600px;
	background-image: url(../images/crack.png);
	left: 520px;
	top: 0px;
}

#crack_overlay
{
	z-index: 1000;
	position: absolute;
	width: 200px;
	height: 600px;
	background-image: url(../images/crack_over.png);
	background-position: 0px -1100px;
	left: 520px;
	top: 0px;
}

A couple of things to note – the overlay image is extremely large in height, therefore I am positioning it in the DIV so that in that position, the crack image/DIV underneath it cannot be seen (background-position-y: -1100px;). Both DIVs are absolutely positioned, as well as the overlay having a z-index higher than that of the image/DIV underneath. Okay, let’s “crack” on…

jQuery and jQuery UI

Next we have the jQuery UI and jQuery code. I’ve chosen to use the “shake”, “bounce” and “pulsate” jQuery UI effects, setting their options quite tightly so that the movements made are very minimal – giving the wall shaking, earthquakey effect. I’ve also set some timers to randomly shake various elements, as well as re-position the overlay so that more and more of the crack is revealed.

var coord = -1125;

$(document).ready(function() {

	setTimeout("shake()", 2000);
});

function reveal()
{
	setTimeout("moreCrack(coord)", 200);
}

function shake()
{
	coord = coord + 50;
	if(coord < -125)
	{
		$("#crack").effect("shake", {distance: 1}, 40, reveal);
		$("#error_code").effect("bounce", {distance: 5}, 50);
		$("#error_status").effect("pulsate", {times: 2}, 50);
	} else {

		$("#crack_overlay").hide();	

	}
}

function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

function moreCrack(coord)
{
	$("#crack_overlay").animate({backgroundPosition:"(0 " + coord + ")"});
	setTimeout("shake()", randomXToY(3500, 5000));
}

Okay, so on the document.ready() call, I’m setting up a timer to call the shake() function. This will then call a chain of functions to shake and reveal more of the crack (moreCrack()). I then start over again, but call shake at a random interval so that it is less predictable.

Finally, the shake() function keeps an eye on the position of the overlay DIV and stops the entire thing once there is no more to reveal.

Download the solution

Download Solution

As ever, here is the code for you all bundled up. Feel free to have a play and let me know how it goes. There are a few ways looking at it at how to streamline some of the code, but I thought I’d get it out there for you all to play with for now! Probably more soon.

Anyway – click the icon to the left or download here. Please let me know if you use it, or do something even cooler with it – stick an url in the comments!

Tools to help you learn…

Learning jQuery 1.3

Amazon Kindle 2

jQuery UI 1.6

Q&A With jQuery UI Release Manager Richard D. Worth

Steve Reynolds — Fri, 27 Mar 2009 16:00:32 +0000

If you haven’t seen it before, jQuery UI is an awesome layer to the already brilliant jQuery library enabling you to build great, intuitive and interactive Rich Internet Applications. In this Q&A session, Richard D. Worth – Release Manager with the jQuery UI project answers some questions about his early programming days and the future of jQuery UI.

Can you give me a brief history of your programming days? Where did it all start?

I started programming on an Apple ][e. Basic. Next was assembly on a 286. I was really into demos (if anyone remembers those). My older brothers got me started and we would program on whatever PC my dad upgraded to each year or two. Sometimes we'd even have two, so I'd get to play more freely on the older one. 386, 486. I remember the day we got a math co-processor. Oh, and the turbo button! I programmed in pascal, c, pov-ray, qbasic. What else was fun? BBSes, 1200 baud modem, nic.funet.fi, prodigy, compuserve, Mosaic 1.0. HTML. Ahhh. Thanks for the trip.

How did you get involved with jQuery UI? What's the story behind that?

About two years ago I found jQuery and got involved pretty quickly. I started answering questions on the mailing list, created the FAQ, set up http://planet.jquery.com/. After a couple months I heard news that a new version of Interface was being worked on, called jQuery UI, headed by Paul Bakaus. At the time I was working on a drag-and-drop tree (the reason I looked for and eventually found jQuery) and a table editor (where you could drag and select TDs, convert them to THs, merge and split cells, etc.). My first contribution to jQuery UI was some documentation and testing for drag and drop. It came pretty easily, because I was making use of them for both these plugins I needed. I had found an unequaled community in jQuery, and was excited about being a part of a new sub-community growing within it: jQuery UI.

What's next on your things to do list with jQuery UI?

Testing. Lots of test to be written. Static (markup) tests, visual (interactive) tests, unit tests. My eventual goal is full coverage, obviously. Lots to do yet. Also, I'm really anxious for TestSwarm.

Specifications. We've got a marvelous Development and Planning wiki now (http://wiki.jqueryui.com/). We're not just writing code when we have cool ideas. We're planning and designing. I'd like to see us get our specifications to a point where they're sufficient for all tests, code, and documentation to be written from them. Even for existing plugins in so-called "maintenance mode". At this point we're still doing a lot based on current implementation. That can take a lot of time and energy, and too often involves reverse engineering. Plus, it's hard to know what someone might be depending on, or foresee an unintended change. The code alone cannot speak for how a component should behave.

New development, perhaps. It's been a while since I've done any new development on jQuery UI. We've been quite focused as a team for the last 9 months on the 1.7 release. In the end it had only one new plugin, progressbar, and it's the simplest one by a long shot. Now that that's out and we're nearing 1.6 final and 1.7.2, we're taking a look toward 1.8, 1.9, and 2.0. We've got some exciting plugins in the works. I'm particularly interested in working on tree, grid, and menu.

How are you building in performance enhancements into jQuery UI - How do you approach that kind of work?

I did a bit early on. Paul did a lot more. I remember sitting down with selectables at one point. I created a page with like 1,000 items. I wanted to be able to drag the selectable lasso as quickly as possible and have all those items light up and down without a skip. I just kept working on it until the numbers got down. Profiling, refactoring, testing on different platforms. Rinse. Repeat.

Would you say that jQuery, jQuery UI, Mootools and other libraries are forming the basis for what will be the next generation of web applications for the next few years to come? I hesitate to say web 3.0... As the uptake of these gets greater and greater and the feature-set gets even better, the backbone of next generation apps is starting to form I believe. Do you see it that way or do you see a different journey for jQuery and jQuery UI?

I definitely see that. I'm not sure I had that vision when I started contributing to jQuery UI (I just needed a control or two). But it didn't take long. It's clear that Rich Internet Applications are a valuable and growing area of the web, and of software development in general. One of my personal goals, and I think I share it with the rest of the team, is to make Rich Internet Application development as elegantly simple as jQuery has made Ajax and the DOM.

What is it about programming that gives you the bug? Is it the need to solve problems? Or the satisfaction in being able to solve complex problems for example...

I absolutely love problem solving. I always have. I also like the artistic and creative design aspect of programming. For me, too, there's just something about being able to communicate effectively, powerfully even, in the same language with both humans and machines. Code speaks.

Now that IE8 is well and truly out there, what are your thoughts on the new browser? Any significant issues with jQuery UI?

I'm quite pleased with what we have in Internet Explorer 8. It's a great web browser. Will IE6 die tomorrow? Will IE8 be my principal development browser? No. But it's a great browser for all users, and it's finally got some decent development tools built-in. So, I'm happy. As far as issues with jQuery UI, no, I haven't seen anything yet. But we kept a pretty close eye on it through the betas.

What are your tools of choice to get the job done?

Notepad, UltraEdit, Firefox, Firebug, VirtualBox, TortoiseSVN

If you hadn't gotten involved with jQuery UI, what do you think you would be doing instead?

TortoiseGIT

If you could give one tip to new jQuery UI developers, what would it be?

Think and talk about the design. Don't just point at an existing plugin's source code, whether you wrote it or not. Dissect it, analyze it, rip it apart, compare it in detail with everything else out there. Do your homework. And then present what you find in such a way that others can benefit from all that effort.

Richard can be found on Twitter as @rworth, or via his blog at http://rdworth.org

Tools to help you learn...

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

Live MySQL Database Search with jQuery

Steve Reynolds — Thu, 19 Mar 2009 13:59:21 +0000

Live search is starting to become more and more mainstream. With the advent of Ajax the ability to carry out searches without leaving the page have obviously started to appear more and more. The trouble with live searching though, is it can be quite resource intensive. Every keystroke in theory returns a bunch of search results, perhaps relevant, perhaps not. On a busy site this could have quite an impact.

In this tutorial I will demonstrate the same basic theory, live searching (demo) – however I am not showing the user any results until they execute the search. Instead, I am responding with a search result count in a live manner (after every key stroke), but actually returning the results on a button click or [ENTER] key press.

Live MySQL searching with jQuery (Click for demo)

What this does is cut down on the amount of data whizzing around after every keystroke, cutting down database activity and more importantly bandwidth reduction. It also gives the user some relevant feedback on their search so they can see if their search term actually matches any results in the first place before submitting it in a very economical fashion.

Click Here For Demo

The HTML

First up, lets create the basic HTML page. A couple of containers for the form elements and a container for the results.







Search

The PHP

The PHP part of this is very simplistic in its approach, it is returning HTML data rather than XML or JSON objects – it’s up to you to take that next step. The script has two roles, 1 – To return a result count number, and 2 – to return search results. You could seperate these into two scripts if you want, but I’ve put them into one for now…

if(isset($_GET['query'])) { $query = $_GET['query']; } else { $query = ""; }

if(isset($_GET['type'])) { $type = $_GET['type']; } else { $query = "count"; }

if($type == "count")

{

$sql = mysql_query("SELECT count(url_id)

FROM urls

WHERE MATCH(url_url, url_title, url_desc)

AGAINST('$query' IN BOOLEAN MODE)");

$total = mysql_fetch_array($sql);

$num = $total[0];

echo $num;

}

if($type == "results")

{

$sql = mysql_query("SELECT url_url, url_title, url_desc

FROM urls

WHERE MATCH(url_url, url_title, url_desc)

AGAINST('$query' IN BOOLEAN MODE)");

while($array = mysql_fetch_array($sql)) {

$url_url = $array['url_url'];

$url_title = $array['url_title'];

$url_desc = $array['url_desc'];

echo "" . $url_title . "

" . $url_desc . "";

}

}

You’ll need to ignore the table and column names in the MySQL query, however you get the idea. For the “count” section the query is simply returning a result count to the browser, e.g. “3″. For the “results” section the script is returning chunks of HTML that our jQuery will consume and display on the page.

You also need to consider tightening up security on the form input, so validate what is coming in to ensure there is no SQL injections going on etc – I’ve really tried to just give you the basics here.

The jQuery

Finally, the jQuery. I am also using a snipsy bit of jQuery UI which you will need to include (but you can get all that from the download link at the end of this article).

$(document).ready(function() {

$("#searchbox").keyup(function(){

$.get("search.php",{query: $("#searchbox").val(), type: "count"}, function(data){

$("#buttontext").html(data + " Results Available");

});
});

$("#searchbox").keyup(function(event){

if(event.keyCode == "13")
{
getResults();
}

});

$("#submitbutton").click(function(){

getResults();

});

function getResults()
{

$.get("search.php",{query: $("#searchbox").val(), type: "results"}, function(data){

$("#resultsContainer").html(data);
$("#resultsContainer").show("blind");
});
}

});

So on the keyup event on the search box, my live search count is being fired and returning this count number into my form button. Depending on the performance of your hardware this will be instant, or a bit laggy. Once you are satisfied with your search term and you know that there will be results, you can hit the “Enter” key or the button to display the results. At that point, the PHP script is called again and returns the HTML chunks as described before.

Download

As usual, click the box icon on the left to download the code in full including CSS and supporting image files. Hope you enjoy it, you’ll need to change the MySQL database connection variables, as well as the queries against the relevant tables etc…

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6

Q&A with jQuery UI Creator Paul Bakaus

Steve Reynolds — Mon, 09 Mar 2009 15:00:10 +0000

With the release of jQuery UI 1.7 just out the door, Paul Bakaus – creator of jQuery UI has kindly agreed to answer some questions about that launch, his life as a programmer, his involvement with the jQuery UI project and the world as he knows it. Without further ado, let’s get on with the session:

Can you give me a brief history of your programming days? Where did it all start?

Although it’s a bit embarrassing, my first programming experience was trying to build a customized and skinnable mediaplayer with Visual Basic 6. This probably was around 1999 or so, and although the media player was quite nice in terms of features, it had countless timers and totally killed every CPU by just playing a simple song.

After this experiment I soon realized that I wanted to do something with the internet. One of my hobbies was (and still is) japanese anime and manga, and there wasn’t really a great community around it in germany at that time, so I took the challenge and created a community called Anime-Domain as my first big web project. It was my little playground, and after 10 revisions and designs it grew so popular that it was featured in german print magazines and had some 10k unique visitors a day. This was the time where I knew that by doing web development, you could reach many people very quickly with what you do, so I decided to continue to go that route.

How did you become the creator of jQuery UI? What’s the story behind that?

I initially came to the jQuery project while searching for a good solution to power the web applications of a big german client. As I was specifically responsible for building out a lot of the frontend logic and interaction, I quickly found out about Interface, a collection of interface plugins developed by Stefan Petre. I soon realized there was a lot of work involved to make it stable for our environment, so I invested a lot of time into bugfixes and feature stabilization, and later even planned the next generation of Interface, Interface 2 with Stefan. However, it was then that Stefan moved on with founding his own business and ran out of time, so Interface was discontinued.

In May 2006, John Resig then asked me if I would build the first version of an official jQuery interface addition, since I already had quite some experience from working on Interface. He and the jQuery community wanted to have it done in three months for the Ajax Experience conference in Boston, which was nearly impossible after a quick analysis of my workload. I had a day job, and I estimated I would need to work on it 3-4 hours everyday. After some days of consideration, I finally said ‘yes’, and for a three month period woke up every day at 6am to work for 3 hours on jQuery UI and then go to my day job. Now I can say that it was worth it

With jQuery UI 1.7 being released in the last few days, what do you see as the key parts of jQuery UI 1.7? What are you most proud of out of that release?

The one thing I’m most proud of is that our framework has matured so much since 1.5. We have taken great care to unify our API, fix hundreds of compatibility and behaviour issues, and now we truly have a foundation to build upon without needing to rewrite the core functionality again and again. This will allow us to push our features in the next releases in literally no time.

What were the biggest challenges of getting the 1.7 release out there?

Our test coverage is still incomplete, and with every fixed bug, we introduced 2 others, which made the arrival at a stable level extremely difficult. Every week, there were some 50-100 bugs entered in the bugtracker, and there was literally no end. Luckily, we were able to triage the bugs to criticals and blockers and solve these in time for a release. You have to have a lot of guts to push out a release that’s still imperfect – but an imperfect release is better than one that gets delayed for months. You can always roll out 1.7.1.

Jumping off of jQuery UI for a second, Do you “release early, release often” with all of your projects? What are your thoughts on that strategy?

Speaking for myself, I often release too early. That has been a problem in the past, when we released versions as stable that weren’t, for instance. So it’s important to find a combination of both – a stable release must be stable, while development cannot be halted or blocked through stubborn processes. A labs section is great in that way – it allows developers to contribute freely and plan on an open canvas, with early preview releases, and the work can later be merged back.

Have any of your startup projects failed dismally – if so, why and how did you learn from them?

A lot of my side projects failed, as a matter of fact, while others succeded. Usually, the reason why some project fails is not a technical one, but the fact that one didn’t build meta data around it. That means a dedicated site, documentation, instructions.

One of the examples is my recent Transformie plugin ( http://paulbakaus.com/2008/08/16/bringing-css-transform-to-internet-explorer/ ). While I believe it gives you great technological advantage, meaning to be able to use CSS Transforms in Internet Explorer, Firefox 3.1 and Webkit/Safari, nobody adapted it yet. I believe the reason is that I simply forgot to also work on documentation and a dedicated site with a download, which could have helped a lot during the promotion.

Mac, Windows or Linux? Why do you love this platform?

I switched to Mac hardware around a year ago and I’m totally in love with it. All components work together nicely, and so far, I never had to return my Macbook Pro to the Apple Store because of an issue. However, I’m still using Windows through Parallels because OSX, while visually nice and stable, has fundamental usability flaws.

One of these flaws is the Finder. I recently worked on the jQuery UI Selectables in the labs version, and once again saw that the Finder had great flaws when it comes down to selection. For instance, if you select multiple items and click on one of them, the multiple selection isn’t cleared. Also, my tools that I love for windows simply don’t have an alternative yet (see below).

What are your tools of choice to get the job done?

For editing files, I love the e texteditor (yep, the name is “e”). It basically started as a textmate clone for windows, but since then grew into something much greater. One of the features I can’t live without now is there great multiple selection support. Hold down CTRL, select a couple words through double clicking and then type over all of them. Is that cool or what? On a sidenote, on one of my talks in Japan the audience asked why I’m so insane to use a Textmate clone through an emulated Windows on OSX – I showed them this exact feature, and they were all amazed.

Other than that, I like TortoiseSVN, even if it slows down the Explorer, I love Photoshop, especially the new version with hardware acceleration, Trillian Astra for instant messaging, Gmail for email, Firefox 3 for browsing, VideoLAN for playing video, Keynote for preparing presentations, and WinSCP/Putty to do server administration. Phew, I guess that’s about it

Back onto jQuery UI… Can you see jQuery UI making more of an impression in the future, lead by the current successes of jQuery?

This question is difficult to answer because jQuery, other than jQuery UI, can be useful almost everytime. jQuery UI gives you a specific set of user interface widgets and behaviours, and many people think of it as loosing a kind of freedom. On the other hand, there’s definitely some connection – if you’re using Prototype already, and you’re looking for an UI framework, your choice is most often script.aculo.us. If you’re using jQuery, why not use the official side project?

What’s next on the hitlist with jQuery UI?

There’s a lot of movement right now. We finally pushed out 1.7 3 days ago, which we believe is a solid foundation for everything that’s coming in in the next couple of months. While 1.7 was a stability and foundation release, the next releases will concentrate around features, so expect to see many more components soon. Some examples are the colorpicker, menu, grid, tooltip and tree widgets.

Additionally, my personal goal is to target more platforms, for example the iPhone. Early test implementations I did show that it’s fairly doable to support the touch events, and therefore make all jQuery UI interaction compatible with mobile devices.

Additionally, I’m working on a brand new lab section to be able to push feature development without any restrictions. This allows us to work on anything we find is cool, but maybe not on the roadmap. Expect to see a lot soon in the jQuery UI Blog.

Is it too early to discuss jQuery UI 1.8?

There’s a lot on our list for the year. Filament Group did a great job to start a list of all widgets they could imagine being part of jQuery UI, which can be found and discussed in the jQuery UI planning wiki at http://wiki.jqueryui.com. There’s no definite roadmap for 1.8 yet, but some components are likely to make it into the next release. For instance, widgets that are already being worked on (grid, menu), as well as widgets that we had to kick out of 1.6/1.7 because they weren’t stable enough (spinner, colorpicker, autocomplete). It will be a huge feature release!

And finally, If you could give one tip to any new budding jQuery UI developers, what would it be?

Think different. No, seriously. For jQuery UI, we’re trying to take the same path than jQuery, and people that are restricted to thinking in classical OOP patterns will have a problem. If you think about it freely and give the functional, event-driven and progressive approach a try, you’ll find yourself getting the work done with jQuery UI in a fraction of the time needed than with other frameworks.

Paul can be found on Twitter as @pbakaus, or via his blog at http://paulbakaus.com/

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

An Introduction to jQuery UI – Part 2

Steve Reynolds — Thu, 26 Feb 2009 13:08:29 +0000

In my first jQuery UI article, we discussed the Interaction element of the functionality, drag and drops, resizing and sorting. In part 2 I will discuss the Widget elements that can be used with jQuery UI, these can be seen as custom controls to all you .net people out there. I’ve tried to go a bit deeper this time round, giving you home grown examples of usage in addition to the jQuery examples, as well as giving you jQuery-only alternatives. Let’s take a look…

Accordion

I love this widget. It’s a great tool to show and hide chunks of data within a page, with the added awesomeness of animations. As long as you mark up your HTML correctly, implementation is really simple. The example above uses:

$("#accordion").accordion({
header: "h3"
});

Beyond this, you are able to assign events to this, for example when an element is opened or closed using change:.

Alternatives: There is also a jQuery plugin, again called Accordion created by Jörn Zaefferer. It’s arguably easier to implement, does exactly the same, and you can customize as much as you want. Implementation can be as easy as:

jQuery('#list1a').accordion();

DatePicker

I discussed using DatePicker in my quick win blog post last week. There really is no better alternative to showing a great inline calendar widget for your forms quickly.

Alternatives: There are jQuery alternatives to this UI widget. Again this one is called “DatePicker” from Kelvin Luck. He’s built in allot of flexibility with this plugin, including something I always need which is from and to dates. I’ve used it a couple of times on projects and found it very well documented and easy to use. He’s got dozens of demos with source code which is really great.

If you need a simple quick win, go with the UI widget, but for ultimate flexibility and jQuery only, Kelvin’s plugin is the way to go.

Dialog

Dialog is very simple, it shows snazzy dialog windows on the desktop – and I love the background effect. However as nice as they are, there are better looking alternatives. If you want to sit pure with jQuery UI, Dialog will do what you need it to do, but plugins like “Thickbox” I’ve found are much smoother and nicer to implement.

Progress Bar

Progress bar is an interesting alternative to the other generic javascript feedback loading techniques out there. Based on where you are in your loading timeline, you can specify a % value against your progress bar element, and it will update. Obviously, if you only update the element 3 times, the animation between states will be pretty jerky, so try to update the progress % of the bar as often as possible. For example, this code would increase a progress bar by 1% every second:

var count = 0;
startProgress();

function startProgress()
{
$("#progressbar").progressbar({
value: count
});
if(count < 100)
{
count = count+1;
setTimeout("startProgress", 1000);
}
}

Alternatives: For you jQuery purists out there there is also a pretty good plugin called “jQuery Progress Bar”. Very similar, however does include some nice animations between progress points which is a great addition.

Slider

For me, Slider is really where jQuery UI comes into it’s own… I love the simplicity of the implementation of Slider, and the flexible options around horizontal, vertical and range is great. The way I have used it in the past is to call certain functionality upon the “change” event – for example – to alter the css opacity of an element in your GUI.

function refreshCSS()
{
var newVal = $("#slider").slider("value");
$("#myElement").css("opacity": newVal);
}

$(function() {
$("#slider").slider({
range: "min",
max: 100,
value: 50,
slide: refreshCSS,
change: refreshCSS
});
});

Alternatives: There aren’t many jQuery plugin options out there unfortunately that meet the greatness of the Slider widget in jQuery UI. One possible option is this slider plugin, however – I’m not convinced by it, and found it sometimes works, sometimes not…

Tabs

The final widget in today’s article is Tabs. Very simple, it’ll take content from pre-defined DIV elements and create a tabbed interface for it. Tabs can be sortable, as well as having events assigned to them on click, like show/hide, loading in content via Ajax, or any other functionality you can think of.

Alternatives: There aren’t many out there to be honest, but this excellent tutorial by Apricot Studios describes how best to achieve tabs with pure jQuery.

Conclusion

I hope you found this article useful as an introduction to the capabilities of jQuery UI, the alternatives out there, as well as some ideas on how you can implement from my home grown examples above. In Part 3 I’ll describe the Effects that you can achieve with jQuery UI.

Tools to help you learn…

jQuery UI 1.6	Amazon Kindle 2	Learning jQuery 1.3

I Failed…

Steve Reynolds — Tue, 24 Feb 2009 08:46:50 +0000

Yes friends I, Stephen Reynolds from a small town in Sussex England, have failed my readers.

With the fog of success surrounding me, and the urgency to follow up with a decent post, I have fumbled my way into writing an article that was lacking in original content from me. Whilst I put a lot of effort in, describing how jQuery UI elements can be used and running video demos of their functionality, this wasn’t enough and I apologize.

It’s a good early lesson for me and any other bloggers out there, you’ve got to add your own spin on the content you’re delivering to your users. Give some value add. Title your articles appropriately, and don’t sell it to the wrong demographic. I’ll digress…

Learning 1: Give greater value add, more original content.

With my blog, I have always strived to focus on the common man. I’m not an über nerd. I’m a generalist. I know enough about many things to succeed in my goals. If you’re looking for me to drill down into the very depths of jQuery sourcecode, you’ve come to the wrong place, sorry.

Learning 2: I need to make sure that I don’t suggest to new potential readers that I’m about to do be super nerdy. Set accurate expectations.

Whilst stats-wise the article in question was a resounding success, there was some backlash which ultimately has stopped the article in it’s stride. I titled it completely wrong, it’s not in depth, which misled my HN readership. By setting their expectations to a high bar, my article never eclipsed that imaginary target, and people got pissed. I value the HN readership feedback, they expected more and so, I will give as best I can next time over.

Learning 3: Title your content appropriately, don’t mis-sell it.

I’ve reached a turning point which most bloggers don’t get to, or don’t even realize. The early success on my blog has been nice, and the pressure is always there to follow up with bigger and better content… just dont lose sight of what you are trying to achieve. If you’re a potential blogger, learn from my mistake, take your time and let your content explode.

An Introduction to jQuery UI – Part 1

Steve Reynolds — Mon, 23 Feb 2009 14:00:33 +0000

jQuery UI is a fantastic library that sits neatly on top of jQuery enabling you to animate various elements for amazing front-end interactions. In the first of 3 articles, I will discuss the Interaction functionality, followed by Widgets, then Effects in part 3.

Drag & Drop

Drag and Drop is becoming more and more popular nowdays, especially in customizable user interfaces for complex applications. jQuery UI takes simple drag and drop functionality a step further, by not only making it easy to enable drag and drop on an element, but also to define certain criteria around that, like only drag vertically, or only allow dragging within a parent element. You can also set “handles” which are discrete elements where the drag and drop functionality is actioned, meaning a zone within another zone , so that for example only a title bar enables the drag and drop functions for a particular element.

Apple's MobileMe Drag and Drop

As I said, enabling the functionality is very simple for basic drag and drop

$("#element").draggable();

There is also a Droppable element to this too which allows you to target drop zones effectively.

Resizable

I ran through resizable previously in my WordPress Admin jQuery case study. It’s an easy to implement plugin to enable dynamic resizing of elements. You can choose to constrain to particular sizes, or only grow horizontally for example. You can also animate your resizing with a great grow/shrink effect.

$("#element").resizable();

Selectable

Selectable allows you to select multiple elements, either by clicking on them to choose them, or by dragging to multi select them. Can think of some great implementations within forms, or even a file managing interface… However, as you can see above – I experienced some odd behavior in Safari, so seems to suggest there may be some work to do on this part of jQuery UI.

Default functionality again is very simple to implement with jQuery:

$("#element").selectable();

Sortable

The final plugin in the Interaction section is Sortable. With Sortable you give yourself the ability to re-use some of the drag and drop functionality to allow you to sort your elements. A simple example is for organising page widgets like in Sharepoint, or the BBC homepage. WordPress have used it in various places within their new Administration section, allowing the users to be extremely flexible and create very personal experiences.

There’s a theme here with the code implementation, as you can tell – very easy stuff for basic functionality:

$("#element").sortable();

Conclusion

For me, the Interactive functionalities are the most powerful of all the tools that come with jQuery UI – Developers can really build some great intuitive, interactive applications with minimal effort, and that’s what jQuery is all about! In Part 2 I will discuss some Widgets that are available with jQuery UI to bring some more bling to your web applications.

Tools to help you learn…

jQuery UI 1.6	Amazon Kindle 2	Learning jQuery 1.3