[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

jqueryui trying to ammend code to set dialog width and height

Posted on 2010-11-13
10
Medium Priority
?
325 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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.

 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

649 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