Hey you!

Postcards are cool! Go send some ->

postme.me

jQuery imageless buttons a la Google take two

Feb 19 2009 Tags:

On Monday I released these buttons and as many of you noted I seriously didn’t do nearly enough testing and what’s worse, I even bragged about the fact. But some of you perhaps noticed my edits to the blogpost where I said I’d make it all better. Well, here’s Wednesday and I made it all better while still, as promised, spending much less time than Google probably did. Think I’ve spent under 20 hours for the whole thing from inception to finish (now). If you’re lazy just head over to the jQuery imageless buttons a la Google examples/documentation page.

Let’s start off with a screenshot of what the buttons look like on modern browsers

Imageless buttons on proper browsers

I spent a good deal of last night making sure they also look like this on many older browsers, in fact these are now officially supported:
Opera 9.6x
Firefox 3
Firefox 2
Safari 3
Safari 2
Internet Explorer 8 beta
Internet Explorer 7
Internet Explorer 6
Chrome

And I seriously hope that’s enough for your needs, if supporting all of those isn’t enough for you then I’m not certainit’s even possible to satisfy your needs. Personally I must admit I’ve learned a lot in getting all of these browsers to work. Most of all that Firefox 2 doesn’t have an inline-block, but rather a -moz-inline-block for some strange reason. It’s also interesting to not that Safari 2 and IE break when you have trailing commas in your lists of properties, which I’m used to so it’s easier to add stuff.

Anyhow, here’s what the buttons look like in Firefox 2

Imageless buttons in Firefox 2

And what they’re like Internet Explorer 6

Imageless buttons in IE6

I should probably also note that there are two known issues with the buttons. Namely that in Internet Explorer onchange events don’t work since it doesn’t allow firing them on noninput elements and that in IE the darker border on the right vanishes on activated buttons for some reason, I was simply too tired to hunt this one down and you know what, I can live with a minor glitch such as that.

Since you’re still reading, please head over to the jQuery imageless buttons a la Google examples now.

---
Need a freelance developer? Email me!

You should follow me on twitter
 Subscribe to RSS

17 responses so far

  • http://http%3A%2F%2Frobertbasic.com%2Fblog%2F Robert

    Cool 8) excellent work mate :) really nice :)

  • http://www.cyberblox.com Cyberblox

    Still not working in Firefox 3.0.6
    On the second line of examples on your example page, the buttons all run together.

  • Swizec

    @Cyberblox uhm nope. You’re probably still loading the old javascript from cache because I’ve tried on mac, linux and vista and it works. Others have tried and it worked for them too.

  • http://http%3A%2F%2Fandyjeffries.co.uk AndyJeffries

    As one of the people notifying you that the previous code didn’t work, I wanted to reply to this one saying that it now works great for me! :-)

    I’m a bit worried about the Safari hack at the top (setting padding and font-size on all span elements), what about if anyone actually genuinely uses spans in their document?

    Should this not be class filtered or some such thing?

    Anyway, great work though!

  • Swizec

    The Safari hack is a guideline. Naturally you should class filter it in production code.

    Maybe I should change the docs to mention that …

  • Evernoob

    Well done mate, glad it all worked out in the end :)

    I totally understand how you’d get so excited that you’d just post immediately without thorough testing, but I suspect a valuable lesson has also been learned.

    Lastly, don’t bash Google next time. It would have been far more gracious and humble to acknowledge their idea of initially conceiving these buttons and their efforts so far.

    Good job though :D

  • http://http%3A%2F%2Fsziebert.net Carl

    Looks like you’ve still got a bit of work ahead of yourself. Using the browser font resizing breaks your implementation, whereas the Google version resizes as expected.

  • http://hancic.info Jan%20Hancic

    I fail to see the point of this (or google’s implementation in gmail). Could you enlighten me please?
    Also: what about input type=”file” ?

  • Swizec

    You can do an input file, but it’s a little tricky. Just make an input file field and hide it. Then make a button that, when clicked, fires an onclick event on the hidden file field.

    Surprisingly that works and the user gets a file selection dialog. Perhaps at some point I’ll add it to the plugin itself.

    As for the point of this. It’s easier to handle for different languages, it’s quicker to change styling (great for themes), takes less bandwidth to download, takes less HTTP requests to work (so it’s nicer on the server) … there are probably more.

  • florin

    good stuff so far.

    However I’ve noticed that there is no focus on input controls. If you look on gmail you can see that their buttons have keyboard navigation.

    Keep up the good work.
    Florin

  • http://www.familysolutions.org.au jj

    The .js file for the plugin in 17kb, im sure i can make a png file thats so much smaller than that. I fail to see the real advantage.

  • http://http%3A%2F%2Fdavidwees.com%2Fmyblog David

    I’m trying your code in an AIR application I’m building and it looks like it works, but the styling has problems. Any suggestions for how to debug these problems?

  • ron

    I noticed your demo page doesn’t have a DOCTYPE in the HTML. And I found on my own site that the buttons don’t render properly in IE for HTML documents with certain doctypes… like this:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • ron

    Err, like this:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • sc00t3r

    Yep, I’ll second that: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Fails in IE6 and IE7.

    Quirks mode is the root of all evil !!

  • http://swizec.com Swizec

    Thanks guys, I’ll look into it when I have some time. The thought of doctypes messing things up never even crossed my mind.

  • DescSuit

    Have you thought about this using themeroller themes? It’s one of the things holding me back right now. I looked at the css and I just wasn’t sure how you’d map all those classes to themeroller values..

« jQuery imageless buttons a la... Safari 4 sucks. But how badly? »