Never noticed this before: the auto-complete appears under the slider handles (Chrome 10). Shall test for other browsers in a bit...
edit:
Chrome 12 Canary: same as Chrome 10
IE9 beta: Handles on top, buttons look fine, though no text shadow. "<>" are poorly anti-aliased.
IE9 beta in compatibility mode: auto-complete on top (?), but buttons (aside from href) are full-width. "<>" are poorly anti-aliased.
FF4 rc: Handles on top. "<>" are poorly anti-aliased.
FF3.6.15: Handles on top. "<>" are poorly anti-aliased.
There have been plenty of bugs in Safari which couldn't be reproduced in Chrome, and vice versa.
Also, many mobile platforms have web browsers based on WebKit. Numerous differences can be observed between how these browsers render web pages. See PPK's "The Great WebKit Comparison Table" [0].
Checking the ul of the autocomplete has an inline z-index of 1 more than the input box (.zIndex( this.element.zIndex() + 1 )) which is 0+1 in this instance while the slider handles have a z-index of 2 (.ui-slider-handle).
Solid, goes to show the power of the jQuery UI theming framework. This uses even less images and more CSS3 than the last CSS3 implementation of Aristo, which wasn't built for jQuery UI:
Specifically, this one uses inner shadows to generate things like the slider bars without background-image, and most everything else is CSS3 gradients.
The blog post calls jQuery UI's default themes goofy--I won't contest they look dated, but you can get from there to near-Aristo quality by 1) decreasing the border-radius in ThemeRoller to 3px or 2px 2) only using handsome gradient backgrounds and 3) adding some more CSS rules to just add some inner glow, box-shadow and text-shadow on the better browsers. In fact, ThemeRoller could be fairly easily updated to support such things from within the graphical designer.
For example, this app editor interface is pretty much all vanilla jQuery UI, with only the slightest of enhancements in a separate file so themes could potentially be swapped out underneath:
I'm glad that the jquery UI version has improved. I think taitems was one of the first people to port it to css, so it's good to see they kept going.
Now maybe I can just start using the jquery UI version instead of the version I semi-maintain, as it probably does cross browser compatibility much better (in addition to a greater selection of widgets :)
G'day guys, the creator of this jQuery UI theme speaking. I'm working on this very idea, but I'm so very busy. The jQuerythemes.com domain was vacant for a while too, but some bastard bought it ;)
Actually this button simply takes you to the top of the page. The modal is not closed but rather out of sight. If you scroll down, you will be able to close it.
I agree completely! I am working on a much better variation fo this theme, but with much better layouts and without all the goofy default UI margins and padding.
As a warning, a lot of the controls seemed pretty broken on the iPhone. The auto-complete field totally screwed up Safari (couldn't de-select it), and the sliders were impossible to drag.
I believe this is an issue with jQuery UI, not this theme in particular. I remember that to get QuickFuse working on the iPad, we made a shim that wrapped the jQuery UI draggable so that it responded to touchstart, touchmove etc. events. jQuery Mobile is more suitable for these widgets if you are making a mobile-optimized app, though.
Hmm, curious why user-select: none; wasn’t applied to these buttons. Not sure why you would want to let people select text on UI elements e.g. by double-clicking a button — feels less “native” to see selections made on UI elements.
39 comments
[ 4.2 ms ] story [ 90.6 ms ] threadedit:
Also, many mobile platforms have web browsers based on WebKit. Numerous differences can be observed between how these browsers render web pages. See PPK's "The Great WebKit Comparison Table" [0].
[0] http://www.quirksmode.org/webkit.html
So it's not a browser problem.
Seriously, it does and most of the other controls work fine too.
I'm impressed everything else worked so well, Opera is usually neglected.
http://dtrejo.github.com/aristo/
Specifically, this one uses inner shadows to generate things like the slider bars without background-image, and most everything else is CSS3 gradients.
The blog post calls jQuery UI's default themes goofy--I won't contest they look dated, but you can get from there to near-Aristo quality by 1) decreasing the border-radius in ThemeRoller to 3px or 2px 2) only using handsome gradient backgrounds and 3) adding some more CSS rules to just add some inner glow, box-shadow and text-shadow on the better browsers. In fact, ThemeRoller could be fairly easily updated to support such things from within the graphical designer.
For example, this app editor interface is pretty much all vanilla jQuery UI, with only the slightest of enhancements in a separate file so themes could potentially be swapped out underneath:
http://quickfuseapps.com/app/edit
Now maybe I can just start using the jquery UI version instead of the version I semi-maintain, as it probably does cross browser compatibility much better (in addition to a greater selection of widgets :)
Edit: looking at the network, this one supports jquery 1.5.1: https://github.com/AugustCo/Aristo-jQuery-UI-Theme
http://news.qooxdoo.org/aristo-theme
It's actually pretty easy to make better jQuery themes.
A quick note though: Hitting the 'Change' button in the modal dialog does not get rid of the page overlay, making everything inaccessible. (Chrome 10)
http://gemdash.tumblr.com/post/3941893390/cupertino-a-jquery...
It's not great but I think it came out pretty good.