jQuery ui dialog image for the title

Question

Is it possible when specifying a jQuery UI dialog box, to have an image be placed for my title instead of just plain text?

Thanks

Dotard

Answer 1

You can provide any HTML as the title option, like this:

$("#dialog").dialog({
  title: '<img src="myImage.jpg" />'
});​​​​​​​​​​​

You can see an example in action here

---

Or, as another demo to annoy the hell out of your users, you could do this:

$("<div />").dialog({
  title: '<marquee>Hello</marquee>'
});​

Lalonde

Haha! Love those! Thank you so much. Any other effects such as the <marquee>? – Dotard

Actually, how would you recommend centering the image in the dialog title? – Dotard

LOL, nice. Haven't seen the marquee for a while – Handily

@all From version 1.10 title is consider as text, and this solution doesn't work unless you apply this override: #14489274 – Highminded

I can't get this to work :( all it does is show the text – Preparatory

Answer 2

You can set it using HTML as well, Though dialog takes text as title but you can change it by extending dialog property like

    $(document).ready(function() {   

        $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        var $title = this.options.title || ' '
        if( ("titleIsHtml" in this.options) && this.options.titleIsHtml == true )
            title.html($title);
        else title.text($title);
    }
     }));



  $('div#thedialogg').dialog({ 
         title:"<img src='images/logo-new.png' class='logo_size'>",
         titleIsHtml:true,
         autoOpen: false,
         height: 581,
         width: 1000,   
         modal: false,
         draggable: false,
         resizable: false,
         position: 'center'

     })
})

Ayakoayala