Scalable Buttons Update

76 comments so far | Add yours

I have updated the script at the popular article Scalable CSS Buttons Using PNG and Background Colors. Several people have claimed that the form in the demo doesn’t submit and it’s a “bug”. Just to clear my throat first: the article is about presentation, not behaviour. I use javascript to add presentational objects to the buttons that I can control through CSS, but I did not provide any form functionality in the example, since you probably would want to add your own anyway.

Well anyhow, on request I updated the javascript so it now includes a findForm() function that grabs the form in which the button is situated in, and then a couple of lines that submits and resets the form in the init() function.

The script grabs the id’s submit_btn and reset_btn and adds an onclick event to each id that submits/resets it’s parent form.

The findForm() function:

findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
}

The reset event:

btn.addEvent(document.getElementById('reset_btn'),'click',function() {
var form = btn.findForm(this);
form.reset();
});

The submit event:

btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});

76 Responses so far. Add yours.

At 10:54 pm on July 4th, 2007 , L.Cosio wrote:

Thanks a lot! Just what I needed

At 3:12 pm on July 10th, 2007 , Lee wrote:

Any way this can be done with transparent edges so that we can place the buttons on different colour backgrounds?

Thanks
Lee

At 7:28 pm on July 10th, 2007 , David Hellsing (author) wrote:

@Lee: there is no way to do that at the moment except using different png images for each background. The problem is that we are using the background already to produce different button colors.

At 1:09 am on August 8th, 2007 , Jeff wrote:

Regarding the technique of using different PNG’s for each background, how exactly should that be done? My buttons break when I try to assign a separate background image for the base, like this:
——————————————–

.btn * { font-style: normal; background-image: url(../img/buttonbase_fff.png); background-repeat: no-repeat; display: block; position: relative; }

.graybox .btn * { font-style: normal; background-image: url(../img/buttonbase_999.png); background-repeat: no-repeat; display: block; position: relative; }

——————————————–

The ‘graybox’ buttons end up looking very funky. What should I be doing instead?

Thanks very much!
Jeff

At 1:52 am on August 8th, 2007 , Jeff wrote:

Whoops, never mind - I figured it out. Once I removed the relative position from the gray buttons, everything was kosher.

At 4:33 pm on August 21st, 2007 , Eda wrote:

Script return JavaScript error “obj has no properties” if #submit_btn or #reset_btn aren’t defined in html. So small modification can fix it..

if (document.getElementById('reset_btn')) { btn.addEvent(document.getElementById('reset_btn'),'click',function() { var form = btn.findForm(this); form.reset(); }); }
if (document.getElementById('submit_btn')) { btn.addEvent(document.getElementById('submit_btn'),'click',function() { var form = btn.findForm(this); form.submit(); }); }

At 5:40 pm on September 2nd, 2007 , andy wrote:

hey, thanks for this great tutorial. i used this form today but i got into some trouble. i’m using two submit buttons which go actually two the right page.

my problem is: i need the value of the button but i have no idea how. maybe you can say me.

thans

At 8:15 pm on September 4th, 2007 , zsole wrote:

Hey, first..thnkz for this tutorial
I ve some problem to see complete buttom when i put it in a layer.. it’s doens’t looks the borders

At 4:24 am on September 19th, 2007 , Pkhunter wrote:

Hi. I would like to use this without any JS at all, even if that means somewhat kludgy CSS with span and i elements as mentioned in your first article. Could you perhaps separate the articles into two — one, that includes JS and all the schtick for people who’re into all the JS libraries roaming the net, and second, without any JS at all? Thanks!

At 7:20 am on October 26th, 2007 , Kelly wrote:

Looks like this tutorial might just save my day!
I tried making some of my own, but… I don’t have the patience.

One thing–something quite important to me–is that these buttons do not work inline with text. I tried about 10 variations, but to no avail. Is there a way to “inlinify” these buttons? If not, are there similar buttons elsewhere that would run inline with text?

At 4:52 pm on March 12th, 2008 , Rafael wrote:

Hello, thanks for the tutorial! Great!
I can´t use it with ASP.net
The button don´t produce any event…
There´s any way?
(Sorry, not so good in English!!!)

Thanks!!

At 2:09 am on April 10th, 2008 , Cam wrote:

