Форум

Fenjmen51 · #1 (**permalink**) 29.05.2012, 07:11

Пример: http://www.пкмосква.рф/13/

Есть код разворачивающей и сворачивающей функций, отличаются они двумя знаками: >/< и -/+

Хочется код сократить до единственной функции, определять как-то оба знака, есть способы изменять знак в выражении на js?

Понятно, конструкции превосходящие по сложности, текущий вариант бесполезны

Или любые упрощения кода, может у кого хорошии функции есть свои, в сети ничего по данному вопросу не нашёл?

function Show(Id, h)
{
   var obj = document.getElementById(Id);
   if (obj.offsetHeight < h)
   {
      obj.style.height = (obj.offsetHeight + 10) + "px";
      setTimeout (function(){Show(Id, h)}, 8);
   }
}

function Hidden(Id, h)
{
   var obj = document.getElementById(Id);
   if (obj.offsetHeight > h)
   {
      obj.style.height = (obj.offsetHeight - 50) + "px";
	  setTimeout (function(){Hidden(Id, h)}, 8);
   }
}
</SCRIPT>

Было бы идиотизмом не иметь подобных возможностей в современном языке программирования

9xakep · #2 (**permalink**) 29.05.2012, 09:30

Ставишь в качестве аргмента еще один параметр, и проверяешь, если он такой-то, то знак >, если другой, то знак: < итд

Deff · #3 (**permalink**) 29.05.2012, 11:32

Fenjmen51,
Cтандатный вариант toggle -
При разворачивания добавлем класс( или иной атрибут) при очередном действе смотрим - атрибут есть - сворачиваем - атрибута нет - разворачиваем...

А вообще сейчас это всё через css делается http://hostjs-mybb2011.narod.ru/smooth_deployment.htm

<!DOCTYPE HTML>
<div class="height" style="width:400px" onMouseOver="this.id='height'">
Очень качественное развёртывание блока, плавное!
</div>

<STYLE>
BODY, HTML{margin:0;padding:0}
div.height{
  margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;
   min-height:20px;
}
#height:hover{
   max-height:400px;
   height:400px;
   transition-duration: 1.66s;
  -webkit-transition-duration: 1.66s;
  -moz-transition-duration: 1.66s;
  -o-transition-duration: 1.66s;
 -ms-transition-duration: 1.66s; /* IE9+ */

}
#height{
   transition-duration: 1.66s;
  -webkit-transition-duration: 1.66s;
  -moz-transition-duration: 1.66s;
  -o-transition-duration: 1.66s;
 -ms-transition-duration: 1.66s; /* IE9+ */
}
</style>

Fenjmen51 · #4 (**permalink**) 29.05.2012, 18:21

Хочется избавиться от лишних 5 строк, а не добавить ещё 2, интересно было бы менять знак, действительно добавить ещё переменную и передавать ею знак, например, так 2 символа будет лишних. С if дураку понятно, что можно. Или можно обойтись без двойного повторения и как-то переменной знак задать или ещё что придумать?

Пример с CSS3 и трансформацией, в IE9, Фаерфоксе - не работает, просто быстро открывает, может правда им можно большее время задать.
Работает в Опере. Однако вопрос у меня про знаки остаётся, можно ли их как-то менять?

Про проверку атрибутов, выходит тоже две функции с if ? те же 10 строчек, аналогично и с CSS level 3, тоже строк больше. Люблю всё делать на нём, однако не в этот раз

Deff · #5 (**permalink**) 29.05.2012, 18:47

Fenjmen51,
У Вас же есть проверка - объединяйте в одну функцию

<!DOCTYPE HTML>
<div id="height" onMouseOver='Toggle("height", 400,true)' onMouseOut='Toggle("height", 50,false)'>
Очень качественное развёртывание блока, плавное!
</div>

<STYLE>
BODY, HTML{margin:0;padding:0}
#height{margin:25px 0 0 5em;padding:10px;background:#55f;width:400px;color:white;border-radius:15px;cursor:pointer;border:3px solid #eee;}
</STYLE>

<SCRIPT>
function Toggle(Id, h, S)
{
   var obj = document.getElementById(Id);
   if (obj.offsetHeight < h&&S)
   {
      obj.style.height = (obj.offsetHeight + 10) + "px";
      setTimeout (function(){Toggle(Id, h,true)}, 8);
   }
   if (obj.offsetHeight > h&&!S)
   {
      obj.style.height = (obj.offsetHeight - 50) + "px";
	  setTimeout (function(){Toggle(Id, h,false)}, 8);
   }
}
</SCRIPT>

Форум

Справочник

Discord чат

Курсы javascript