Mark Gharibian's blog

script.aculo.us Tutorial

The folks over at Tutorials Point have posted a good tutorial for learning script.aculo.us on their site. The tutorial does well to cover the framework, includes lots of codes examples, and even has a W3C Schools style "try-it-yourself" editor to let you play with the demos. Get started with the tutorial by accessing the sections below:

  1. Short Overview: Gives a brief overview of script.aculo.us.
  2. Major Modules : List out all the modules supported by script.aculo.us.
  3. Visual Effects : Gives complete understanding on creation of visual effects using script.aculo.us.
  4. Drag & Drop: Explains Drag and Drop functionality in detail.
  5. Sorting Elements: Learn how to sort various elements using drag and drop functionality.
  6. Create Sliders: Yes, you can provide a multi purpose slider at your web site
  7. Auto Completion: Explains how to implement Auto Completion
  8. In Place Editing: Click and update in place using script.aculo.us.

If you step through the tutorial, let us know what you think, and if you know of any other good tutorials you'd like to share, send them our way!

jQuery UI 1.5 Beta Released

Tagged:  

The jQuery team has announced the first beta release of their new upcoming UI library - jQuery UI 1.5. This is a complete overhaul of the library, so you can expect to see some big changes. Here are some mentioned in the release notes:

  • A Unified API

    The API has been updated for all UI components. It should now be very easy to use other plugins if you’re familiar with one of them. There is only one exposed method for every plugin - All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument. You can now change and get all options at a later point if you want to by using the new data method. Basic example for draggables:


    $(..).draggable({...}); //Initialize the draggable
    $(..).draggable("disable"); //Disable the draggable
    $(..).data("cursor.draggable", "move") //Change the cursor during drag to 'move'

  • Updated Docs
  • Drag & Drop

    Draggables and Droppables have been completely refactored. It might now be the most non-destructive drag & drop implementation ever: The css position’s value will not be changed except for ’static’: That means that elements, that were static or relative, will not be forced into absolute positioning, which often destroyed layouts, especially when dealing with floats.

  • Sliders

    The slider wasn’t refactored, but has been completely rewritten from scratch. While it’s still almost backwards compatible, it’s now very stable and simpler than ever: The moveTo method now only takes two arguments: The value you want to move the handle to and optionally the index of the handle you want to move. Want to retrieve a specific handle value? No problem, just call $(..).slider(”value”, index) .

    Even better, the slider now is completely keyboard accessible: You can now tab and focus each slider handle separately and move its position using the left/right keys. We also improved support for using the mouse: Clicking into a empty area now moves the focused handle to the clicked position, regardless on how many handles you have.

  • Sortables

    Rewritten as well, the sortables now support a wide range of features you already know from draggables: cursor, zIndex, revert, opacity, axis, handles, containment and scrolling. Additional to that, you can now serialize your items to a url hash, and you now have the often requested ability to connect multiple sortables, so you can drag a node from one sortable to another.

  • and more...

Check out the docs and cool demos below:

Mouse Interactions:

Reusable Widgets:

Visit the jQuery Blog to read about this release and download the beta.

Firefox 3 Beta 3 Released

Tagged:  

Today, Mozilla released Beta 3 for Firefox 3. This is a developer preview release and is available for testing purposes only.

From Mozilla:

These beta releases are targeted to Web developers and our testing community to gain feedback before advancing to the next stage in the release process. The final version of Firefox 3 will be released when we qualify the product as fully ready for our users. Users of the latest released version of Firefox should not expect their add-ons to work properly with this beta.
...
Firefox 3 Beta 3 includes approximately 1300 individual changes from the previous beta, including fixes for stability, performance, memory usage, platform enhancements and user interface improvements. Many of these improvements were based on community feedback from the previous beta.

Check out the extensive list of features and enhancements found in Firefox 3 Beta 3, the known issues, and frequently asked questions.

Read the full release notes for Firefox 3 Beta 3

Download it here

jQuery 1.2.3 Released

Tagged:  

This is primarily a bug fix release for jQuery 1.2. Check out the bug tracker to see what was fixed.

This release is now compatible with Adobe AIR, and will be included in Drupal 6, and will be the base for jQuery UI 1.5. A couple minor features, for plugin developers, were included in this release.

Check out the release notes for new features and important additions included in this version and for more information about the alpha release of jQuery UI 1.5 and jQuery Enchant 1.0.

Download jQuery 1.2.3:

Yahoo! Live and It's API

Tagged:  

Amidst all the news swirling around about a hostile Yahoo! takeover, and the battle of the titans (Microsoft & Google), Yahoo! has released a new service - Yahoo! Live - a personal live streaming video service. [read more about Yahoo! Live at their blog]

Yahoo released an API [a set of Web Services and a couple of embeddable Flash objects] along with this new service. With this API, you can:

  • Find out who's broadcasting right now
  • Get data about past broadcasts
  • See snapshots of past broadcasts
  • Embed live video in your blog or web page

