Форум PHP программистов > Помогите с кнопкой!

[ Поиск ] - [ Пользователи ] - [ Календарь ]

irina1104

16.12.2011 - 07:17

Доброе утро!
Я нашла функцию анимированое добавление товара в корзину:


function animate(imageToFlyId, l, t, timeout)
{
    var imageElement = document.getElementById(imageToFlyId);
    var imageToFly = $(imageElement);
    var position = imageToFly.position();
    var flyImage = imageToFly.clone().insertBefore(imageToFly);
 
    flyImage.css({ "position": "absolute", "left": position.left, "top": position.top });
    flyImage.animate({ width: 0, height: 0, left: l, top: t}, timeout, 'linear');
 
       function myfunc(id)
         {
          imageElement = document.getElementById(id);
          imageElement.parentNode ? imageElement.parentNode.removeChild(imageElement) : imageElement;
         }
 
       setTimeout(function() {myfunc(imageToFlyId)}, timeout);
 
    return false;
}

У меня вывод кнопки добавления выглядит вот так:


 <p align="right">
                                
                               <?= GetMessage("CATALOG_QUANTITY") ?> <input type="text" id='qty_<?=$arElement["ID"];?>' name="qty" value=1 size=3>
                                <input type="hidden" name="id" value="<?echo $arElement["ID"]?>">
                              <input id='sub_<?echo $arElement["ID"]?>' class='submit' type="submit" value="<?echo GetMessage("CATALOG_ADD")?>">
                              
                                </p>

Как мне на кнопку повесит эту функцию????

Спустя 9 минут, 8 секунд (16.12.2011 - 06:26) irina1104 написал(а):

пробовала вот так:

  <p align="right">
                                
                               <?= GetMessage("CATALOG_QUANTITY") ?> <input type="text" id='qty_<?=$arElement["ID"];?>' name="qty" value=1 size=3>
                                <input type="hidden" name="id" value="<?echo $arElement["ID"]?>">
                                <input onclick="img_animate('ELEMENT_ID', 580, 60, 1200);" rel="nofollow" id='sub_<?echo $arElement["ID"]?>' class='submit' type="submit" value="<?echo GetMessage("CATALOG_ADD")?>">
                              
                                </p>

все равно не получается.

Спустя 3 часа, 42 минуты, 48 секунд (16.12.2011 - 10:09) sebastjan написал(а):

