jQuery-UI.toggleSwitch() - UX Lab 005

The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don’t want the extra bloat of yet another library. It draws upon the theme .ui-slider for the look and feel, and can be applied to <select>  elements with two child options.

Configuration options and examples are contained within the UX Lab page. I guess this warrants it’s own GitHub repository for change management and issue tracking. I’ll get around to that eventually.

 

A Sneak Peak at Aristo 2 As the Cappuccino Conference in the states winds down, a sneak peak at Aristo 2 was announced over Twitter. Frequent readers will remember that Sofa designed the original theme for the Cappuccino framework - and my jQuery UI theme was based off of this.  Not only does the update refresh familiar UI components, it also includes an exciting new icon pack. From what you can see below, they&#8217;re nothing to laugh at either. A preliminary count shows 108 icons available in the same glyph style no doubt popularised by iOS and now OS X. The changes have already been reflected in the design section of Sofa&#8217;s website, but the PSD on their GitHub repository remains unchanged. You can get a more in depth view of both the UI components and the icon set by downloading the sneak peak of Aristo 2. So Will I Be Making an Aristo 2.0 jQuery UI Theme? Initially, no. I think that the original Aristo theme is still travelling along quite nicely. The design direction the new theme is taking is not entirely different enough to warrant the extra time. It&#8217;s also worth considering that a lot of the unique touches in Aristo 2 don&#8217;t translate that well to jQuery UI themes. The modal and datepicker are just different enough to cause a few cross-browser headaches. Other components like checkboxes, radio buttons and dropdowns aren&#8217;t natively supported - even if popular plugins do exist. Hats off as usual to Sofa, it&#8217;s no surprise they were acquired by Facebook.
Pop-upView Separately

A Sneak Peak at Aristo 2

As the Cappuccino Conference in the states winds down, a sneak peak at Aristo 2 was announced over Twitter. Frequent readers will remember that Sofa designed the original theme for the Cappuccino framework - and my jQuery UI theme was based off of this.  Not only does the update refresh familiar UI components, it also includes an exciting new icon pack. From what you can see below, they’re nothing to laugh at either. A preliminary count shows 108 icons available in the same glyph style no doubt popularised by iOS and now OS X.

The changes have already been reflected in the design section of Sofa’s website, but the PSD on their GitHub repository remains unchanged.

You can get a more in depth view of both the UI components and the icon set by downloading the sneak peak of Aristo 2.

So Will I Be Making an Aristo 2.0 jQuery UI Theme?

Initially, no. I think that the original Aristo theme is still travelling along quite nicely. The design direction the new theme is taking is not entirely different enough to warrant the extra time. It’s also worth considering that a lot of the unique touches in Aristo 2 don’t translate that well to jQuery UI themes. The modal and datepicker are just different enough to cause a few cross-browser headaches. Other components like checkboxes, radio buttons and dropdowns aren’t natively supported - even if popular plugins do exist.

Hats off as usual to Sofa, it’s no surprise they were acquired by Facebook.

The Aristo theme for jQuery UI nudged up 1000 followers some time yesterday. Thanks for your support and contributions!
Pop-upView Separately

The Aristo theme for jQuery UI nudged up 1000 followers some time yesterday. Thanks for your support and contributions!

Aristo 1.2 Released

The latest release of Aristo closes some long term issues, as well as those introduced in my last commit. User comments expressed a need for styled inputs and text areas. My last commit included my implementation of these, but the selectors were too generic and were not sandboxed to any particular class. This has been recitified, and you will now need to place the “ui-form” class on a root element to inherit the styles.

  • Closed duplicate bugs for submit button styling. This was a major pain and I’ve had to use browser specific fixes. Submit buttons should now look the same as other buttons in IE8, IE9, Webkit, Firefox and Opera.
  • Some CSS3 snippets only had vendor prefixes (-moz and -webkit), and were not displayed in Opera. This led to some pretty inconsistent visual effects.
  • Sandboxed the form element styles. If you would like to use the default form styles with subtle box shadows etc, you now have to place the “ui-form” class on a parent element. 

As always: Demo or Download.

Aristo in the Wild

Here’s a simple list of places I’ve noticed my Aristo jQuery UI theme popping up - or received a tip off either here or on Hacker News. Are you using Aristo somewhere exciting?