Do keep in mind that the service is currently in limited beta and is not always available.
You may get a message stating "Whoa! Yahoo! Live is an experimental release - we can tell you like the experiment! We're tuning now. Refresh, wait a few seconds, or click here to try again."

Read more about the Yahoo! Live API at the Yahoo! Developer Network and be sure to check out the Yahoo! Live Randomizer demo using REST/JavaScript.

IncludeJS - include and compress JavaScript easily

Justin Meyer has been working on a JavaScript library named IncludeJS and has released a 0.1 alpha 1 Developer package. IncludeJS lets developers include and compress JavaScript files easily. The hope for the library is "to bridge the gap between frameworks like jQuery/Prototype which guess at what you will most likely need, and frameworks like MooTools, which are great if you know exactly what you want and don't need to look in the source."

IncludeJS was originally a component of JavaScriptMVC - an open source JavaScript Model-View-Controller framework. The framework is going through some major changes and individual components are being extracted to make each individually useful.

Features of IncludeJS:

Relative paths.

Instead of including files relative to the current page's url,
IncludeJS includes files relative to your JavaScript files' urls.
Forget about scanning the page's script tags for your library's path.
IncludeJS lets you organize your scripts however you want.

Dynamic compression.

IncludeJS uses Dean Edwards packer
to automatically compress your
JavaScripts. Unlike server-side compression scripts,
compression is determined at runtime. This makes
it easy to compress large libraries with optional plugins.

Highlights.

- Consistant include order (last-in-first-out)
- FF 1.5+, IE 6+, Opera 9, Safari 3.
- Works with libraries like Prototype and jQuery.
- MIT license.
- 3 KB compressed.
- Files visible in Firebug.

Usage

1) Include the library in your page

<script src="include.js" type="text/javascript">
</script>

2) Include JavaScript files with the include function, files are relative to the including file and will be included in LIFO [last-in-first-out] order.

<script type="text/javascript">
   include( 'javascripts/prototype',
            'javascripts/myapplication'
   )
</script>

3) Compress your app by adding the line:

include.setup('compress')

before your includes, after the page loads you're presented with a compressed version of the code.

<script type="text/javascript">
   include.setup('compress')
   include( 'javascripts/prototype',
            'javascripts/myapplication'

   )
</script>

4) Run it! After you've saved the compressed version of the code, change the "compress" argument to "production" and specify the path to the newly created library as a second argument.

<script type="text/javascript">
   include.setup('production','path/to/prod')
   include( 'javascripts/prototype',
            'javascripts/myapplication'
   )

</script>

Visit the IncludeJS Homepage

Check out the demo over at JavaScriptMVC.com

More JavaScript/Ajax Cheatsheets

Tagged:  

Scott Klarr has posted a collection of some JavaScript/Ajax cheatsheets on his blog.

The cheatsheets include:

  • Javascript Cheat Sheets
  • jQuery Cheat Sheets
  • Scriptaculous Cheat Sheets
  • Prototype Cheat Sheets
  • Microsoft Ajax Library Cheat Sheets
  • Yahoo YUI Cheat Sheets
  • ...and more...
  • Click here to read the post and to download the cheatsheets.

Prototype 1.6.0.2 Cheat Sheet

Tagged:  

A new cheat sheet was posted today over at the Prototype blog that is current with all the updates in the recent release of Prototype version 1.6.0.2. Kangax, the author of the cheat sheet, even color coded deprecated 1.6 methods in red.

In the event that this is the first time you've heard of the Prototype 1.6.0.2 release, it happened a few days ago. It contains some bug fixes and performance enhancements, as well as official support for Opera 9.

Click here to read about [and download] the cheat sheet.

Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

Error Handling in JavaScript

Tagged:  

This article from Clientside discusses three types of error handling in JavaScript:

  • Graceful: if possible, just ignore the error and continue with some default state or without a meaningful value
  • Debug: throw a warning to the dbug.log method but continue otherwise
  • Break: Either explicitly throw an error or (more often) just let the error that is thrown at runtime be thrown

Graceful Examples
Graceful degradation includes some default behavior that occurs when data is missing or an expected result does not occur.

this.id = this.options.id || 'StickyWin_'+new Date().getTime();

A common practice of graceful error handling is to include Try/Catch statements

getContent: function(){
    try {
        new Ajax((this.options.ajaxLink || this.options.observer.href), $merge(this.options.ajaxOptions, {
                onComplete: this.show.bind(this)
            })
        ).request();
    } catch(e) {
        dbug.log('ajax error on PopupDetail: %s', e);
    }
}

Debug Example - warning the user

var ln = this.options.ajaxLinks.length;
if(ln <= 0) ln = this.options.details.length;
if (this.options.observers.length != ln)
    dbug.log("warning: observers and details are out of sync.");

Break Example - toss that exception

ret = Date.$months[month - 1] || false;
if (!ret) throw new Error('Invalid month index value must be between 1 and 12:' + index);

Read the full post over at Clientside

Syndicate content