Solved

jqueryui trying to ammend code to set dialog width and height

Posted on 2010-11-13
10
311 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

912 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now