CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
mcgrailm
mcgrailm

Reputation: 17640

background image for jquery ui dialog buttons

is it possible to give a button a background image really i have an image that I want to use for a button and would be nice if they stayed in place like the default buttons. right now I just have them inside the dialog but the rest of the content is dynamic and I don't want them to disappear when the scroll bar appears

Edit: ok so I figured out how to make it a background image but then i can't see the whole image

    $("#statusbox").dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        width: 'auto',
        height:'auto',
        position: 'top',
        title:"Check Order Status",
        open: function(event, ui) {
            $(this).css({'max-height': $(window).height()-$(this).height() - 50 , 'overflow-y': 'auto'}); 
            $('.ui-dialog-buttonpane').find('button:contains("Find")').css("background-image", "url(images/order_now.gif)"); ;

        },
        buttons: {
            Find: function() {
               //do find
            }
        }
    });

there could be more buttons to come

Upvotes: 1

Views: 11743

Answers (2)

Mottie
Mottie

Reputation: 86423

Why not just target the button using CSS?

Just add your custom buttons this way:

.ui-dialog .ui-button {
 color: #fff;
 background: #555555 url("button-normal.jpg") repeat-x;
}
.ui-dialog .ui-button.ui-state-hover {
 color: #fff;
 background: #0078a3 url("button-hovered.jpg") repeat-x;
}

Upvotes: 3

nevelis
nevelis

Reputation: 748

If you want to see the whole background image, you will need to adjust the 'width' and 'height' styles so that the element extends to the size of the button image. I usually set 'width' to the size of the button image, add a bit of 'padding-top' to push the text down a little, 'height' should be the height of the image minus the padding-top, and then text-align: center.

Upvotes: 0

Related Questions