Native Implementations

Derivatives

Aristo 1.1 Released

I woke up on Saturday morning to find about 2,000 new visitors to my blog and 22 email notifications of new Twitter and Tumblr followers. It turns out Aristo made it to the front page of Hacker News for the second time in it’s short lifespan, and in turn was tweeted about by some popular Twitter users.

HN users had some great suggestions in the comments section, and most of those have been implemented and are now live on the GitHub repo and demo page. The list of changes include:

  • Styled basic input and textarea fields.
  • Button hover effects now fade with CSS3 transitions (Webkit, Firefox & Chrome).
  • Put user-select:none; on buttons to give them a more native feel.
  • Prevented empty button links from sending you to the top of a page (confusing when in a modal).
  • Fixed auto-complete versus slider z-index bug by hard coding z-index. This may cause other problems, so be on the lookout.
  • Fixed background bleed through bug for the progress bar.

I hope this keeps you satisfied for a while :)

 

Aristo 1.0 Milestone Release

Great news! The Aristo theme for jQuery UI has hit a cleaner and more concise version 1.0 release! I was able to close some issues that were raised on the GitHub repo and do a few little house-keeping things I’ve been putting off. A list of changes made in this release include:

  • Converted the theme to use CSS3 gradients and effects where possible, greatly reducing the number of images used. Image fall-backs are still provided for Internet Explorer, which are not called by other browsers.
  • Three issues raised on GitHub have been closed, and another will be fixed in a future bug fix commit.
  • Updated the theme to work with jQuery UI 1.8.7 by re-basing the theme from the latest Theme Roller version.
  • Created a demo page hosted using GitHub static pages (a very handy little feature). 

In regards to the new CSS3 gradients and effects: I have deliberately chosen a stance of graceful degradation. The Wijmo library (based upon my and others’ work with Aristo) takes a more troublesome stance of “aggressive degradation”. Tough to replicate effects (such as the slider handle) are achieved with CSS3 effects that do not degrade well between browsers. The use of CSS3 overall comes at the cost of the pixel perfect precision that made the work of 280 North so great. Hopefully this is being worked on as we speak, but demo versions I have played with do need polish.

 

Aristo 0.8 + Minor Milestone

Icon courtesy: www.icondrawer.com

Aristo nudged up 250 GitHub followers recently, with the current count sitting at 254.

The 0.8 release is a minor update, fixing the buttons that were broken to a structural change to .ui-buttons in the jQuery UI 1.8.5 release. There are 3 open issues, but I haven’t had the time to look at these as of yet. I am still without internet following the big move to my new apartment, so thanks to those who pushed commits to the master.

jQuery UI Draggable Grid & Snap Callback

I had the unfortunate privilege of discovering a minor bug logic flaw in the jQuery UI $.draggable() function. But first, a bit of background: I’m working on a worklfow creation tool in which states are created and assigned actions. States can be linked via a four point anchor system, which is where things get a bit messy. Our draggable state DIVs are set up to use a 6x6 grid, meaning they physically snap while being dragged around the canvas area.

The problem: the drag callback function is fired before snapping and gridding is applied.

In the case of the workflow tool, raphaelJS arrows linking the states are rendered to the anchor points to demonstrate a relationship. If this redrawCanvas() function of mine is fired on the drag event, the snapped value has not yet been applied to the object. As a result, the arrows can be off by as much as 50% of a grid while dragging.

Above: An example of a grid-snapped state not aligning to its arrow.

Comments in the source code indicate this was intended for plugins and callbacks to alter the position value before it is applied:

Call plugins and callbacks and use the resulting position if something is returned


The hack: there’s no quick and easy future-proof way of fixing this for everyone, so I slipped in my own little callback into the source. It’s not ideal, but it works perfectly for our needs. In line 178 of jquery.ui.draggable.js I entered the following:

        if(this.options.snapCallback) {
            this.options.snapCallback();
        }

And then it’s just a matter of changing your:

   drag: function() { }

To a snapCallback, ensuring it will run once the position has been applied to the objects:

   snapCallback: function() { }

Alternatively, your code can remain in the ondrag event - but moving it to the snapCallback ensures the styles have been applied and the DOM is updated. If anyone has a better idea (moving the drag trigger would break plugins) then please do let me know!