ilovecolors

Preserving radio button checked state during drag and drop with jQuery

Elio — Thu, 03 May 2012 11:00:25 +0000

Have you ever stumbled upon the issue of radio buttons losing their “checked” state while dragging and dropping a div containing them using the Sortable module of jQuery UI? It is not a pleasant experience and is a known issue even in jQuery 1.7.x bundled in WordPress 3.3 – 3.4. Read on to learn how to fix this.

The issue

If you have stumbled upon this, you surely know your way on jQuery so let’s go straight to the point: while using Sortable from jQuery UI, if you drag and drop an element containing radio buttons already checked, they will lose their state (their “checkedness”).

There are a bunch of solutions around, to detect the moment when you start dragging and then dropping, but a bit complicated. I found a solution on WordPress Trac but it was complicated since it requires to register a listener for mouse events and then trigger a click on the radio button that was previously checked.
We don’t need any that: the Sortable module has a callback that is triggered when you start dragging the element so we will use it and we will simply set the checked property on those radio inputs that were checked.
However, this solution was useful in their approach of storing a pointer of only those radio buttons that have been checked.

Fixing it

So let’s consider this code:

jQuery(document).ready(function ($) {

$('#tr-blocks').sortable({
        opacity: 0.5,
        helper: 'clone',
        placeholder: 'ui-state-highlight',
        start: function (e, ui) {
//The code you need begins here
            var radio_checked= {};
            $('input[type="radio"]', this).each(function(){
            	if($(this).is(':checked'))
            		radio_checked[$(this).attr('name')] = $(this).val();
            	$(document).data('radio_checked', radio_checked);
            });
        }
    }).bind('sortstop', function (event, ui) {
    	var radio_restore = jQuery(document).data('radio_checked');
    	for(radio in radio_restore){
    		$('input[id="'+ radio + radio_restore[radio]+'"]').prop('checked', true);
	}
//and ends here
    });

});

This will save only the names and value of checked radio buttons when user starts dragging using jQuery’s data. When the dragged element is dropped, the data is retrieved and each radio button that was checked before has its checkedness restored using prop.

Now, if you have a keen eye for details, you might have noticed this

$('input[id="'+ radio + radio_restore[radio]+'"]')

why not using the plain ID? like

$('#'+ radio + radio_restore[radio])

it was simply because my fields had this notation

#optionsSetName[subset]value

and for some reason using the traditional selector throw an empty array []. Didn’t paid too much attention as it was correctly fixed using the ID attribute, but I just want to clarify that maybe you won’t have to use this selector format.

Another option

Not exactly a fix but an alternative would be to use elements using JavaScript to add multiple select, autocomplete and more.

Chosen is available as a plugin for jQuery, Prototype and there’s a fork for MooTools.

Winners of Pixmac stock photo accounts loaded with US$ 99!

Elio — Thu, 12 Jan 2012 14:12:22 +0000

We’re kicking off the year with a sweet giveaway brought to you by Pixmac, one of the leading contenders in the stock photo arena, who is giving you the opportunity to win one of three accounts loaded with US$99 in credits!

Pixmac Stock Photos

Pixmac is one of the fastest, most usable and reliable microstock agency out there offering millions of images at budget prices. They offer photos from $1 with the ability to source, download and buy an image in less than 3 minutes, with no registration process.

Pixmac offers a fast, time-saving site with great customer service – they care about your deadlines empowering you with useful tools like the power search, and displaying images similar to the one you picked or even related images by tags.

Pixmac also has a free images section with more than 60,000 images for you to download.

Enter the Pixmac Contest

You can do one of the following to enter the contest:

Leave a comment below stating where you think you could use the Pixmac images
Tweet this post using this link mentioning me (just to alert me of your tweet)

Contest will run until next Monday 23. Good luck everyone!

UPDATE: The Winners!

The winners of the giveaway are

Commenters:

sminkkel
Ido Schacham

On Twitter:

rappelsnut

They will be contacted later by a Pixmac representative.

Thanks everyone for entering the giveaway!

Create your background patterns

Elio — Wed, 11 Jan 2012 00:34:12 +0000

BgPatterns is a background pattern creator with tools to set color, base pattern, rotation of motif and more.

Firefox Aurora introduces native developer tools

Elio — Sat, 03 Dec 2011 14:04:22 +0000

Firefox Aurora, the Firefox releases channel with the newest innovations now includes the new development tools so developers can inspect and tweak a web page’s HTML and CSS, accessing console, logs and even a nice feature called Scratchpad, to write JavaScript on the fly and execute it.

For a long time most developers relied on Firebug as their main development tool to edit web pages on Firefox. But the reality is that Firebug, understandably, is not being as actively developed as Chrome’s developer tools and they are starting to fall behind.

While I’ve moved from Firefox to Chrome as soon as it was released, I still used Firefox for a long time as my main development tool primarily due to Firebug. Since June this year, Chrome developer tools were dramatically improved, mainly in the user interaction of HTML and CSS editing. On top of that, it has (it always had) a much better design of the log of network transactions and resources than Firebug’s so it was a natural choice to completely shift to Chrome for all development.

