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 385: one question
2 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Nov 2009


 
Reported by poi...@gmail.com, Nov 18, 2009
Hi thanks for your plugin, but I have one question

in my source I use your plugin as
$(document).ready(function() {
	$('a#loginItem').click(function(e) {
		e.preventDefault();
		$.nyroModalManual({
			url: $(this).attr('href'),
			windowResize: false,
			modal: true,
			width: 493,
			height: 269,
			minWidth: 100, // Minimum width
			minHeight: 100, 
			resizable: false,
			autoSizable: false,
			processHandler: function(settings) {
				$.nyroModalSettings({
					css: {
						wrapper: {
							marginTop: 0,
							top: 100,
						},
						content : {
							padding: '11px 0 0 70px',
							width: '523px',
							height:'595px',
						},
						
					},
				});
			},	
			showContent: function (elts, settings, callback) {
				elts.contentWrapper
					.css({
						// background: 'url(images/back-modal-
view.png) no-repeat',
						marginTop: 100+'px',
						marginLeft: (-290 + 
settings.marginScrollLeft)+'px',
						display: 'block',
						border: 'none',						
					})
			},
			endShowContent: function() {
				scroll(0,0);
			},
		});
	});
});

But when I loaded the content, no work any javascipt their, and alsos form 
inside  this modal window not submit data :( i don't know how to fix it ? 
maybe you have any suggestion ? thanks.
Nov 21, 2009
Project Member #1 nyro...@gmail.com
In the showContent callback, there is some mistakes.
Firstable, at the end of it, you have to call the callback like:
callback();
If you do not do so, the modal won't work at all.
Then, on the same function, you should hide the loading div.
In nyroModal, this is done with a fade like:
elts.loading.fadeOut(200, callback);
Note that the callback is call directly once the fade is done.

Try that and let me know what's happen now.
Nov 27, 2009
#2 poi...@gmail.com
Thanks for your comment, but I really not a JS guru :(

And I only need to put your modal window in top : 150px instead 50% you used
How prefer i should realize it ?.
Thanks.

Nov 27, 2009
#3 poi...@gmail.com
I meant i want put all (loading, content ) all windows on  one place not into top:50%.
How i could make it ?
Thanks.
Nov 29, 2009
Project Member #4 nyro...@gmail.com
To do that, you have to rewrite a lot of animation callback.
Here is an exemple to show it at 40px from the top:

<script type="text/javascript">
$(function() {
	$.nyroModalSettings({
		css: { // Default CSS option for the nyroModal Div. Some will be overwritten or
updated when using IE6
			wrapper: {
				top: 0
			},
			loading: {
				top: 0
			}
		},
		showLoading: function(elts, settings, callback) {
			elts.loading
				.css({
					marginTop: '40px',
					marginLeft: settings.marginLeftLoading+'px',
					opacity: 0
				})
				.show()
				.animate({
					opacity: 1
				}, {complete: callback, duration: 400});
		},
		showContent: function(elts, settings, callback) {
			elts.loading
				.css({
					marginTop: '40px',
					marginLeft: settings.marginLeftLoading+'px'
				})
				.show()
				.animate({
					width: settings.width+'px',
					height: settings.height+'px',
					marginTop: '40px',
					marginLeft: settings.marginLeft+'px'
				}, {duration: 350, complete: function() {
					elts.contentWrapper
						.css({
							width: settings.width+'px',
							height: settings.height+'px',
							marginTop: '40px',
							marginLeft: settings.marginLeft+'px'
						})
						.show();
						elts.loading.fadeOut(200, callback);
					}
				});
		},
		showTransition: function(elts, settings, callback) {
			// Put the loading with the same dimensions of the current content
			elts.loading
				.css({
					marginTop: '40px',
					marginLeft: elts.contentWrapper.css('marginLeft'),
					height: elts.contentWrapper.css('height'),
					width: elts.contentWrapper.css('width'),
					opacity: 0
				})
				.show()
				.fadeTo(400, 1, function() {
						elts.contentWrapper.hide();
						callback();
					});
		},
		hideTransition: function(elts, settings, callback) {
			// Place the content wrapper underneath the the loading with the right dimensions
			elts.contentWrapper
				.hide()
				.css({
					width: settings.width+'px',
					height: settings.height+'px',
					marginLeft: settings.marginLeft+'px',
					marginTop: '40px',
					opacity: 1
				});
			elts.loading
				.animate({
					width: settings.width+'px',
					height: settings.height+'px',
					marginLeft: settings.marginLeft+'px',
					marginTop: '40px'
				}, {complete: function() {
						elts.contentWrapper.show();
						elts.loading.fadeOut(400, function() {
							elts.loading.hide();
							callback();
						});
					}, duration: 350});
		}
	});
});
</script>
Status: Fixed
Dec 3, 2009
#6 poi...@gmail.com
VERY BIG THANKS!!!

Yes now i see for my purpose i should know your source code and logic from begin 
to end. It's not easy at first time. thanks a lot 
for your help

Could you give me one more advice ?
I know what   you have not made windows stack yet.. 
but i need to click on image in modal window and see the big version of this image.

How I plan to do it.
1. i can bind click event with ajax request at modal window
2.  on server side i can read which image client is require and get info about this 
image like width and heigh. And send url of this 
image and all other info with help JSON to client.
3.  i can parse answer from server on client side, and call another nyromodal window 
with image url, width and heigh parameters 
of this image by nyroModalSettings.

And now the question is :
How I should  complete 3rd stage ?
in my mind i see - i must close current window, after i got answer, and open another 
window with new settings. But  when we 
close nyromodal window the background layer is disappear. But it should be stay  
without changes. Would you be so kind help me 
- How I could make it works ?

Thanks.

Powered by Google Project Hosting