Thanks for this!
I have managed to get my buttons to function with jQuery by adding a snippet below Gary Hall’s code:
(Note: I have changed class names around)

$(document).ready(function(){ $('.button').each(function(){ var b = $(this); var tt = b.text() || b.val(); if ($(':submit,:button',this)) { b = $('').insertAfter(this). addClass(this.className).attr('id',this.id); $(this).remove(); } b.text('').css({cursor:'pointer'}). prepend('‘).append($(”).text(tt).append(’‘)); });

$(’.button’).click(function(){ $(this).parents(’form’).submit(); }); });

At 8:10 pm on April 16th, 2008 , modeps wrote:

Hi, nice buttons, but the issue with your javascript is that it assumes that there is only ONE form on the page that can be submitted. (with its submit button’s id set to submit_btn). I’d like to use these buttons, but all of my pages have a search form, as well as the possibility for a second actionable form.

At 4:24 am on May 3rd, 2008 , FidoBoy wrote:

Hello! Amazing trick! but i’ve a little problem, what happens if the button already has a onClick event? is it possible to pass the content of the original onClick event to the new tag?

At 3:15 am on May 10th, 2008 , John Faulds wrote:

Apologies if someone mentioned this already, but it seems that using this method that you can no longer use the keyboard to tab to the submit button - tabbing through the form fields will get to the last one before the button and then go to the next anchor after the form which means that keyboard-only users will never be able to submit the form.

At 9:27 pm on May 14th, 2008 , Gabe wrote:

How can I get this to work with an asp.net AJAX Postback event? When it does the postback, the javascript does not perform again and the image looses its rounded/transparent edges.

At 9:48 am on May 26th, 2008 , jsF00 wrote:

Your stuff fails actually on so many levels.

First off, the Event attaching routines do not work, at all.
And the same code produces errors when there are no buttons to attach events to (shortfix is posted in the comments tho).

Secondly this javascript wont allow you to create complex buttons with different events - everything will be dropped except class and id (i.e on* events, custom attributes etc).

And these buttons cant handle AJAX content update at all - you need to call btn.init() after you have reloaded a content piece which contains a button like these. And calling init(); for one button, which has been just updated via AJAX, screws up every other button not updated.

I like the elegant look and the css solution but what a load of bs is “everyone perfers clean html and uses js to modify the objects” or something like that. If you want to approach the problem like this, make it work.

At 6:59 pm on July 7th, 2008 , gnarco wrote:

If you want to use few forms on the same page, and use this nice js to custom your submit button, just add :

btn.addEvent(as[i],’click’,function() {
var form = btn.findForm(this);
form.submit();
});

there :
[…]
as[i] = a1;
as[i].style.cursor = “pointer”;
[NEW CODE]
}
else if (as[i].tagName == “A”) {
[…]

In this case, you dont have to put a special id.

regards

At 11:07 pm on July 11th, 2008 , Tom wrote:

Hi, good article, I made the same Js function but using JQuery (it takes just 1 line!!!)

$(”.btn”).replaceWith(”” + $(”.btn”).text() +”");

All the best!

At 11:08 pm on July 11th, 2008 , Tom wrote:

Sorry, the real code:
$(".btn").replaceWith("” + $(”.btn”).text() +”");

At 11:10 pm on July 11th, 2008 , Tom wrote:

Really sorry: $(”.btn”).replaceWith(”[a class=’btn’ href=’” + $(”.btn”).attr(”href”) + “‘][i/][span][i/][span/]” + $(”.btn”).text() +”[/span][/a]”);

At 10:10 pm on July 21st, 2008 , mathew edison wrote:

Thanks for the great tut!

At 4:26 pm on August 9th, 2008 , Fiyat wrote:

Fiyat say it thanks you very much.

At 3:03 pm on August 20th, 2008 , Mike B wrote:

Hi,

I like your solution but as far as I see its practical application is facing serious problems in real life, especially at AJAX project.
1. At our project, we have to download jquery, ui.core for UI, JS files of widgets and tons JS utilities to work with. Of course our team’s intention is to minimize quantity of Javascript as mu as possible. So when I’ve found that I’ve got to add even more JS to make form submitable I was really frustrated, because I really like this solution, but it seems we have to look for something other.
2. Problem with dynamic updates also a piece of pie - if we used this solution we would have to call JS code for replacement every time we download new form. It’s not acceptable as it consumes limited resources of the client even more.

3. However I see an application of this solution at not full of JS websites, with the few forms to submit.

At 2:10 pm on September 28th, 2008 , fibercement wrote:

thanks a lot.great posts.

At 1:06 pm on October 16th, 2008 , Book wrote:

Javascript wont allow you to create complex buttons with different events - everything will be dropped except class. AJAX content update at all - you need to call btn.init() after you have reloaded a content piece which contains a button like these. HTML and uses js to modify the objects” or something like that.

At 10:06 am on October 21st, 2008 , Deech wrote:

Hi guys,
wonderful tutorial.

But If I do not use any form on my page of formbuttons, then I get a javascript error like :

Line: 55
Character: 41
Code: 0
Error Message: This propertie or method is not supported by this object
(translated from the dutch text : Deze eigenschap of methode wordt niet ondersteund door dit object)

who can tell me what I have to change in my javascript code so the code will still work on normal buttons even if I do not have any form in this page.
Adding a form and formbuttons with names then I do get no errors.

thanks a lot for helping me out.

deech

At 10:11 am on October 21st, 2008 , Deech wrote:

Never mind guys,

I found it for the form problem.
I didn’t saw the earlier message.

deech

At 11:16 pm on October 21st, 2008 , mark wrote:

Was there going to be a solution presented in response to the concerns and questions in this ‘comment’ area?

Using these buttons with multiple forms is just not working.

At 4:57 pm on December 12th, 2008 , Arek A wrote:

Hi All,

First off, I must say this article has been of great help. I did however notice that there have been some issues with AJAX / Anthem based site. It seems to me that the button is being rebuilt on each call of the page where u tend to lose things like the buttons events (hence the need for a button handler code). I have tried to call the btn.init() which works fine until you have multiple buttons on a page doing different things. Using JQuery, I have rewritten the code slightly to look more like this:

$(document).ready(function(){ $('.btn').each(function(){ var htmlStr = $(this).html(); if (htmlStr.indexOf("“) == -1){$(this).append(’‘).append(”).wrapInner(document.createElement(”SPAN”)).prepend(’‘); } }); });

The script above should keep all the buttons events, classes, etc so there should be no need for the additional event handlers, etc. This has worked well for me (not tried it with reset button though)… Hope I could have been of help to someone:)

At 5:07 pm on December 12th, 2008 , Arek A wrote:

sorry due to html tags not showing here’s the code again (Please replace [ with :

$(document).ready(function(){
$(’.btn’).each(function(){
var htmlStr = $(this).html();
if (htmlStr.indexOf(”[i]”) == -1){
$(this).append(’[i]’).append(’[span]’).wrapInner(document.createElement(”SPAN”)).prepend(’[i]’);
}
});
});

At 5:53 pm on January 30th, 2009 , Ajans wrote:

It seems to me that the button is being rebuilt on each call of the page where u tend to lose things like the buttons events . Of course our team’s intention is to minimize quantity of Javascript as mu as possible. So when I’ve found that I’ve got to add even more JS to make form submitable I was really frustrated, because I really like this solution, but it seems we have to look for something other.

At 4:39 pm on February 1st, 2009 , Matts wrote:

This is a very nice howto, but I can’t get my rounded corners

What can be a reason for happening ?

At 6:58 pm on February 2nd, 2009 , Kadın wrote:

Really very good post.

This article must for web 2.0 for web developer…

At 5:50 pm on February 3rd, 2009 , Red Rock wrote:

Anybody tried CSS from here + DD_roundies.js ?
As I remember stuff looked very similiar, and were no errors in IE6 -> as the alternative for people which are not using the Mootools or jQuery.

I need to test it and will reply with example link

At 1:17 pm on February 4th, 2009 , Red Rock wrote:

Done it as well as updated the mootools script, as the form hasn’t got defined action to trace&transform.

window.addEvent('domready', function(){ $$('.btn').each(function(btn){ var txt = btn.getProperty('value') || btn.getText(); (['button', 'submit', 'input'].contains(btn.getProperty('type')) ? btn.replaceWith( new Element('a', { 'id': btn.getProperty('id'), 'class': btn.getProperty('class'), 'onclick' : btn.getProperty('onclick') }) ) : btn).setHTML('‘ + txt + ”); }); });

I know the spam/html filter here may clean&mess the code above so send me an email on info@redrocklabs.com and I will give you code with some comment for DD_roundies in IE6 case.

Cheers

At 3:40 pm on February 14th, 2009 , Ashok wrote:

Excellent tutorial. Thanks for taking the time to publish this great stuff.

At 11:10 pm on March 11th, 2009 , sex siteleri wrote:

It seems to me that the button is being rebuilt on each call of the page where u tend to lose things like the buttons events . Of course our team’s intention is to minimize quantity of Javascript

At 12:30 pm on March 12th, 2009 , hekimboard wrote:

Thanks a lot.Gret site.

At 3:51 pm on March 25th, 2009 , network marketing wrote:

THANKS

At 7:22 pm on April 10th, 2009 , sex wrote:

thansk you sites sizde olmasanız napariz ßiz .)

At 7:23 pm on April 10th, 2009 , turk porno wrote:

very good sites begendım

At 7:24 pm on April 10th, 2009 , porno izle wrote:

soalun bitti yeterlı bukadar gorusuruz

At 1:40 pm on April 12th, 2009 , mario oyunları wrote:

thanks for tutorial

At 3:35 am on May 16th, 2009 , wholesale lingerie wrote:

http://www.charmingirl-china.com

At 2:19 am on May 18th, 2009 , Krystian wrote:

@Matt:

When setting more than one class on the submit button, make sure that “btn” is first.

For example class=”some_class btn” will not render right with the rounded corners. Make sure to use class=”btn some_class”.

Furthermore, in IE7, not have the btn class first causes the form to submit twice! This was a tricky problem to solve.

At 4:17 am on May 22nd, 2009 , lingeriewholesale wrote:

http://www.dear-lover.com/

At 12:34 pm on May 25th, 2009 , sohbet wrote:

Anybody tried CSS from here + DD_roundies.js ?
As I remember stuff looked very similiar, and were no errors in IE6 -> as the alternative for people which are not using the Mootools or jQuery.

I need to test it and will reply with example link

At 11:08 am on May 26th, 2009 , rosesecret wrote:

http://www.lingerie-wholesaler.com Lingerie Wholesale
http://www.lingerie-supplies.com Sexy Lingerie

At 4:12 pm on May 29th, 2009 , muzik dinle wrote:

The o till I either make my mind up or someone invents an affordable cloning machine, I’ll just focus on my main blog.oky.

At 11:02 am on June 2nd, 2009 , Andrei wrote:

Many thanks for this.

At 4:38 pm on June 5th, 2009 , netlog wrote:

thanks admin

At 6:51 pm on June 9th, 2009 , netlog wrote:

very nice

At 9:53 pm on June 10th, 2009 , sohbet odaları wrote:

Thanks you..

At 9:43 pm on June 14th, 2009 , söve wrote:

thanks

21 Trackbacks & Pings:

Trackback at 4:08 pm on July 3rd, 2007 by Scalable CSS Buttons Using PNG and Background Colors | David’s kitchen:

[…] Update: The script now also adds form functionality to buttons with certain id’s. Read more here: Scalable Buttons Update […]

Trackback at 9:46 am on October 24th, 2007 by scalable css buttons using png and background colors:

[…] there has been some updates to this […]

Trackback at 7:12 pm on May 4th, 2008 by Scalable CSS Buttons:

[…] there has been some updates to this […]

Trackback at 10:52 pm on June 5th, 2008 by Kosher wine:

Kosher wine…

ISO tasting glasses are designed to get the most from the widest range of wine styles (red, white, rose, sparkling, fortified and spirits)….

Trackback at 6:59 am on January 15th, 2009 by 꿈속으로.. » Blog Archive » Beautiful Scalable CSS Buttons:

[…] there has been some updates to this […]

Trackback at 5:09 pm on January 18th, 2009 by Beautiful Scalable CSS Buttons | 꿈속으로:

[…] there has been some updates to this […]

Trackback at 11:00 am on May 27th, 2009 by 22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine: