Solved

jqueryui trying to ammend code to set dialog width and height

Posted on 2010-11-13
10
310 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
Comment Utility
Like dialog.dialog({height:100, width:200});
0
 
LVL 16

Expert Comment

by:BurnieP
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:alexealden
Comment Utility
scrub that its working! Many thanks!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
Grate! Glad to help. Thanks for the points.
0
 

Author Comment

by:alexealden
Comment Utility
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
Comment Utility
OK found the solution don't specify height to keep ie happy!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
Thanks for sharing.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

744 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

10 Experts available now in Live!

Get 1:1 Help Now