Solved

jqueryui trying to ammend code to set dialog width and height

Posted on 2010-11-13
10
314 Views
Last Modified: 2012-05-10
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
Comment
Question by:alexealden
  • 5
  • 4
10 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34128347
Like dialog.dialog({height:100, width:200});
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34128373
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
 

Author Comment

by:alexealden
ID: 34128407
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34128446
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
 

Author Comment

by:alexealden
ID: 34128501
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
 

Author Comment

by:alexealden
ID: 34128505
scrub that its working! Many thanks!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34128521
Grate! Glad to help. Thanks for the points.
0
 

Author Comment

by:alexealden
ID: 34128653
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
 

Author Comment

by:alexealden
ID: 34128680
OK found the solution don't specify height to keep ie happy!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34128703
Thanks for sharing.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question