Thursday, October 9th, 2008
Category: JavaScript
, jQuery
Pastebins have become an important part of sharing code with colleagues. Sites such as Pastebin & Pastie.org are extremely popular because they’re easy to use and very effective in letting people compare notes on source code, especially in a support setting.
Remy Sharp wanted to take the pastebin concept a step further, past the static posting of code. His idea, which he tossed around for 6 months, finally came to fruition in the form of JS Bin, a new pastebin site with a twist:
JS Bin is a form of paste bin, but with a twist. It allows you to also include the HTML and CSS to provide context to your pasty. As such, it means you can actually run the JavaScript and pass this on to a colleague to help to debug.
This is a great idea as it lets you troubleshoot your code while seeing immediate results. The feature list is well thought out as well.
- Save private snippet
- Remote Ajax debugging
- Snippet URLs run entirely on their own (i.e. without the JS Bin framework around them)
- Support to quickly inject major JS libraries including jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, MooTools & YUI
- Saves state within the open window (i.e. refresh and the code doesn’t reset)
The ability to inject many of the popular JavaScript libraries is especially important and I would highly recommend individual project teams to contact Remy directly to have their libs included.
To give this a run, I’d suggest going to the JS Bin site and putting it through its paces. In addition, Remy has produced two videos which go into detail on how to leverage JS Bin:
Wednesday, October 8th, 2008
Category: Canvas, Showcase, jQuery
Gasman has created Antisocial, a very enjoyable demo of Canvas doing fake 3d and 2d along with that ZX Spectrum sound that you loved as a kid.
Check out the tool to see where the magic happens, and make some music, Spectrum style!
I feel like we have been light on showcases recently, so please email us if you have seen a cool use of Ajax that we haven’t picked up on!
Tuesday, September 30th, 2008
Category: jQuery
BigTarget.js is a new little jQuery plugin that makes bigger targets for users:
Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.
The concept is simple:
- Attach the plugin to any link in the content block.
- Pass through the click zone selector as a plugin option.
- The plugin then attaches
onclick and hover events to the click zone.
- User clicks anywhere on the click zone.
- The original link
href is retrieved.
- If the link has a
rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.
You can easily add this behaviour via the plugin:
JAVASCRIPT:
-
-
// simple
-
$(document).ready(function(){
-
$("ol.bigTarget h4 a").bigTarget();
-
});
-
-
// and you can customize it
-
$(document).ready(function(){
-
$("ol.bigTarget h4 a").bigTarget({
-
hoverClass: 'over', // CSS class applied to the click zone onHover
-
clickZone : 'div:eq(0)' // jQuery parent selector
-
});
-
});
-
Sunday, September 28th, 2008
Category: .NET, Ajax, jQuery
Just as jQuery kicks off its first jQuery conference adjunct with The Ajax Experience in Boston tomorrow, it gets an energy boost from some big double-barrel news:
Microsoft and jQuery
Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).
Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.
Scott Guthrie talks about the news and details some of the features. His blog shows intellisense at work, and more.
Scott Hanselman then wrote an tutorial that shows jQuery working with ASP.NET libraries such as the ASP.NET AJAX 4.0 Client Template work.
Here is the sample code that shows the weaving of jQuery and Client template APIs. The script src at the top is to an "intellisense" version of jQuery, which includes the addition of special comments to make Intellisense work. The Open Ajax Alliance is trying to standardize on this metadata so we can share it between the various tools (e.g. Aptana has a very nice sdoc that does this, and allows you to put it external to the file so you don't have to have clients download it).
JAVASCRIPT:
-
-
var bikes;
-
Sys.Application.add_init(function() {
-
bikes = $create(Sys.UI.DataView, {}, {}, {}, $get("bikes"));
-
$(".colorfilter").click(function(e) {
-
LoadBikes($(this).val());
-
});
-
LoadBikes();
-
});
-
-
function LoadBikes(q) {
-
qq= q|| "Red";
-
var svc = new Sys.Data.DataService("bikes.svc");
-
svc.query("/Products?$filter=Color eq '" + q + " '&$top=5", OnProductsLoaded);
-
}
-
-
function OnProductsLoaded(result) {
-
bikes.set_data(result);
-
-
$("ul li:even").css("background-color", "lightyellow");
-
$("ul li").css("width", "450px").css("font-size", "12px");
-
-
$("div.bikerow").mouseover(function(e) {
-
$(this).animate({
-
fontSize: "18px",
-
border: "2px solid black"
-
}, 100);
-
}).mouseout(function(e) {
-
$(this).animate({
-
fontSize: "12px",
-
border: "0px"
-
}, 100);
-
});
-
-
}
-
Sys.Application.initialize();
-
Nokia and jQuery
Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.
To start Nokia will be moving a number of their applications to work on the run-time (such as Maps) and building them using jQuery. jQuery will become part of their widget development platform, meaning that any developer will be able to use jQuery in the construction of widgets for Nokia phones.
How will these companies work with the project?
Microsoft and Nokia aren’t looking to make any modifications to jQuery (both in the form of code or licensing) - they simply wish to promote its use as-is. They’ve recognized its position as the most popular JavaScript library and wish to see its growth and popularity continue to flourish.
In fact their developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.
A significant level of testing will be added to the project in this respect. The jQuery test suite is already integrated into the test suites of Mozilla and Opera and this move will see a significant level of extra testing being done on Internet Explorer and WebKit - above-and-beyond what is already done by the jQuery team.
This is great news for the jQuery project.
4.2 rating from 127 votes
Friday, September 12th, 2008
Category: JavaScript, jQuery
Remy Sharp gives us a blast form the past for the some Friday fun.
First, he shows his Marquee plugin that gives you the marquee effect. Why would you do this when the marquee tag itself is widely adopted?
Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it's built directly in to the browser).
You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari - let alone IE6.
It is simple to use, and gives you hooks to do more:
JAVASCRIPT:
-
-
// Hello World
-
$('marquee').marquee();
-
-
// Adding fun
-
$('div.demo marquee').marquee('pointer').mouseover(function () {
-
$(this).trigger('stop');
-
}).mouseout(function () {
-
$(this).trigger('start');
-
}).mousemove(function (event) {
-
if ($(this).data('drag') == true) {
-
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
-
}
-
}).mousedown(function (event) {
-
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
-
}).mouseup(function () {
-
$(this).data('drag', false);
-
});
-
Or, you could get into a lot of trouble and reimplement blink:
JAVASCRIPT:
-
-
$(function () {
-
setInterval(function () {
-
$('blink').each(function () {
-
this.style.visibility = this.style.visibility == 'hidden' ? 'visible' : 'hidden';
-
});
-
}, 1000);
-
});
-
Friday, September 5th, 2008
Category: jQuery
The data grid above is a jQuery plugin jTPS that creates a table you can sort and page through, using nice animations, all via a simple call out:
JAVASCRIPT:
-
-
$(document).ready(function () {
-
$(’#TABLETOCONTROL’).initTable( {perPages:[5,12,15,50,'ALL']} ).controlTable();
-
});
-
Wednesday, September 3rd, 2008
Category: JavaScript, Testing, jQuery
Chad Myers has a simple look at GUnit, the jQuery based unit test framework. His article explains how to get going, and walks through a test like this:
JAVASCRIPT:
-
-
module("Show and Hide");
-
-
test("should hide the element when hide is called", function(){
-
-
$("#testDiv").hide();
-
-
// actual, expected
-
equals($("#testDiv").css("display"), "none", "The element should be hidden");
-
});
-
-
test("should show the element when show is called", function(){
-
-
// Arrange
-
$("#testDiv").css("display", "none");
-
-
// Act
-
$("#testDiv").show();
-
-
// Assert
-
// actual, expected
-
equals($("#testDiv").css("display"), "block", "The element should be visible");
-
});
-
Tuesday, September 2nd, 2008
Category: JavaScript, Tip, jQuery
Nathalie Downe has taken Simon Willison's json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link.
Once in place, you simple do your usual link, and asynchronously the Web page will be updated to look like "your pdf link (pdf 2.8 MB)".
JAVASCRIPT:
-
-
jQuery(function($){
-
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
-
// looking at the href of the link, if it contains .pdf or .doc or .mp3
-
var link = $(this);
-
var bits = this.href.split('.');
-
var type = bits[bits.length -1];
-
-
-
var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
-
-
// then call the json thing and insert the size back into the link text
-
$.getJSON(url, function(json){
-
if(json.ok && json.headers['Content-Length']) {
-
var length = parseInt(json.headers['Content-Length'], 10);
-
-
// divide the length into its largest unit
-
var units = [
-
[1024 * 1024 * 1024, 'GB'],
-
[1024 * 1024, 'MB'],
-
[1024, 'KB'],
-
[1, 'bytes']
-
];
-
-
for(var i = 0; i <units.length; i++){
-
-
var unitSize = units[i][0];
-
var unitText = units[i][1];
-
-
if (length>= unitSize) {
-
