Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2013, 17:01
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

Последовательность выполнения скрипта
Здравствуйте! Нужен скрипт, который вначале перемещает картинку в корзину, а после открывается модальное окно. Но модальное окно открывается сразу, а должно в конце. Как заставить его срабатывать в конце?
<div class="productPriceWrapRight">
							<a class="modalbox" href="#inline" onClick="return false;">
								<img src="images/add-to-basket2.gif" alt="Add To Basket" width="111" height="32" id="featuredProduct_1" />
							</a>
						</div>


<div id="inline">
	<h2>Отправка сообщения</h2>

	<form id="contact" name="contact" action="#" method="post">
		<label for="email">Ваш E-mail</label>
		<input type="email" id="email" name="email" class="txt">
		<br>
		<label for="msg">Введите сообщение</label>
		<textarea id="msg" name="msg" class="txtarea"></textarea>
		
		<button id="send">Отправить E-mail</button>
	</form>
</div>


$(document).ready(function(){ 
...здесь обеспечивается полёт картинки...
$(".modalbox").fancybox({ }); - модальное окно, которое должно сработать в конце.
});
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2013, 17:04
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

если картинка летит по средствам animate то
.animate({
...
}, 5000, function() {
$(".modalbox").fancybox({ }); // Animation complete.
});
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2013, 17:33
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

В общем приведу весь код с исправлением (жирным выделил), но всё-равно окно выскакивает сразу.

$(document).ready(function(){ 

	$("#basketItemsWrap li:first").hide();

	$(".productPriceWrapRight a img").click(function() {
		var productIDValSplitter 	= (this.id).split("_");
		var productIDVal 			= productIDValSplitter[1];
		
		var productX 		= $("#productImageWrapID_" + productIDVal).offset().left;
		var productY 		= $("#productImageWrapID_" + productIDVal).offset().top;
		
		if( $("#productID_" + productIDVal).length > 0){
			var basketX 		= $("#productID_" + productIDVal).offset().left;
			var basketY 		= $("#productID_" + productIDVal).offset().top;			
		} else {
			var basketX 		= $("#basketTitleWrap").offset().left;
			var basketY 		= $("#basketTitleWrap").offset().top;
		}
		
		var gotoX 			= basketX - productX;
		var gotoY 			= basketY - productY;
		
		var newImageWidth 	= $("#productImageWrapID_" + productIDVal).width() / 3;
		var newImageHeight	= $("#productImageWrapID_" + productIDVal).height() / 3;
		
		$("#productImageWrapID_" + productIDVal + " img")
		.clone()
		.prependTo("#productImageWrapID_" + productIDVal)
		.css({'position' : 'absolute'})
		.animate({opacity: 0.4}, 100 )
		.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200 , function() {																													  			$(this).remove();
	
			$("#notificationsLoader").html('<img src="images/loader.gif">');
		
			$.ajax({  
				type: "POST",  
				url: "inc/functions.php",  
				data: { productID: productIDVal, action: "addToBasket"},  
				success: function(theResponse) {
					
					if( $("#productID_" + productIDVal).length > 0){
						$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
						$("#productID_" + productIDVal).before(theResponse).remove();
						$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
						$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
						$("#notificationsLoader").empty();
						
					} else {
						$("#basketItemsWrap li:first").before(theResponse);
						$("#basketItemsWrap li:first").hide();
						$("#basketItemsWrap li:first").show("slow");  
						$("#notificationsLoader").empty();			
					}
					
				}  
			});
                        
                       $(".modalbox").fancybox();
		
		});
		
	});
	
	
	
	$("#basketItemsWrap li img").live("click", function(event) { 
		var productIDValSplitter 	= (this.id).split("_");
		var productIDVal 			= productIDValSplitter[1];	

		$("#notificationsLoader").html('<img src="images/loader.gif">');
	
		$.ajax({  
			type: "POST",  
			url: "inc/functions.php",  
			data: { productID: productIDVal, action: "deleteFromBasket"},  
			success: function(theResponse) {
				
				$("#productID_" + productIDVal).hide("slow",  function() {$(this).remove();});
				$("#notificationsLoader").empty();
			
			}  
		});  
		
	});
        

});

Последний раз редактировалось kostant, 27.06.2013 в 14:11.
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2013, 13:53
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

Подскажите пожалуйста, как выражение href="#inline" реализовать программно с помощью javascript чтобы вставить его в нужное место в скрипте и вызвать div-блок c индетификатором id="inline"
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2013, 13:57
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Нефигасебе код. Он не влез на 1920 разрешение.
Ответить с цитированием
  #6 (permalink)  
Старый 27.06.2013, 14:03
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

