Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать плавно выпадающию панель? (https://javascript.ru/forum/misc/2116-kak-sdelat-plavno-vypadayushhiyu-panel.html)

YISHIMITSY 04.11.2008 12:09

Как сделать плавно выпадающию панель?
 
Кто нибудь подскажите плиз, как сделать так, чтоб была какая нибудь ссылка, на неё нажимаешь, и из под неё плавно выпадает панель в которой можно чё нить разместить (другие ссылки например), а при повторном нажатии сворачивалась обратно?

Octane 04.11.2008 12:32

А причем здесь раздел AJAX?

Берем 2 HTML-контейнера блочного типа, один вложен в другой. Добавляем элемент, способный получать фокус ввода, например, гиперссылка, для переключения состояния открыт/закрыт. Добавляем обработчик события нажатия ссылки, по которому определяем через offsetHeight высоту вложеного блока и по таймеру соответственно постепенно меняем высоту внешнего блока. Для внешнего блока нужно не забыть установить CSS-свойство overflow: hidden; и чтобы избежать трудностей, по возможности, не использовать вертикальный margin и padding.

Ну а если лень самому писать, возьми, например, jQuery и используй метод slideToggle.

YISHIMITSY 04.11.2008 12:54

т.е. это ваще без JavaScript делается? Мне ваще-то не лень самому писать, но просто я не совсем догоняю как это делается... Octane,
не мог бы ты привести пример?

Kolyaj 04.11.2008 13:05

Цитата:

Сообщение от YISHIMITSY
Мне ваще-то не лень самому писать

Тогда это вообще в раздел "Работа".

YISHIMITSY 04.11.2008 13:12

ну помогите плиз, кто-нибудь скиньте пример кода, я просто в этом плохо разбираюсь

Octane 04.11.2008 13:27

Вложений: 1
Цитата:

Сообщение от Kolyaj (Сообщение 8082)
Тогда это вообще в раздел "Работа".

Kolyaj, он написал не лень :D

В прикреплённом файле тестовое задание (именно то, что вам нужно), которое выполнял программист, при поступлении на роботу в студию, где я работаю. Код конечно не на высоте, но как пример подойдет.

YISHIMITSY 04.11.2008 13:35

Octane, пасибо, выручил!

YISHIMITSY 04.11.2008 14:27

блин, там тока с кнопками, а с простыми ссылками так не проделывается...

Octane 04.11.2008 14:38

Да. Переделать для ссылок конечно нереальная задача…

Octane 04.11.2008 15:20

Цитата:

Сообщение от YISHIMITSY (Сообщение 8093)
я ваще в Javascript на шарю :(

Ну это только ваша проблема :)
Цитата:

Сообщение от YISHIMITSY (Сообщение 8093)
как там переделать? :mad:

Разобраться и попробовать переделать самому, что не будет получаться или найти и исправить ошибку здесь всегда помогут, а за готовыми решениями вам Kolyaj уже написал куда обращаться…

Kolyaj 04.11.2008 20:06

Цитата:

Сообщение от Octane
Kolyaj, он написал не лень

И правда :)

twolf 06.11.2008 16:54

решил потренироваться. но застрял.
Создал два блока и элемент на котором кликаем.
При клике блок меняет свою высоту, но не до 100 px а до бесконечности.
Что тут не так?
Вот такой простенький код.
function run(id){
  var maxheight = 100;
  var elem = document.getElementById(id);
  var h = elem.offsetHeight; 
      slide = function(){ 
          ++h;
          elem.style.height = h + 'px';
      }
  if (h > maxheight) clearInterval (intervalID);
  if (h < maxheight) intervalID = setInterval('slide()',1);     
}

Octane 06.11.2008 17:40

Таймер уничтожается в функции run, которая создав его, больше ни разу не вызывается.

Меняем высоту родительского блока, а высоту вложенного блока только спрашиваем через offsetHeight, а у вас работа идёт с одним элементом.

В принципе 2 блока не обязательно, можно и одним обойтись, только код будет по сложнее, а можно ещё со свойством clip: rect(…); попробовать сделать.

twolf 06.11.2008 17:57

Цитата:

Сообщение от Octane (Сообщение 8174)
Таймер уничтожается в функции run, которая создав его, больше ни разу не вызывается.

действительно, сам догадался, не успел написать. но Вам все равно спасибо.
Цитата:

Сообщение от Octane (Сообщение 8174)
а у вас работа идёт с одним элементом.

ну да. пока такую задачу и ставил. :-)

Вот как раз спросить хотел. На сколько принципиально использование двух блоков. и почему высоту надо менять именно у внешнего

Octane 06.11.2008 18:21

Цитата:

Сообщение от twolf (Сообщение 8176)
На сколько принципиально использование двух блоков.

Просто при использовании 2-х блоков появляется возможность сделать так, чтобы контент был скрыт сразу же после загрузки CSS, хотя есть и недостаток, пользователи с выключенным JavaScript не смогут увидеть такой текст, им придётся выключить ещё и CSS :) Да и верстальщики обычно делают подобные вещи из двух блоков, семантика тут особо не нарушается. В случае с одним блоком, его содержимое скрывается немного позднее (обычно), в момент когда срабатывает JavaScript, потому что надо запомнить высоту. Если эти блоки довольно большие, то возникает неприятный эффект с дёрганьем страницы. Недостаток в том, что нужно будет где-то хранить высоту этих блоков и обновлять её каждый раз при изменении содержимого. В общем надо выбирать по ситуации, какой из способов наиболее подходящий. Есть ещё способ с использованием абсолютно позиционированных блоков и свойства clip, но я сам не пробовал реализовать такой эффект с его помощью.
Цитата:

Сообщение от twolf (Сообщение 8176)
почему высоту надо менять именно у внешнего

потому что у него задано свойство overlow: hidden; и для того, чтобы потом знать на какую высоту разворачивать этот блок, спросив высоту вложенного.

twolf 06.11.2008 19:01

Octane, а тестовые задания еще есть? :)

Kolyaj 06.11.2008 20:23

Цитата:

Сообщение от Octane
ользователи с выключенным JavaScript не смогут увидеть такой текст, им придётся выключить ещё и CSS

http://harisov.livejournal.com/63790.html

Octane 06.11.2008 22:09

Вложений: 1
Цитата:

Сообщение от twolf (Сообщение 8179)
Octane, а тестовые задания еще есть? :)

Ну еще с градиентом в тексте есть :-) в прикреплённом файле.


Цитата:

Сообщение от Kolyaj
http://harisov.livejournal.com/63790.html

Ну да это может помочь в большинстве случаев, хотя мне не особо нравится идея писать разные версии CSS для пользователей с включенным JavaScript и нет, но когда безвыходная ситуация, пользуюсь этой техникой.


Часовой пояс GMT +3, время: 18:22.