Comments on: jQuery imageless buttons a la Google take two http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5 Drinker of tea Wed, 08 Feb 2012 20:59:00 +0000 hourly 1 http://wordpress.org/?v=3.3 By: DescSuit http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-1448 DescSuit Tue, 04 Aug 2009 00:03:04 +0000 #comment-1448 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.. 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..

]]> By: Swizec http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-145 Swizec Mon, 16 Mar 2009 11:59:29 +0000 #comment-145 Thanks guys, I'll look into it when I have some time. The thought of doctypes messing things up never even crossed my mind. Thanks guys, I’ll look into it when I have some time. The thought of doctypes messing things up never even crossed my mind.

]]> By: sc00t3r http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-40 sc00t3r Fri, 13 Mar 2009 12:55:28 +0000 #comment-40 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"><br /><br />Fails in IE6 and IE7.<br /><br />Quirks mode is the root of all evil !! 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 !!

]]> By: ron http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-39 ron Thu, 12 Mar 2009 18:09:54 +0000 #comment-39 Err, like this:<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> Err, like this:

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

]]> By: ron http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-38 ron Thu, 12 Mar 2009 18:09:24 +0000 #comment-38 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:<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><br /> 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">

]]> By: David http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-37 David Sat, 07 Mar 2009 05:57:51 +0000 #comment-37 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? 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?

]]> By: jj http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-36 jj Wed, 25 Feb 2009 01:27:12 +0000 #comment-36 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. 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.

]]> By: florin http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-35 florin Sun, 22 Feb 2009 13:29:08 +0000 #comment-35 good stuff so far.<br /><br /> 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. <br /><br />Keep up the good work.<br />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

]]> By: Swizec http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-34 Swizec Fri, 20 Feb 2009 00:30:24 +0000 #comment-34 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.<br /><br />Surprisingly that works and the user gets a file selection dialog. Perhaps at some point I'll add it to the plugin itself.<br /><br />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. 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.

]]> By: Jan%20Hancic http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-33 Jan%20Hancic Thu, 19 Feb 2009 23:45:13 +0000 #comment-33 I fail to see the point of this (or google's implementation in gmail). Could you enlighten me please?<br />Also: what about input type="file" ? 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” ?

]]> By: Carl http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-32 Carl Thu, 19 Feb 2009 23:30:47 +0000 #comment-32 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. 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.

]]> By: Evernoob http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-31 Evernoob Thu, 19 Feb 2009 23:30:17 +0000 #comment-31 Well done mate, glad it all worked out in the end :)<br /><br />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.<br /><br />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.<br /><br />Good job though :D 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

]]> By: Swizec http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-30 Swizec Thu, 19 Feb 2009 14:09:05 +0000 #comment-30 The Safari hack is a guideline. Naturally you should class filter it in production code.<br /><br />Maybe I should change the docs to mention that ... The Safari hack is a guideline. Naturally you should class filter it in production code.

Maybe I should change the docs to mention that …

]]> By: AndyJeffries http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-29 AndyJeffries Thu, 19 Feb 2009 14:01:49 +0000 #comment-29 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! :-)<br /><br />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? <br /><br />Should this not be class filtered or some such thing?<br /><br />Anyway, great work though! 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!

]]> By: Swizec http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-28 Swizec Thu, 19 Feb 2009 13:49:05 +0000 #comment-28 @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. @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.

]]> By: Cyberblox http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-27 Cyberblox Thu, 19 Feb 2009 13:26:19 +0000 #comment-27 Still not working in Firefox 3.0.6<br />On the second line of examples on your example page, the buttons all run together. Still not working in Firefox 3.0.6
On the second line of examples on your example page, the buttons all run together.

]]> By: Robert http://swizec.com/blog/jquery-imageless-buttons-a-la-google-take-two/swizec/5/comment-page-1#comment-26 Robert Thu, 19 Feb 2009 11:04:07 +0000 #comment-26 Cool 8) excellent work mate :) really nice :) Cool 8) excellent work mate :) really nice :)

]]>