Цитата:
Нефигасебе код. Он не влез на 1920 разрешение.
Понятия не имею как так получилось((
Ответить с цитированием
  #7 (permalink)  
Старый 27.06.2013, 14:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

kostant, ты страницу верни как было! Из-за твоего жирного кода страницу расперло. (32ю строку почисти от пробелов)
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2013, 12:52
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

Друзья, помогите пожалуйста! В общем пытаюсь запустить ф-цию предварительно (как написано в документации), но всё равно 2 действия запускаются одновременно:
<script type="text/javascript">
		$(document).ready(function() {
	
			$('.fancybox').fancybox({
	                                         'beforeShow': $(".productPriceWrapRight a img").bind('click',kos_fly), 
                                                 'href': '#inline1'
		                                });
                });
	</script>


'beforeShow': $(".productPriceWrapRight a img").bind('click',kos_fly), в этой строчке, я так понимаю, нельзя использовать метод bind и связывать событие click с моей функцией kos_fly. Мне то всего нужно передать этой ф-ции id селектора ".productPriceWrapRight a img" в момент клика. Вопрос 1: как в качестве параметра функции передать id в момент клика?

Ещё есть 2 вариант. Привожу код:
$(function (){
    $(".productPriceWrapRight a img")
            .bind('click',kos_fly)
            .bind('click',function(event) {
                //        Функция вызова модального окна
                $.fancybox( {'href': '#inline1', title : 'Текст посылаемый'} );
            });

});

Но всё-равно 2 этих навешенных действия выполняются одновременно, а не друг за другом. Вопрос 2: как задать последовательную очерёдность?


Код ф-ции kos_fly:
function kos_fly (event) {

    var productIDValSplitter 	= (this.id).split("_");
		var productIDVal 			= productIDValSplitter[1];
		
		var productX 		= $("#productImageWrapID_" + productIDVal).offset().left;
		var productY 		= $("#productImageWrapID_" + productIDVal).offset().top;
		
		if( $("#productID_" + productIDVal).length > 0){
			var basketX 		= $("#productID_" + productIDVal).offset().left;
			var basketY 		= $("#productID_" + productIDVal).offset().top;			
		} else {
			var basketX 		= $("#basketTitleWrap").offset().left;
			var basketY 		= $("#basketTitleWrap").offset().top;
		}
		
		var gotoX 			= basketX - productX;
		var gotoY 			= basketY - productY;
		
		var newImageWidth 	= $("#productImageWrapID_" + productIDVal).width() / 3;
		var newImageHeight	= $("#productImageWrapID_" + productIDVal).height() / 3;
		
		$("#productImageWrapID_" + productIDVal + " img")
		.clone()
		.prependTo("#productImageWrapID_" + productIDVal)
		.css({'position' : 'absolute'})
		.animate({opacity: 0.4}, 100 )
		.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
			$(this).remove();
	
			$("#notificationsLoader").html('<img src="http://www.cyberforum.ru/images/loader.gif">');
		
			$.ajax({  
				type: "POST",  
				url: "inc/functions.php",  
				data: { productID: productIDVal, action: "addToBasket"},  
				success: function(theResponse) {
					
					if( $("#productID_" + productIDVal).length > 0){
						$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
						$("#productID_" + productIDVal).before(theResponse).remove();
						$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
						$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
						$("#notificationsLoader").empty();
						
					} else {
						$("#basketItemsWrap li:first").before(theResponse);
						$("#basketItemsWrap li:first").hide();
						$("#basketItemsWrap li:first").show("slow");  
						$("#notificationsLoader").empty();			
					}
					
				}  
			});  
		
		});
    
}
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2013, 18:02
Интересующийся
Отправить личное сообщение для kostant Посмотреть профиль Найти все сообщения от kostant
 
Регистрация: 26.06.2013
Сообщений: 11

В общем получилось с помощью задержки сделать нужную последовательность:
//        Функция вызова модального окна
            setTimeout( function () {  
                   $.fancybox.open( {'href': '#inline1', title : ''} );
                                    }, 1000 
                          );
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить результат выполнения скрипта на сервере в переменную ява gyper AJAX и COMET 5 19.11.2012 11:36
Последовательность выполнения функций nematod Общие вопросы Javascript 7 25.02.2011 03:16
Google Chrome перерисовка страницы во время выполнения скрипта Dekart Javascript под браузер 0 08.06.2010 08:35
Нужно добавить блокировку ссылки на время выполнения скрипта aidka Events/DOM/Window 1 02.08.2009 20:11
Последовательность выполнения в динамическом js sovka Общие вопросы Javascript 2 18.10.2008 15:58