Javascript.RU

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

Чудеса математики js при padding
привет, есть код выдвижной менюшки.

<div><a href="javascript:col()" id="tit">Скрыть</a></div>

<div id="div" style="margin: 0px 15px">
   много текста
</div>


<script type="text/javascript">
  var div = document.getElementById("div");
       
function col(){
    if (div.clientHeight >= step){
        div.style.height = div.clientHeight-1;
        setTimeout("col()",10);
    }
} 
</script>


всё это дело отлично медленно скрывается всё ок.
но как только добавляю параметр padding
<div id="div" style="margin: 0px 15px; padding: 3px">
при нажатии на кнопку, вся менюшка начинает бесконечно открываться вниз Оо, что за чудеса?
вставил алерт
function col(){
    var step = 1;
    [B]alert(div.clientHeight);[/B]
    if (div.clientHeight >= step){
        div.style.height = div.clientHeight-2;
        setTimeout("col()",10);

и выяснил что математичка "-" не работает, выводит 88,90,92,94....
что за бредятина. Повторяю что при удалении padding всё идеально работает.

дефолт

при нажатии (в действии) постепенно скрывается всё ок

вот применяю паддинг, как видно паддинг применяться

и вот баг, при нажатии пошло бесконечное увеличение (в действии)

Последний раз редактировалось borovik, 09.07.2011 в 19:37.
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2011, 19:54
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Всё очень даже логично. Добавляемые padding`и идут в счет общего увеличения высоты контейнера. Свойства типа clientHeight и offsetHeight считают с учетом всех padding`ов, а CSS свойство height — нет, поэтому результирующая выстота растет, несмотря на то, что вы пытаетесь ее уменьшать. Для того, чтобы восстановить нормальный порядок анимации, вам нужно самому учесть наличие padding`ов и вычитать их тоже при анимации.


P.S. И, кстати, не забывайте об единицах измерения, когда устанавливате значение div.style.height

Последний раз редактировалось Amphiluke, 09.07.2011 в 19:58.
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2011, 20:05
Интересующийся
Отправить личное сообщение для borovik Посмотреть профиль Найти все сообщения от borovik
 
Регистрация: 09.07.2011
Сообщений: 15

Amphiluke,
padding 12px;
в функции
div.style.height = div.clientHeight-1-24+"px";

как правильно рассчитать? у меняже рекурсия 12+12 каждый раз вычитать будет не правильно
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2011, 20:09
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Почему это неправильно? У вас padding`и-то постоянные. Вот вы и вычитаете эту постоянную величину
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2011, 20:14
Интересующийся
Отправить личное сообщение для borovik Посмотреть профиль Найти все сообщения от borovik
 
Регистрация: 09.07.2011
Сообщений: 15

так например есть 100px ; padding 20px;
надо их один раз вычисть получить 60px и уже потом по -1 в рекурсии, поулчается ~60проходов,
а если по вашему в каждой рекурсии будет отсекаться по 40px; ~2прохода
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2011, 20:25
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

<div><a href="javascript:col()" id="tit">Скрыть</a></div>
	<div id="div" style="margin: 0px 15px; border:1px solid; padding:12px; overflow:hidden;">
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	</div>
<script type="text/javascript">
  var div = document.getElementById("div");
        
function col(){
    var step = 1;
    if (div.clientHeight >= step){
        div.style.height = div.clientHeight-1-24+"px";
        setTimeout("col()",10);
    }
}
</script>


Если вы проанализируете, что происходит, то поймете, почему так. Вы анимируете уменьшение по 1px только значения высоты, а padding`и остаются постоянной величиной. Поэтому ваш код будет себя неправильно вести, когда менюха свернется до нулевой высоты, точнее по достижении нулевого значения div.style.height. При этом ваш код, который считывает по таймеру значение свойства clientHeight, будет пытаться далее уменьшать высоту в отрицательные области, поскольку наличие постоянных padding`ов не даст свойству clientHeight уменьшаться до значений меньших суммы paddingTop + paddingBottom.
Если вы откроете консоль, то увидите, как растет число ошибок CSS, при попытке установки отрицательной высоты.
Чтобы этого избежать, вам так же надо останавливать анимацию по достижении высоты 24px или же анимировать уменьшение padding`ов, как это делает jQuery.


P.S. Еще раз повторю, если с первого раза было непонятно:
div.style.height = clientHeight − paddingTop − paddingBottom

Последний раз редактировалось Amphiluke, 09.07.2011 в 20:33.
Ответить с цитированием
  #7 (permalink)  
Старый 09.07.2011, 22:02
Интересующийся
Отправить личное сообщение для borovik Посмотреть профиль Найти все сообщения от borovik
 
Регистрация: 09.07.2011
Сообщений: 15

большое спс, разобрался, трабл был в "сумме информативных переменных". щас покрутил понял их строение )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заглушка при отсутствии поддержки JS realus Javascript под браузер 3 26.10.2010 13:34
Запуск при редиректе некой js функции Dorsaj Элементы интерфейса 0 22.10.2010 16:05
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18
Как отразить картинку при помощи JS. 2dkott Элементы интерфейса 4 03.09.2009 22:51
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 16:00