Best buttons

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Best buttons

Post by JellyFish »

What is the best way to create considerably good, cross-browser submit buttons? I'm looking for a real clean solution that requires very little html markup. If anyone has some good pointers for me on this I'd really appreciate it.

Thanks for reading.

PS: I mean for this thread to be more of a discussion on this subject, rather then a quick answer.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Best buttons

Post by Benjamin »

I'd say the best bets are images or css.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Best buttons

Post by Christopher »

There was an article about how they created the buttons in Gmail a while back. Search and perhaps you can find it.
(#10850)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

arborint wrote:There was an article about how they created the buttons in Gmail a while back. Search and perhaps you can find it.
I think I read that article.
I'd say the best bets are images or css.
Yea I think I'm looking for a css solution; should have mentioned that in OP. I don't want images, because they're not dynamic; there's no way to change the text in an image.

What kind of HTML and CSS do you guys use when making buttons?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Best buttons

Post by Christopher »

JellyFish wrote:I think I read that article.
If you find it, post it. Perhaps we could work through developing a solution based on what they did. You could also look at the source to Gmail.
(#10850)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

I think I found it. The solution seems good, but I don't know if it's too much for a button. Maybe this is what it takes to get something working cross browser.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Best buttons

Post by Benjamin »

User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Best buttons

Post by Christopher »

JellyFish wrote:I think I found it. The solution seems good, but I don't know if it's too much for a button. Maybe this is what it takes to get something working cross browser.
It looks like it is just a small stylesheet and:

Code: Select all

<a><span><span>Button Text</span></span></a>
(#10850)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

The only thing is, I want to be able to use this button to submit a form and I don't want to have to write some javascript to mimic this feature.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Best buttons

Post by Christopher »

Then you need to use one of the form button elements. Probably image button if you want a consistent look. But honestly, why don't you want to use Javascript? It is there in every browser just waiting to do things like this.
(#10850)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

arborint wrote:Then you need to use one of the form button elements. Probably image button if you want a consistent look. But honestly, why don't you want to use Javascript? It is there in every browser just waiting to do things like this.
The reason I don't want to do this with javascript is because I just want to have to write the HTML and have it work. CSS will take care of the styling, so all I need to do is worry about writing the right markup. Unless there's a way to automatically make all buttons submit-able with javascript, I'll probably consider it. The thing is though, I'll have to put it in base.js or something (my js file that gets included in every page) but then would it effect pages that don't have buttons? Also what about dynamically inserting buttons, then I'll have to worry about establish an event handler, rather then just appending the HTML and then I'm done.

If you know of some ways to solve some of this issues, then I'll be please to use JavaScript.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Best buttons

Post by Christopher »

Certainly with something like jQuery (or write your own) you could have every element of a certain class be submittable. So if you added that to the Javascript on every page it should just work. The even handler would just submit the form that contained the button, so it could be generic.
(#10850)
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

I've decided to convert all input buttons into an anchor element and attach event handlers that submit the form when they are clicked, all with jQuery. The only issue I'm having, is an unexpected "not-working-ness" from jQuery:

Code: Select all

 
$(function() {
    $("input.button").each(function(i) {
        var anchorButton = $("<a href='#' class='"+this.className+"'>"+this.value+"</a>")
            .click(function(evt) {
                $(this).parent("form").submit();
                return false;
            });
        $(this).after(anchorButton);
        anchorButton.append(this);
    });
});
 
For some reason, calling submit() does NOT submit the form. 8O There must be something I'm doing wrong, right? :?

Edit: Here's the html:

Code: Select all

 
<form action="" method="get">
    <div class="field">
        <label for="text" class="placeholder">Text</label>
        <input type="text" class="text" id="text"/>
    </div>
    <div class="field">
        <label for="password" class="placeholder">Password</label>
        <input type="password" class="password" id="password"/><br/>
    </div>
    <div class="field">
        <label for="textarea" class="placeholder">Textarea</label>
        <textarea id="textarea"></textarea>
    </div>
    <input type="submit" class="button pill-left" name="submit" value="Submit"/>
    <input type="submit" class="button pill-right" name="cancel" value="Cancel"/>
</form>
 
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Best buttons

Post by kaszu »

I'm not 100% sure, but problem could be binding to element event if element is not in DOM.
Try if this works:

Code: Select all

$(function() {
    $("input.button").each(function(i) {
        var anchorButton = $("<a href='#' class='"+this.className+"'>"+this.value+"</a>");
        $(this).after(anchorButton);
 
        //Uncomment following line if it still doesn't work.
        //var anchorButton = $(this).next();
 
        anchorButton.click(function(evt) {
            $(this).parents("form").submit();  //Changed from parent() to parents() in case your html changes in future
            return false;
        });
        anchorButton.append(this);
    });
});
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: Best buttons

Post by JellyFish »

I tried both of your solutions and, unfortunately, no luck. Also, why do I need to change the parent method to parents method, doesn't a submit button just submit one form?

...*Left to go test something*...

It turns out that a submit button submits the top most form parent. So, once I figure out how to actually initiate a form submission through javascript, I'll then be able to make sure my new button acts the very same as the original input button.

But as you can see there's some odd problem with the submit() method. Even when I select the form element directly and call submit() nothing happens. Is it jQuery? What gives?

Edit: It appears that whenever there is an input element with the name set to "submit" the form doesn't submit. I changed the html to:

Code: Select all

 
<form id="foo" onsubmit="alert('YES!!!'); return false;">
    <div class="field">
        <label for="text" class="placeholder">Text</label>
        <input type="text" class="text" id="text" name="text"/>
    </div>
    <div class="field">
        <label for="password" class="placeholder">Password</label>
        <input type="password" class="password" id="password" name="password"/><br/>
    </div>
    <div class="field">
        <label for="textarea" class="placeholder">Textarea</label>
        <textarea id="textarea" name="textarea"></textarea>
    </div>
    <input type="submit" class="button pill-left" name="foo" value="Submit"/>
    <input type="submit" class="button pill-right" name="cancel" value="Cancel"/>
</form>
 
Notice the name of the first submit button has changed. The new anchor buttons now submit the form, but bypasses onsubmit event set in the form element's attribute.

So now I have two questions. Why can't I have any input elements with the name "submit"? And why is the submit() jQuery method not calling that event handler from the form element's attribute?

Edit again: It appears that the submit() method doesn't call the event handlers from attributes, but rather only from javascript. So if I change my javascript to:

Code: Select all

 
$(function() {
$("form").submit(function(eventObject) {
    alert("YES!!!");
    return false;
});
//... the rest of the code
 
the function binded to the submit event via javascript is called. The fact that I can't create events within html attributes is another bummer. There are two bummers: first, there can't be an input with the name "submit", and second there event handlers created through onsomething attributes in html aren't called.

How can I eradicate these bummers?
Post Reply