How can I change the button's style?

Question

On a page I'm trying to get the buttons at the top of the page to turn square and blueish. There is a jQuery file for that but for some reason its not working. Here is the following code:

 $(document).ready(function() {
$("button").button();
 });

And the jQuery files:

<script src="/jquery_custom/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jquery_custom/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<link href="/jquery_custom/css/style.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/fc-blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />

To the left is the look I'm trying to get, but I keep getting the standard button on the right. What am I doing wrong? (Also the file paths are correct)

Answer 1

Depending on the markup of how you are defining button the selector could be either:

$("button").button();

or

$("input:submit").button()

Can you show us what markup did you use to add buttons?

Just checked the source of your page.

You have jQueryUI custom pack. Are you sure you included button widget in it?

If you check the page errors you'll see

Error: $("button").button is not a function
Source File: http://friendsconnect.org/scrapbook-booth/
Line: 25

Which means javascript, defining button() method was not loaded. Make sure your custom pack includes the button widget.

You had the startup function written incorrectly. Replace your script with this:

$(function () {
    $("button").button();
    $("#radio").buttonset();
    $("input:button").button();
    $("textarea").elastic();

    // Start FriendsConnect rounded corners
    settings = {
        tl: { radius: 5 },
        tr: { radius: 5 },
        bl: { radius: 5 },
        br: { radius: 5 },
        antiAlias: true,
        autoPad: false,
        validTags: ["div"]
    }
    $('#search-main').corner(settings);
    $('#infobox_right').corner(settings);
    // End FriendsConnect rounded corners
  });

You now have

$(document).ready(function(){
    //Some code
    $(function(){
        //other code
    });
});

$(document).ready(function(){}) and $(function(){}) are the same and can only (correction: would be nice if it only) appear once on a page