asked on

jqueryui trying to ammend code to set dialog width and height

Hi,

Using an example I have succesfully been able to get a page loading within a dialog box from a link using ajax. Only trouble is I have not managed to set the width and height of the dialog. This is the code I used: Coudl you tell me where I need to specif the width and height of teh windos and also to make it resizable or with scrollers. Many thanks.

<a class="ajax" href="http://pa.creatico1.co.uk/products1.asp?category=GiftWrap&product={partno}"> gift wrap this album?</a>

<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:hidden"></div>').appendTo('body');

// load remote content
dialog.load(

url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});
});
</script>

Sudaraka Wijesinghe

Like dialog.dialog({height:100, width:200});

BurnieP

You could define it like this :

<script type="text/javascript"> 
    $(function (){ 
        $('a.ajax').click(function() { 
            var url = this.href; 
            var dialog = $('<div style="display:hidden; width:200px; height:200px; overflow:auto"></div>').appendTo('body');
                        
            // load remote content 
            dialog.load( 

                url,  
                {}, 
                function (responseText, textStatus, XMLHttpRequest) { 
                    dialog.dialog(); 
                } 
            ); 
            //prevent the browser to follow the link 
            return false; 
        }); 
    }); 
    </script>

Open in new window

alexealden

ASKER

Hi Burnie

I tried your code but the dialog window doesn't seem to get bigger.. I set it to 600px x 600px but it is definitley smaller. You can see for yourself here:

http://pa.creatico1.co.uk/pp/Capri/Nubuck_Olive_240.html

I used a jquery ui theme roller - is it perhaps because I chose to not include every component or is this part of the core?

ASKER CERTIFIED SOLUTION

Sudaraka Wijesinghe

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alexealden

ASKER

Thanks SudRaka,

OK I did that ... and I can see a change now ...but just on the width can you check

http://pa.creatico1.co.uk/pp/Capri/Nubuck_Olive_240.html

and click add giftwrap, thanks!

alexealden

ASKER

scrub that its working! Many thanks!

Sudaraka Wijesinghe

Grate! Glad to help. Thanks for the points.

alexealden

ASKER

Hi Sudraka,

It iis giving highly unpredicatble results - i.e.totally diffferent in Chrome, firefox than IE - it seems to be a height issue.. I wonder if you have a tip on this?

Cheers,

Alex

alexealden

ASKER

OK found the solution don't specify height to keep ie happy!

Sudaraka Wijesinghe

Thanks for sharing.