My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 25: Enhancement: resizing the modal window
2 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Jun 2008


 
Reported by namematt...@msn.com, Jun 9, 2008
When opening AJAX content, the modal window is properly sized with no
scroll bars. However, when I add/remove DOM elements, scroll bars appear
but do disappear after. It would be great to actually resize the modal
window unless the content becomes larger than certain are. For instance,
jqModal does that. 

Any ideas? :)


 
Jun 9, 2008
Project Member #1 nyro...@gmail.com
jqModal can do that because the modal isn't center in the viewport. That's mean the
container div doesn't have to have a height set.
What's happen when you do that with jqModal is simply add some element and the div
extend by itself because of the default HTML behavior.

In nyroModal, the modal content is centered. To be centered, the modal height has to
be set. That's the problem.

As a workaround, you can resize the modal by using the $.nyroModalSettings function
just after adding your content, by setting a new height

Let me know if you need more information or an example.
Labels: -Type-Defect Type-Other
Jun 10, 2008
#2 namematt...@msn.com
Thanks for your reply. An example would be nice (how do I get the new window's
size?), although I am afraid the modal window's behavior might be jerky. 


Jun 13, 2008
Project Member #3 nyro...@gmail.com
Let say you have a link a.addContent in your Ajax Content.

You can use this code:
$(function() {
	$.fn.nyroModal.settings.endFillContent: function(elts, settings) {
		$('a.addContent', elts.content).click(function(e) {
			e.preventDefault();
			elts.content
				.css({
					width: 'auto',
					height: 'auto'
				})
				.append(' Content Added');
			$.nyroModalSettings({
				width: elts.content.width(),
				height: elts.content.height()
			});
		});
	};
});
Basically, I'm using the endFillContent callback to create the click action in the link.
We have to set the height and width to auto to retrieve the new height and width as
well. I'm not sure if it will works great regarding the width, I didn't make to much
test.

Then, I'm calling the nyroModalSettings function to set the new height and width.
Then, the modal is resized with the resize animation callback..

Hope it will works for you.

Don't hesitate to send a link of the live site!
Status: Fixed
May 15, 2010
#4 joe.beau...@gmail.com
Does this solution still work (maybe there was an API change?)???  I am trying to use it 
with the latest versions of jquery and nyromodal, but no luck.  I get the following error:


Error: invalid label
Source Code:
  $.fn.nyroModal.settings.endFillContent: function(elts, settings) { 



Powered by Google Project Hosting