[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 334
  • Last Modified:

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>
   
   
 
0
alexealden
Asked:
alexealden
  • 5
  • 4
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Like dialog.dialog({height:100, width:200});
0
 
BurniePCommented:
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

0
 
alexealdenAuthor Commented:
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?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Sudaraka WijesingheWeb Application ProgrammerCommented:
You'll need to pass the dimensions as parameters/options to the .dialog()
<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({width:600, height:600});
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });
    </script>

Open in new window

0
 
alexealdenAuthor Commented:
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!
0
 
alexealdenAuthor Commented:
scrub that its working! Many thanks!
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Grate! Glad to help. Thanks for the points.
0
 
alexealdenAuthor Commented:
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
0
 
alexealdenAuthor Commented:
OK found the solution don't specify height to keep ie happy!
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Thanks for sharing.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now