Tuesday, August 17th, 2010
Category: Library, jQuery
From Tim Aidlin over at Microsoft comes a tutorial on using JQuery to do animation. The tutorial is focused on using a new library they have designed called Glimmer that allows designers and developers to create interactive elements and animations on web pages using JQuery. Using Glimmer you setup your HTML and CSS and then use the visual Glimmer tool to create animations and other effects:
The Glimmer tool then generates JQuery JavaScript automatically that you can pull into your page. An example snippet:
JAVASCRIPT:
jQuery(function($) {
var timer;
function clear_canvas(event)
{
clearTimeout(timer);
timer = setTimeout(eval("big_guy_in"),"600");$("#slide1text").css("left","-800px");$("#slide1text").animate({"left":0},600, "easeOutElastic", null);$("#bigGuyPointing").css("left","600px");
$("#bigGuyPointing").animate({"left":600},1000, "linear", null);
$("#slide1").css("display","block");
$("#bigGuyPointing").animate({"left":600},1000, "linear", null);
}
Friday, August 13th, 2010
Category: Mobile, jQuery
I have had the pleasure to start working with the awesome jQuery team on a new mobile development. Today, John announced jQuery Mobile, "a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation."
Palm has sponsored the effort with other great folks, and I wrote about it over here:
When we heard that the jQuery team was putting a lot of effort towards supporting their great library on devices, we wanted to help. At first we started with devices for John to test on as he explored compatibility, but with the newly announced jQuery Mobile initiative, we wanted to do more.
What are we doing? We are going to sponsor some of the great work that will go into jQuery Mobile from jQuery team members such as the Filament Group who are well known for their work on jQuery UI and ThemeRoller. First and foremost, we want to allow the team to focus on making a great jQuery experience across the mobile Web.
Secondly, we will be working hard to make sure that webOS itself is a fantastic host for the product. This will mean testing help, and also some jQuery plugins that show off some of the great abilities of webOS (e.g. the notifications system) in a progressive way.
We are really excited to be working with the team as their launch into jQuery Mobile en force.
Here are some more details on the goals of jQuery Mobile from Mr. John Resig himself:
"The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework.
Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.
Right now we're working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year.
If you wish to help, please join the discussion in the jQuery Mobile Community.
Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs)."
It has been enjoyable to see the great touch and mobile support that YUI 3.2 is adding, and we look forward to hosting the Dojo team at Palm for one of their events. Sencha Touch and SproutCore are showing us that Web applications can feel like "native" apps on other platforms. All in all, the future for a cross platform Web application world is bright. We look forward to working with the entire community to make it happen.
Wednesday, June 30th, 2010
Category: CSS, JavaScript, jQuery
Franz Enzenhofer has created a nice new webkitTransform plugin that helps you manage transforms and state.
Franz tells us more:
With jQuery.css you can't easily change the webkitTransform CSS because webkitTransform is not your average CSS.
If in one step you add .css('-webkit-transform', "rotate(20deg)") and in the next step .css('-webkit-transform', "scale(2.0)") the rotate value gets reset, as you have rewritten the complete -webkit-transform CSS value.
You could use the WebKitCSSMatrix javascript element, but it's currently buggy, not consistently implemented and a pain to use.
Additionally you can't just retrieve the '-webkit-transform' css with .css('-webkit-transform') as this just gives a matrix code.
Our goal with webkitTransform() was to fix this problem. With it, every element you assign webkit-transform css with can be edited in a simple way, without resetting every other -webkit-transform values.
Monday, May 17th, 2010
Category: JavaScript, Library, jQuery
James Burke is moving quickly with his RequireJS library. He recently posted about the requirements that John Resig has for a script loader for jQuery:
- script loading must be async
- script loading should do as much in parallel as possible. This means in particular, that it should be possible to avoid dynamic nested dependency loading.
- it looks like a script wrapper is needed to allow #1 and #2 to work effectively, particularly for cross-domain loading. It is unfortunate, but a necessity for script loading in browsers.
With the RequireJS 0.11.0 release James feels like he has the features to make that real:
James mentioned a server side scanning tool.... and Kyle Simpson (of LABjs) is almost ready to show something there too.
Thursday, April 29th, 2010
Category: jQuery
Corey Hart has a fun post on jQuery micro optimization tips by walking through the jQuery codebase to see what is running.
Right away he notes that these are true micro optimizations, and to "use with caution and balance elegance with performance correctly." Chances are you are a lucky chap if these are the biggest issues for performance on your application!
The post is still interesting as it shows a lot of jQuery core itself. I would think that Mr. "inline it" Dalton would approve of some of these tips :)
- jQuery.root: Internally, all selectors that don't provide a context use jQuery( document ).find( selector ). Save yourself some ms, store the document root onto jQuery itself, and then run all global selectors off of that element.
- Context sucks, use find: Don't get me wrong, you should always run selections based on a context if possible. But passing in a context to the jQuery constructor creates an extra unneeded function call. Internally jQuery runs context.find( selector ) anyway, so skip that step
- Live is terrible, delegate is awesome: The best part: delegate is live with a context. So why is live a bad idea? To use live, you first have to run a selection on the page, and then bind the live handler.
- jQuery.data > jQuery.fn.data: avoid jQuery(this)
- Bind and Trigger, get used to it: don't use the short cut methods, save a function call
- Each is evil: there is only one true reason to use each, and that is when a closure is needed for each item. If you are just looping through an array, then the callback function gets triggered on every iteration. So using an array of 25 items, the callback gets triggered 25 times.
- Classes over styles: I would go so far as to say that using a class for a single style change is better than running through jQuery's style module.
- Object.length, use it: Every jQuery selection comes with a length property that defines how many elements were found. Always check to make sure that there is a set of elements in your object before running a chain of methods.
Friday, April 16th, 2010
Category: Canvas, JavaScript, jQuery
How do you visualize data in interesting ways but allow the data to be accessible for all? The jQuery Visualize work is the latest library that groks HTML and replaces the table with pretty graphs:
The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.
Someone pointed out that "accessible" means many things. If you have a 10,000 row table, it may not be easy to consume.... but hey!
Monday, March 29th, 2010
Category: JavaScript, jQuery
Ben Alman has a mother of a post on his special events work for jQuery. I have a special penchant for custom events and the like, even though I have abused them just as I did in the old days of AOP! :)
What are special events?
The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered—these “special” events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.
He does into intrigue detail on the API and gets to show you how to implement the hello world of custom events: tripleclick:
JAVASCRIPT:
(function($
){
// A collection of elements to which the tripleclick event is bound.
var elems = $([]);
// Click speed threshold, defaults to 500.
$.tripleclickThreshold = 500;
// Special event definition.
$.event.special.tripleclick = {
setup: function(){
// Initialize the element plugin data, including clicks counter and
// last-clicked timestamp.
$(this).data( 'tripleclick', { clicks: 0, last: 0 } );
// Add this element to the internal collection.
elems = elems.add( this );
// If this is the first element to which the event has been bound,
// bind a handler to document to catch all 'click' events.
if ( elems.length === 1 ) {
$(document).bind( 'click', click_handler );
}
},
teardown: function(){
// Remove all element plugin data.
$(this).removeData( 'tripleclick' );
// Remove this element from the internal collection.
elems = elems.not( this );
// If this is the last element removed, remove the document 'click'
// event handler that "powers" this special event.
if ( elems.length === 0 ) {
$(document).unbind( 'click', click_handler );
}
}
};
// This function is executed every time an element is clicked.
function click_handler( event ) {
var elem = $(event.target),
// Get plugin data stored on the element.
data = elem.data( 'tripleclick' );
// If more than `threshold` time has passed since the last click, reset
// the clicks counter.
if ( event.timeStamp - data.last> $.tripleclickThreshold ) {
data.clicks = 0;
}
// Update the element's last-clicked timestamp.
data.last = event.timeStamp;
// Increment the clicks counter. If the counter has reached 3, trigger
// the "tripleclick" event and reset the clicks counter to 0. Trigger
// bound handlers using triggerHandler so the event doesn't propagate.
if ( ++data.clicks === 3 ) {
elem.trigger( 'tripleclick' );
data.clicks = 0;
}
};
})(jQuery);
There is a lot in his article, so give it a once over.
Wednesday, March 24th, 2010
Category: jQuery
jQuery UI 1.8 has been released and it contains new plugins, a new effect, bug fixes, and is forkable on GitHub
What's new?
Position utility
Position any element relative to any other, or even relative to the window or the mouse. In true “Write Less. Do More” fashion, it’s a simple as selecting the element you want and saying which part of it should be positioned relative to which part of another element. Bam.
Button widget
The button widget creates a themable button from any imaginable element you might be using as a native button. Progressive enhancement all the way. Now your <button> will look like your <input type=”submit”> will look like your <a class=”button”>. We updated jQuery UI widgets that have buttons, such as Dialog, to use the button plugin when you’ve opted to include it. Otherwise, they’ll remain native button elements. Again thanks to PE this is as unobtrusive as possible. Thanks to Filament Group for figuring out how to do this and Jörn Zaefferer for making it happen. And of course the community as a whole for providing feedback during early design/dev and later dev/testing. We’re stoked about having pretty form elements, and button is the first step.
Autocomplete widget
Now you can make any text input pop up a menu to aid the user in completing a text entry or search box, providing suggestions or allowed values. The autocomplete is designed and built based on the popular Jörn Zaefferer’s Autocomplete. As with the button widget we’ve kept the API as minimal as possible while providing the hooks necessary to customize it based on your needs. For example, you can provide static local data using the source option, or provide a callback function as the data source which can handle getting data from a server via Ajax. Single option, overloaded. This is the new way we’ll be writing and refactoring all of our widgets going forward, and we’re excited to hear what people think. It’s quite a change, but should keep the library lean while still as flexible and powerful as possible.
Monday, March 22nd, 2010
Category: Library, jQuery
Spritely is a new jQuery plugin that adds sprite() and pan() to your $().
The fun front page of birds is explained with simple goodness of:
JAVASCRIPT:
// animate through 3 frames
$
('#bird').
sprite({fps:
12, no_of_frames:
3});
// clicking on the screen flies a sprite to you
$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();
// random movement
$('#bird')
.sprite({fps: 8, no_of_frames: 3}
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});
The library is very new with 0.1 stable and 0.2 preview out.
Also check out this demo and follow them.
Tuesday, March 16th, 2010
Category: Microsoft, jQuery
Update: Here is a full set of release notes on the platform preview (called that as it is more of a shell than a browser.
Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn't see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).
John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:
HTML:
<script type="text/javascript">
var product = { name: "Laptop", price: 788.67 };
$(showProduct);
function showProduct() {
$("#results").html( tmpl("productTemplate", product) );
}
function formatPrice(price) {
return "$" + price;
}
</script>
<script type="text/html" id="productTemplate">
Product Name: <%= name %>
<br />
Product Price: <%= formatPrice(price) %>
</script>
<div id="results"></div>
updated with info from Microsoft press release:
As part of Microsoft’s broad engagement with open source communities, Corporate Vice President Scott Guthrie today announced that Microsoft is investing resources to contribute to the development of the jQuery JavaScript Library to help improve the development process of standards-based Web applications. Microsoft will also work to provide better interoperability between ASP.NET and the jQuery JavaScript Library by enhancing ASP.NET so .NET developers can better incorporate jQuery capabilities. In addition, Microsoft will actively promote and distribute versions of the jQuery JavaScript Library by packaging it with popular products such as Microsoft Visual Studio 2010 and ASP.NET MVC 2. As a first step, Microsoft will contribute a templating engine to the jQuery JavaScript Library Team to simplify Web applications.
It is early days (preview release) but great to see a solid go at it here. I *really* want the IE9 team to help us put the Silverlight team out of business :)
Friday, March 5th, 2010
Category: Library, YUI, jQuery
I just came across this wonderful Gist on gitHub:
JAVASCRIPT:
var $;
YUI().use('*', function(Y){
$ = Y.get;
for(var p in Y) {
$[p] = Y[p];
}
});
// test
$('body').append("boo!");
In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?
Friday, February 19th, 2010
Category: JavaScript, jQuery
jQuery 1.4.2 has been released today and it comes with some performance bumps (aggressive ones according to Taskspeed). Benchmarks are challenging, and John even calls that out:
For example, we saw significant overall performance speed-ups in Taskspeed simply by optimizing the $("body") selector because it’s called hundreds of times within the tests. Additionally we saw large gains by optimizing .bind() and .unbind() by a fraction of a millisecond – an inconsequential amount – especially considering that any cases where you would bind hundreds of events you would likely want to use .live() or .delegate() instead.
There are some new APIs a bunch of them around ergonomics:
In this release we’ve added two new methods: .delegate() and .undelegate(). These methods serve as complements to the existing .live() and .die() methods in jQuery. They simplify the process of watching for specific events from a certain root within the document.
For example:
JAVASCRIPT:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
This is equivalent to the following code written using .live():
JAVASCRIPT:
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
Additionally, .live() is roughly equivalent to the following .delegate() code.
JAVASCRIPT:
$(document).delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
The jQuery team continues to really put the pedal to the metal.
Thursday, February 18th, 2010
Category: JavaScript, jQuery
Jacek Galanciak has created a nice visual transition library, Quicksand, that filters and shows a set of data in an interesting way.
The jQuery plugin has you quickly calling quicksand like this:
JAVASCRIPT:
$('#source').quicksand( $('#destination li') );
and you have the data to transition between:
HTML:
<ul id="source">
<li data-id="iphone">iPhone OS
</li>
<li data-id="android">Android
</li>
<li data-id="winmo">Windows Mobile
</li>
</ul>
<ul id="destination" class="hidden">
<li data-id="macosx">Mac OS X</li>
<li data-id="macos9">Mac OS 9</li>
<li data-id="iphone">iPhone OS</li>
</ul>
You can customize the effect (set the easing, setup data, and the like). Seethe docs and demos for more.
Tuesday, February 9th, 2010
Category: CSS, Geo, jQuery
One of the things I always want to do with online maps is rotate them - I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too.
Whilst Google supports this in the satellite and hybrid maps, the basic ones still can't be turned. Which is why I took CSS3 transformations (wrapped in a very useful jQuery plugin) and voila - rotating is possible:
Read more about the implementation and some of the things that need fixing in the original blog post about map rotation.
Friday, January 15th, 2010
Category: JavaScript, Library, jQuery
The incredibly popular jQuery library has released jQuery 1.4 on a new website that will celebrate 14 days of jQuery.
There are a lot of new features, and as usual performance gains are showcased.
- Easy Setter Functions: For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods
- Ajax: A lot of enhancements to the various remoting functions including support for native JSON parsing, etags, request context, and more
- .css and .attr have been improved
- Per property easing on effects
- If you want to ensure that “this” inside a function will be permanently bound to a particular value, you can use jQuery.proxy to return a new function with that scope
- New events: focusin and focusout
And Joe Walker will be really excited to see that dojo.create has made it in! :)
JAVASCRIPT:
jQuery("<div />", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");
Congrats to the jQuery team. I look forward to seeing posts over the next 2 weeks that go into more detail on the new coolness.
Monday, January 11th, 2010
Category: JSON, JavaScript, XmlHttpRequest, Yahoo!, jQuery
OK, this is nothing shockingly new, but I found it pretty useful. Using jQuery, Ajax has become more or less a one-liner:
JAVASCRIPT:
$(document).ready(function(){
$('.ajaxtrigger').click(function(){
$('#target').load($(this).attr('href'));
return false;
});
});
This loads the document any link with a class of "ajaxtrigger" points to and updates the content of the element with the ID "target". If the link is a third party link on another domain it fails though - and silently at that. Normally you'd work around that with a server-side proxy, but you can actually do without it.
YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. For example to load http://bbc.co.uk you'd use the following statement:
CODE:
select * from html where url='http://bbc.co.uk'
As a URL this turns into:
CODE:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Fbbc.co.uk'%0A&format=xml
You could request JSON-P by setting the output format to json and define a callback, but that would give the HTML back as a massive object which is not nice. YQL also offers JSON-P-X as an alternative which is a JSON object with a callback and the HTML as a string inside a simple Array. See it by clicking the following URL:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http%3A%2F%2Fbbc.co.uk%27%0A&format=xml&diagnostics=false&callback=foo
Now, using jQuery's getJSON() we can load this even without a named callback function. That way we can use one method for content that is third party and simply use load() for the other:
JAVASCRIPT:
$(document).ready(function(){
var container = $('#target');
$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));
return false;
});
function doAjax(url){
if(url.match('^http')){
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=xml'&callback=?",
function(data){
if(data.results[0]){
container.html(data.results[0]);
} else {
var errormsg = '<p>Error: could not load the page.</p>';
container.html(errormsg);
}
}
);
} else {
$('#target').load(url);
}
}
});
You can see the demo in action here, more details are available on my blog and the source is available on GitHub.
Next Page »