Firefox will now try to regain web developers with the new built in tools, that look very interesting, specially the breadcrumb at the bottom with the ability to quickly select sibling elements.

You can install Firefox Aurora, the Firefox channel with the newest additions, enhancements and overall innovations, and try them today.

Web Design Resources – November 2011

Elio — Wed, 16 Nov 2011 20:57:09 +0000

It’s been a little quiet here lately, but here’s our monthly digest of web design tools, resources, articles and inspiration for November 2011.

Kern Type

http://type.method.ac/

Learn the basics of kerning with this simple online game.

Free font from FontShop for iOS

http://www.fontshop.com/freefonts

FontShop started offering fonts that are specifically hinted and optimized for iOS devices. They’re offering one weight of Basic Gothic Mobile typeface for free.

iOS 5 on iPhone 4S GUI PSD

http://www.teehanlax.com/blog/ios-5-gui-psd-iphone-4s/

Teehan+Lax have updated their popular iPhone GUI PSD to match the new iOS5 running in the iPhone 4S.

Solo: project management

http://thrivesolo.com/

Solo is an online project management suite. The design has been carefully crafted, is very clean, comfortable and includes cool tricks like SVG rollovers.

Docpool: share documentation

http://www.docpool.co/

An online repository of documents related to web design and development with items such as contract templates, invoices, project quoting and others.

HTML 5 for web designers

http://html5forwebdesigners.com/

The popular book about HTML 5 published by A List Apart and written by Jeremy Keith, now has an online counterpart where you can read it all for free.

HTML 5 Audio Player

http://codecanyon.net/item/simple-html5-audio-player-v1/495024

This is a sleek and lightweight audio player built in HTML 5 that supports OGG and MP3 audio formats. It provides a fallback for older browsers and you can include multiple instances of the player in your page.

CSS Animation

http://daneden.me/animate/

Animate is a CSS library with several cross-browser animations to use in your projects. The animations are supported by Chrome, Safari and Firefox. Animate is distributed under the MIT license so you can use it in your commercial projects.

Dart: structured web apps

http://www.dartlang.org/

The new language to build structured web applications created by Google, Dart, was finally released and although it’s an early release, it looks really promising.

Responsive carousel for jQuery

http://tympanus.net/Development/Elastislide/

Elastislide is a lightweight and easy to implement responsive slider built as a plugin for jQuery. It implements the Touchwipe Plugin that allows to swipe the images in the slider whenever you’re visiting the site in an iOS or Android device.

WordPress

Balita: free E-Commerce theme

http://www.smashingmagazine.com/2011/10/19/free-e-commerce-wordpress-theme-balita/

Smashing Magazine released a neat e-commerce theme for WordPress packed with features such as

jQuery Product Slider
Custom Shopping Cart
Ads Banner
Search Products
Blog Integration
Related Products

and much more. E-commerce done well is probably the next step for WordPress community. Jane Wells pointed some time ago that none of the currently options were genuinely “great”.

How to create tabs in the settings page of your WordPress theme

http://wp.smashingmagazine.com/2011/10/20/create-tabs-wordpress-settings-pages/

My first article for Smashing Magazine was published and it goes through the basics of implementing tabs in the settings page of your WordPress theme.

Inspiration

Boris Pelcer: lettering, illustration and design

http://www.borispelcer.com/index.php

Jordan Metcalf: design and art

http://www.jordan-metcalf.com/

Articles

Responsive Web Design Demystified

http://www.elated.com/articles/responsive-web-design-demystified/
Matt Doyle goes through all the aspects involved in creating responsive sites, from beginning to end.

Centering in the Unknown

Chris Coyier explains how to center an element when you don’t know any dimension of the surrounding elements.
http://css-tricks.com/14745-centering-in-the-unknown/

The author of the Lobster typeface seeks funding in Kickstarter

Elio — Mon, 31 Oct 2011 17:49:59 +0000

Pablo Impallari is best known for his Lobster font, one of the first typefaces freely available when Google Web Fonts launched. He is now seeking funds in Kickstarter for a new typeface project.

Pablo submitted a project to Kickstarter to design and implement Fast Brush Script as a full web font that will be available to use on your websites using the Google Web Fonts service.

Here’s what Pablo has to say about the font:

By avoiding typographical perfection, it stays more natural. The angles of the vertical strokes vary a little, and the positioning along the baseline jumps around, giving it a more rustic and natural feeling.

Most script fonts have long ascenders and descenders, and this means they look too small when used at normal sizes on the web. I will optimize this font in the technical details to be very readable as a web font, even when used as small as at 16 pixels.

The font will be hand-hinted by Google type experts so expect a high quality and beautiful script font to use on your sites.

Pablo Impallari can be reached at http://www.impallari.com or by following @pabloimpallari on Twitter.