onclick="img_animate('ELEMENT_ -это у вас.
а это название функции animate(image

С первых строк вмдно что вы вызываете не ту функцию.

Спустя 17 минут, 20 секунд (16.12.2011 - 10:27) irina1104 написал(а):

Снначало вот такой скрипт:

<script>
function img_animate(imageToFlyId, l, t, timeout)
{
	var imageElement = document.getElementById(imageToFlyId);
	var imageToFly = $(imageElement);
	var position = imageToFly.position();
	var flyImage = imageToFly.clone().insertBefore(imageToFly);
	
	flyImage.css({ "position": "absolute", "left": position.left, "top": position.top });
	flyImage.animate({ width: 0, height: 0, left: l, top: t}, timeout, 'linear');

       function myfunc(id)
         {
          imageElement = document.getElementById(id);
          imageElement.parentNode ? imageElement.parentNode.removeChild(imageElement) : imageElement;
         }

       setTimeout(function() {myfunc(imageToFlyId)}, timeout);

	return false;
}
</script>[code]
Потом кнопка:
[code]       <p align="right">
                                
                               <?= GetMessage("CATALOG_QUANTITY") ?> <input type="text" id='qty_<?=$arElement["ID"];?>' name="qty" value=1 size=3>
                                <input type="hidden" name="id" value="<?echo $arElement["ID"]?>">
                                <input onclick='img_animate("ELEMENT_ID", 580, 60, 5000)'id='sub_<?echo $arElement["ID"]?>' class='submit' type="submit" value="<?echo GetMessage("CATALOG_ADD")?>">
                              
                                </p>

Почему не работает?

Спустя 11 минут, 23 секунды (16.12.2011 - 10:38) sebastjan написал(а):

откуда взялм пример?
смущает эта строка - $(imageElement) это случаем не использование яваквери?
Вообще что хоитите сделать?
Опишите.

Спустя 2 минуты, 59 секунд (16.12.2011 - 10:41) irina1104 написал(а):

Я не знаю я взяла это от сюда: http://blog-o-bitrix.ru/javascript/animaci...rzinu/#more-506

Спустя 5 минут, 6 секунд (16.12.2011 - 10:46) sebastjan написал(а):

Так оно и есть , но ткую ерунду самому на чистом яваскрипт легче сделать.
У меня есть образцы, но если вы не разбираетесь в яваскрипт, тогда это будет трудно для вас.
Сейчас поищу и вылжу свой примерно аналогичный вариант.

Спустя 2 минуты, 43 секунды (16.12.2011 - 10:49) irina1104 написал(а):

Двайте заранее спасибо!

Спустя 48 минут, 22 секунды (16.12.2011 - 11:37) sebastjan написал(а):

Давай в личку мыло ,вышлю архивчик с ява скриптом.
Постораюсь прокоментировать подробней чтоб было понятно.
Скриптик очень короткий и простой, если немного разбираешся в яваскрипт, то не составит труда его переделать под себя.
Задать необходимые кординаты и размеры динамически передвигаемого слоя.

Спустя 5 минут, 2 секунды (16.12.2011 - 11:42) irina1104 написал(а):

irina_rambler@mail.ru или zakaz@polmar.ru

Спустя 9 минут, 34 секунды (16.12.2011 - 11:52) sebastjan написал(а):

Цитата (irina1104 @ 16.12.2011 - 08:42)

irina_rambler@mail.ru или zakaz@polmar.ru

сейчас коменты допишу и пошлю.

Спустя 1 минута, 9 секунд (16.12.2011 - 11:53) irina1104 написал(а):

Спасибо sebastjan !

Спустя 38 минут, 59 секунд (16.12.2011 - 12:32) sebastjan написал(а):

Цитата (irina1104 @ 16.12.2011 - 08:53)

Спасибо sebastjan !

Пожалуйста, разбирайся по немонгу с яваскрипт.

Спустя 12 минут, 2 секунды (16.12.2011 - 12:44) sebastjan написал(а):

Может ещё ому нибудь пригодится.
Только рартинку фоновую слою сами поставте.
Ну и допилите :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Untitled Document</title>
<style>
#blok{
	background-image: url(logo.jpg);
	position: absolute;
	height: 120px;
	width: 120px;
	left: 198px;
	top: -50px;
}
</style>
<script language="JavaScript">
<!--
var dd=document;
 function dv1(){
                 name='blok', stepx=30, stepy=20, count=0,  x=100,  y=-200, step=20, www=150, hhh=150, wminus=-7, hminus=-7; 
                  mv1();
                 /*name='b1' имя слоя который двигаем
				  stepx=30, stepy=20 количество шагов функции по горизонтали и вертикали
				  count=0  условная переменная с которой сравниваем количество шагов функции
				  x=100,  y=-200 расположение дива по горизонтали и вертикали
				  step=20  это количество выполнений функции 
				  www=150, hhh=150 начальная ширина и высота самого дива
				  wminus=-7, hminus=-7 это на сколько будем отнимать от ширины и высоты каждый раз при прохождении функции.
				   теперь запуск функции выполняющей все расчёты  mv1() */
                 }
  function mv1(){//1
      if(count<step)
	     {//2
	       count++; 
		   x+=stepx; /* увеличиваем значение для позиции по горизонтали */
		   y+=stepy; /* тоже самое */
		   www+=wminus; /* прибавляем отрицательное число (wminus=-7) к ширине */
		   hhh+=hminus;  /* тоже самое */         
         if(dd.layers){obg=dd.layers[name]} /* отпеределяем  броузер и передаём знчение в стиль */                  
         else{obg=dd.getElementById(name); obg=obg.style;} /* отпеределяем  броузер и передаём знчение в стиль */     
         obg.left=x; /* передаём значение в стиль диву позиционирования по горизонтали */
	     obg.top=y;  /* тоже самое - по вертикали */ 
		 obg.width=www; /* по ширине  */
		 obg.height=hhh; /* по высоте */                                         
         vr=setTimeout('mv1()',10);
	    }//2
	 }//1 
-->	  
</script>
</head>

<body  onLoad="dv1()">
      <div id="blok"></div>
</body>
</html>

Спустя 31 минута, 52 секунды (16.12.2011 - 13:16) bodja написал(а):

Ну вот, а я думал sebastjan зашифровался

Добавте к функции opacity и clip -получим еще более офигенные эффекты.
Правда я над clip еще пока думаю

Спустя 4 часа, 59 минут, 23 секунды (16.12.2011 - 18:15) sebastjan написал(а):

Цитата (bodja @ 16.12.2011 - 10:16)

Ну вот, а я думал sebastjan зашифровался :ph34r:
Добавте к функции opacity и clip -получим еще более офигенные эффекты.
Правда я над clip еще пока думаю :rolleyes:

bodjaПРивет. Как раз твоя помощь нужна, может знаешь почему при изменении доктипа

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

на

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

перестаёт работать яваскрипт. <_< Я не понял.
В добавок к теме по самой функции , чтоб красиво было надо поставить условие в функцию.
При условии когда количество проходов функции равно == количеству заданных шагов,
стилю дива передать свойчтво (display: none;) чтоб пропал совсем.
Ещё немного отходя от темы -но затрагивая косвенно.
В РНР используя функцию nl2br() и при выводе из БД, вставляются <br />
НО если в документе стоит доктип

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

То валидатор поругивается, но не кретично. <_<

Спустя 10 часов, 49 минут, 32 секунды (17.12.2011 - 05:05) bodja написал(а):

Цитата

Как раз твоя помощь нужна, может знаешь почему при изменении доктипа

Нескажу,я пользуюсь этим

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

насколько мне известно ,то вторая строчка нужна,для правильной браузером верстки под новый стандарт,
чтобы яваскрипт неработал - это новость.
Пробовал добавить с "http://www.w3.org/TR/html4/loose.dtd",у меня яваскрипт пашет.ИЕ6 и Опера.

Цитата

При условии когда количество проходов функции равно == количеству заданных шагов,
стилю дива передать свойчтво (display: none;) чтоб пропал совсем.

Функция в ноль из за шагов не попадает ?

Цитата

В РНР используя функцию nl2br() и при выводе из БД, вставляются <br />

я использую str_replace ,так как мне нужно все равно еще кое какие символы через нее убивать.В нее можно массивы символов и букаф ложить для замены - попробуйте.

Спустя 1 час, 46 минут, 38 секунд (17.12.2011 - 06:51) Pulse написал(а):

sebastjan

Цитата

перестаёт работать яваскрипт. <_< Я не понял.

Попробуйте добавить пиксели в переменную, когда передаёте диву новое значение.

obg.left=x + 'px'; 
obg.top=y + 'px'; 
obg.width=www + 'px';
obg.height=hhh + 'px';

Спустя 17 часов, 47 минут, 56 секунд (18.12.2011 - 00:39) sebastjan написал(а):

Pulse
Точно, добавил явно 'px' и стало работать при доктипе
Спасибо ,ни когда бы не догодался.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Спустя 17 минут, 55 секунд (18.12.2011 - 00:57) killer8080 написал(а):

Цитата (sebastjan @ 17.12.2011 - 23:39)

Точно, добавил явно 'px' и стало работать при доктипе

тут ещё зависит от браузера. При доктайпе xhtml strict в опере работает, в ФФ нет, требуется обязательно указывать единицы измерения.

Спустя 19 часов, 53 минуты, 9 секунд (18.12.2011 - 20:50) sebastjan написал(а):

bodja
При условии когда количество проходов функции равно == количеству заданных шагов,
стилю дива передать свойчтво (display: none;) чтоб пропал совсем.

Цитата

Функция в ноль из за шагов не попадает ?

Немного не понял но думаю ты говоришь о остановке функции и выходе.
Не скажу что сразу у меня получилось, давненько не занимался этим, синтаксические ошибки всему голова. :D
Вот рабочий пример о том что я говорил.
работает и в Опере и ИЕ6, дожно и в других работать.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>
<style>#blok{background-image: url(logo.jpg);position: absolute;height: 120px;width: 120px;left: 198px;top: -50px;}</style>
<script language="JavaScript">
<!--
var dd=document;
var count=0;
 function dv1(){
          name='blok', stepx=30, stepy=20,   x=100,  y=-200, step=20, www=150, hhh=150, wminus=-7, hminus=-7; 
		  mv1();
		  }
function mv1(){//1
      if(count<step){//2		   
         count++; 
		 x+=stepx; 
		 y+=stepy; 
		 www+=wminus; 
		 hhh+=hminus;         
      if(dd.layers){obg=dd.layers[name]}                
      else{obg=dd.getElementById(name); obg=obg.style;}   
         obg.left=x+"px"; 
	     obg.top=y+"px";  
		 obg.width=www+"px"; 
		 obg.height=hhh+"px"; 
		 vr=setTimeout('mv1()',10);
		 	if(count==step){obg.display='none';}
		}//2
	 }//1 
-->	  
</script>
</head>
<body  onLoad="dv1()">
      <div id="blok"></div>
</body>
</html>

Быстрый ответ:

Здесь расположена полная версия этой страницы.