July 20th, 2005
So—what’s new?
Changes from 1.0.0:
- Fixed rendering of last frame of animation when from/to is not 0.0/1.0. [thanks to David Zülke]
- Added returning the generated combined effects to allow for .cancel() on all effects
- Updated Ajax.Autocompleter to deal with parameters options correctly [Martin Marinschek]
- Added incremental and local autocompleting and loads of documentation to controls.js [Ivan Krstic]
- Fixes various (possible) memory leaks with IE and Mozilla
- Make effects.js, dragdrop.js and controls.js compatible with some 3rd-party JavaScript libraries (like IE7) by refactoring to use Object.extend() [David Zülke]
- Make Effect.Highlight restore any previously set background color when finishing (makes effect work with set CSS classes)
- Added capability to remove draggables/droppables and redeclare sortables in dragdrop.js
- Added Effect.ScrollTo to smoothly scroll the page to an element
- Better Firefox flickering handling on SlideUp/SlideDown
- Added support for cancelling dragging my hitting ESC
Changed logic of drag-and-drop to only include the last referenced droppable when firing a drop event. This change also offers slight performance gains. [Dominik Wagner]
Download on script.aculo.us!
July 19th, 2005
With rich internet applications, that look and feel like desktop apps, you’ll sooner or later run into the problem of browser text-selection, especially if you use some more advanced UI interaction.
You often just want it off because it gives your users no advantages in usability but messes with the layout, and can make images grayed-out or text unreadable.
So, here’s a quick remedy to this (requires the most current version of the Prototype JavaScript library), which will also allow your users using text-selection in input boxes and textareas as usual:
if(/MSIE/.test(navigator.userAgent)) {
document.onselectstart = function(event) {
if(!/input|textarea/i.test(Event.element(event).tagName))
return false;
};
} else { // assume DOM
document.onmousedown = function(event) {
if(!/input|textarea/i.test(Event.element(event).tagName))
return false;
};
}
You can also extend this to allow more elements having text selection. So, if you want paragraphs have text selection, too, just change the regular expression to:
!/p|input|textarea/i
Or you could implement your own testing function that can do checks on more stuff, like CSS class names or specific ancestor elements.
NB: This kind of thing shouldn’t ever be used on normal websites where the user expects that text and image selection is working. It’s strictly for specialized web apps, where text-selection can interfere with enhanced/customized UI elements. No user wants to copy the text from the submit button, or the ‘drag’ text from a dragging handle. But they will want to be able to copy other text contents from the app, besides expecting text input boxes and textareas to work as they should.
July 17th, 2005
Get some nice “Witz und Musik” with the comedy radio show two friends of mine do: Radio Koffer!
Radio Koffer – Die Sendung mit dem Namen (Odeo, german language)
Visit the site too, it’s a Ruby on Rails Typo weblog of course. Hopefully we get to customize it by end of July or so. 🙂
July 15th, 2005
There’s a new page on the Ruby on Rails Wiki to have some overview about what your wishes are for addtions in upcoming releases of script.aculo.us.
Addtionally, infos on current in-progress component developments (like the coming-soon addition of sortable trees) can be found there.
For bug reports and general discussion, please use the Rails-spinoffs mailing list.
July 13th, 2005
The final version of the required reading for Rails developers book, Agile Web Development with Rails is now available!
Maybe help raise the sold in sixty five countries to include some more locations. The sun never sets in Rails land (as you can experience on the ever growing IRC channel, too).
Good work, Dave!
July 6th, 2005
And it’s hot, with loads of new features, improved performance, countless fixes and tweaks—simply a must have!
Read the offical announcement!
July 6th, 2005
With the imminent release of Ruby on Rails 0.13 (the beta gems release candidate is out already!) comes my brand new demo site to show you what you can do in just a few lines of code.
So, hop over to http://script.aculo.us/demos/ to get a grip on the new AJAX helpers for auto completing text fields, sortable elements and drag-and-drop.
July 2nd, 2005
With the new drag-and-drop helpers coming with Ruby on Rails 0.13, you’ll be able to silly easily do stuff like this:
You know the drill, watch the video!
The above demo amounts to about 25 lines of code, including database acccess, session-based cart storage, add/remove items handling and the view rendering code (static HTML and CSS not counted).
It relies on the brand new draggable_element and drop_receiving_element helpers, that internally use the script.aculo.us libraries.
The code for making the product images draggable look like this:
<% for product in @products %>
<%= image_tag "/images/products/product#{product.id}",
:id => "product_#{product.id}",
:alt => product.title,
:class => "products" %>
<%= draggable_element "product_#{product.id}", :revert => true %>
<% end %>
And the cart drop handling code amounts to two helper calls:
<%= drop_receiving_element "cart",
:update => "items", :url => { :action => "add" },
:accept => "products", :hoverclass => "cart-active",
:loading => "Element.show('indicator')",
:complete => "Element.hide('indicator')" %>
<%= drop_receiving_element "wastebin",
:update => "items", :url => { :action => "remove" },
:accept => "cart-items", :hoverclass => "wastebin-active",
:before => "Element.hide(element)",
:loading => "Element.show('indicator')",
:complete => "Element.hide('indicator')" %>
A partial serves to list the items in the cart:
<% session[:cart].each do |product,quantity| %>
<div>
<% quantity.times do |i| %>
<%= image_tag "/images/products/product#{product}",
:class => "cart-items",
:id => "item_#{product}_#{i}" %>
<%= draggable_element "item_#{product}_#{i}",
:revert => true %>
<% end %>
<span class="title">
<%= Product.find(product).title + " (#{quantity})" %>
</span>
</div><% end %>
Hope you put this stuff to good use!
July 1st, 2005
To sweeten the waiting time to the next Rails release, here’s a short movie showing the new sortable_element helper in action:
AJAX sortable element movie
The code for this is actually a one-liner (including the effect). In your view do:
<%= sortable_element 'list',
:update => 'list-info',
:complete => visual_effect(:highlight, 'list'),
:url => { :action => "order" } %>
The list element is just a normal HTML unordered list (but you could do this with other element types, too). The list items have ids themselves, in the form of something_number, e.g. item_1.
When the list order changes by dragging-and-dropping, these numbers will be posted to the given action via AJAX.
The referenced action order then just reads out the order by querying params[:list], which is an array consisting of the numbers in the current order.
June 29th, 2005
Actually, it’s less than 3 minutes. But watch the video for yourself:
Autocompleting text fields with 2 lines of code video
The video shows how to use auto_complete_for and the text_field_with_autocomplete helper in the up-and-coming next Ruby on Rails version.
Update (second version of video): With a tiny bit more effort, you can even do something like this:
Customized autocompleting text fields with some more lines of code video
2. Update: A more detailed tutorial and another video on how to use this can be found on Adrian Agafiteis weblog!
The AJAX autocompleter itself is a part of the script.aculo.us web 2.0 javascript libs—and can be used independently of Rails (if you really want to, that is).
