Я пять раз прочитал текст сообщения, посмотрел на название темы.... Но не смог понять чего надо.
Если у Enya, есть такой скрипт, то, показывать, как такое сделать, вроде не нужно. А что тогда нужно?
| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Общие вопросы > изменение ширины div-a по событию onMouseover |
| Автор: Enya 7.2.2008, 23:55 |
| У нас есть div высота 100% ширина 1-2рх, при попадании курсора мыши на эту полоску. Ширина увеличивается стремительно до 25рх, соотвественно когда курсор уходит - то так же стремительно причется в 1-2рх шириной полоску. Много всякой инфы по событиям связанными с элементами формы, а вот по таким мелким анимационным не очень. Буду благодарна (+) за помощь. |
| Автор: ksnk 8.2.2008, 00:38 |
| Enya, Чудес, как правило, не бывает. Видимо скрипт чего-то хочет от этой полоски, или в CSS про нее чего-нибудь такое написано. Откройте страничку в FireFox с установленным FireBug и сделайте Inspect Element. Возможно, что-нибудь прояснится... |
| Автор: Ghirik 8.2.2008, 00:46 |
| ksnk, Вы наверное экстрасенс Я пять раз прочитал текст сообщения, посмотрел на название темы.... Но не смог понять чего надо. Если у Enya, есть такой скрипт, то, показывать, как такое сделать, вроде не нужно. А что тогда нужно? |
| Автор: KuZyagroup 8.2.2008, 05:04 | ||
| 2Ghirik - коходу ksnk вообще не экстра сэнс. Он ответил явно не на вопрос Enya. 2Enya Сейчас накидаю план, когда освобожусь напишу пример. 1. ловим onMouseOver и передаем в myJS() наш див(или ловим его в функции по id) 2. зaпускаем c задержкой по setTimeout myJS если надо Что делает сама JS. Она узнает текущий размер div-a и если надо увеличиваетпо сеттаймаут примерный код
Добавлено через 13 минут и 56 секунд по ходу выполнения кода советую выкурить первых две темы факъю данного подфорума http://forum.vingrad.ru/faq/topic-148995.html http://forum.vingrad.ru/faq/topic-185836/kw-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82%D1%8B-this-settimeout.html |
| Автор: Enya 8.2.2008, 09:53 | ||
|
| Автор: SelenIT 8.2.2008, 09:58 | ||
"Коходу" первым "экстрасенсом", догадавшимся, что нужна анимация по событию, оказался KuZyagroup. Я, стало быть, вторым  Но вот пример кода, увы, явно безграмотный. А вот рабочий вариант:
Тут все параметры анимации, а также анимируемый объект и направление анимации (сворачивать или разворачивать) хранятся в статических переменных ф-ции (чтоб не заморачиваться с привязкой this), и нет неявного eval в таймауте... |
| Автор: ksnk 8.2.2008, 11:43 | ||||
| Ну да, в цирке мне, видимо, выступать пока рано. ;-) Если изменить первые строчки функции SelenIT'а вот так
, то можно будет писать в html немного поменьше:
|
| Автор: KuZyagroup 8.2.2008, 13:40 |
| 2SelenIT согласен написано криво, но я жн подчеркнул что это не код а направление в котором нужно писать. П.С. 2Enya Вы хоть разобрались, а то в вашем посте( копи пастлом сделаный) JS с ошибками Добавлено через 4 минуты и 44 секунды 2ksnk - this +setTimeout это опасная возможность словить грабли |
| Автор: bars80080 8.2.2008, 13:56 |
| SelenIT, конкретно по вашему коду, для одиночной панельки подходит на ура, а если вопрос стоит в нескольких скажем я их просто разместил друг за другом, наводим мышь на одну, затем сразу на следующую и т.д., они разворачиваются, но обратно сворачиваться не хотят в меру своего разумения js, я так полагаю, там просто объект один и ему присваиваются каждый новые параметры, в т.ч. указатель на див, а вот как сделать чтобы всё равно сворачивалось? |
| Автор: SelenIT 8.2.2008, 14:03 |
| KuZyagroup, в том-то и фокус предложения ksnkа, что this передается только один раз, до возникновения граблей Грабли тут, по-моему, могут быть в другом месте - в Gecko (из-за нестандартного параметра-задержки), и то лишь если поменять аргументы местами... bars80080, абсолютно верное замечание. Об универсальности я действительно особо не задумывался. Первая мысль - завести хеш анимируемых элементов и передавать их id (а заодно и анимировать все разом, по одному таймеру - меньше вычислений), но не исключаю, что есть решение и лучше... |
| Автор: ksnk 8.2.2008, 17:34 | ||
| SelenIT, Можно обойтись одной функцией как сейчас. Нужно только заменить setTimeout на setInterval и переписать чуть-чуть работу с ним. Ну и сбрасывать "предыдущую" анимацию в начальное состояние anim.obj.width=''. Вот. Двигается немного глючно - зато спортивно - все в одной функции
|
| Автор: SelenIT 9.2.2008, 05:33 | ||
Для полноты картины я все-таки довел до реализации свою идею с хешем (точнее, двумя, как оказалось;) внутри ф-ции:
Заодно исправил идиотскую арифметическую ошибку с расчетом задержки для таймаута (стр. 6 в моем прошлом коде - должно быть как в стр. 4 в новом)... И чуть увеличил величину и время "выезда" табов - для наглядности. |
| Автор: Ghirik 9.2.2008, 07:04 |
| Ох и упрямы Вы человек,SelenIT! Класная реализация! Я как раз собирался подобную штуковину делать, а тут так красиво решено.... Спасибо. P.S. только что то в FF не видно дивы, может я не так собрал страницу.... Ага, стили не правильно прикрутил... Все, работает в FF. |
| Автор: Enya 9.2.2008, 14:23 | ||||
| А если полоску Div расположить по центру. то в какую сторону будет увеличиваться ширина? Добавлено через 5 минут и 37 секунд Я использовала вот этот код.
А почему увеличивается в право? а если в лево? можно?  |
| Автор: AKS 9.2.2008, 18:02 | ||||||||
Можно хоть вправо, хоть влево, хоть в обе стороны. Для этого достаточно знать принципы позиционирования элементов. Тогда и js-код менять не понадобится. Вот простой пример (для "раздвижения" в обе стороны): css:
html:
Не "лежит" у Вас душа к closures. ;) А ведь тогда можно было обойтись без обращения к глобальным данным (статическим св-вам функции). Как мне кажется, это бы позволило сделать решение более производительным. |
| Автор: Ghirik 9.2.2008, 22:34 |
| А подскажите, пожалуйста, как height:10%; прикрутить к доктипу XHTML 1.0 Transitional. И вообще, может у кого есть ссылочка на современное русское описание CSS. А то я чувствую, что моих знаний недостаточно... вернее, отсутствия знаний недостаточно... |
| Автор: SelenIT 10.2.2008, 00:28 | ||
AKS, скорее у меня мозги не всегда соображают, как ими воспользоваться . Вот и тут - параметры я еще могу представить, как заclosur'ить, но вот как через closures "захватить и удержать" сами анимированные объекты, особенно когда их много, без размножения таймеров - пардон, откровенно туплю. Буду весьма благодарен за подсказку. И за указание на промахи по части производительности тоже.Ghirik, про CSS http://htmlbook.ru/css2/ неплохой справочник, еще неплохо http://wdh.suncloud.ru/css01.htm написано. Но многое легче запоминается не по справочникам, а из практики. Например, то, что размеры в процентах наследуются только от явно указанной высоты, и если нужны проценты от экрана, то необходимо указывать 100%-ю высоту, начиная с корневого элемента - html, body { height: 100%; }. Хотя здесь это оффтопик ;) |
| Автор: Ghirik 10.2.2008, 00:49 | ||||
Как там у Шерлока - "Ну, когда-то я это знал, а потом изрядно забыл" SelenIT, спасибо. Ни фига не оффтопик, а конкретная рекомендация по использованию кода, выложенного в этой ветке. Вот, я тут свой вариант нарисовал:
Ну шибко доволен результатом  Понравилось глобализовать массив через document.getElementsByTagName. И очень легко, можно менять поведенчиские свойства всех дивов страницы через отбор по классу при начальной загрузке. Даже id не требуется.... Немного изменив основную функцию, можно приводить элементы к заданным размерам и по вертикали, а направление раскрывания определить стилями. Особенно хорошо IE анимирует... |
| Автор: AKS 10.2.2008, 08:20 | ||||
Да я имел ввиду то, что можно сделать в точности, как у Вас (с сохранением ссылок на DOM-узлы в объекте), просто еще вместо хранения параметров анимации в св-вах функции anim "засунуть" их в переменные функции. Вот, примерно так:
|
| Автор: Enya 10.2.2008, 13:20 |
| AKS, с основными принципами позиционирования знакома, но вот сделать увеличение ширины в лево не получилось. |
| Автор: ksnk 10.2.2008, 13:40 | ||
AKS,
По сравнению с таким способом у способа SelenIT'а есть большое преимущество - параметры для настройки можно писать практически в любом месте программы. а в Вашем - нужно ковыряться в исходном коде функции. т.е. Нельзя , к примеру, в библиотеку запихать , которую потом минифицируют или упакуют... |
| Автор: AKS 10.2.2008, 14:28 |
| ksnk, еще напишите, что необходим интерфейс, который бы позволил принимать вводимые посетителями сайта параметры для анимации (размер, задержка). И зачем "ковыряться" в функции – установил нужные константы и все. А то, что варьируется можно передавать вместе с id/direction. Да и "поковыряться", если что, в функции можно – лучше, чем ковыряться в носу от безделья и лени. ;) Enya, у Вас не получается с тем примером, что я написал вчера? |
| Автор: Enya 10.2.2008, 14:34 |
| AKS, да, не вышло. |
| Автор: AKS 10.2.2008, 14:45 | ||||
Enya, честное слово - не знаю, почему у Вас не "вышло". Вот такие правила css расположат блок (внутренний) посередине документа, а "выдвигаться" он будет влево:
А вчерашний вариант должен был позволить блоку "раздвигаться" в обе стороны. Ей богу не пойму, почему у Вас все иначе... |
| Автор: ksnk 10.2.2008, 15:08 | ||||
А для другого приложения - установил новые параметры и все...? И для третьего... А функция обязана сидеть в той html'е , в которой применяется, а совсем не в отдельной библиотеке? слишком много ограничений... Вообще-то более разумно , imho, было бы хранить такие границы в html разметке. Вдруг кому-то понадобится оранизовать какую-то сложную систему менюшков...
|
| Автор: AKS 10.2.2008, 15:34 |
| ksnk, для того, чтобы функция "сидела" в библиотеке, она должна быть универсальной. Сумеете написать такую? Да нет, конечно. Даже, если получится "накропать" что-то, претендующее на готовое решение "на все времена", то это должно получиться нечто монструозное. А Вам ведь известно, к чему могут привести попытки унификации. Если говорить конкретно о "системе менюшков", то любые эти min/max будут совершенно непригодны. Простое увеличение шрифта превратит такую "систему" в "кашу". Я это все к тому, что js-библиотеки - это утопия. Осознание этого приходит с пониманием того, насколько нестабильно окружение, в котором должна быть выполнена js-программа. На мой взгляд, "терапия" должна иметь в своем распоряжении инструмент, заточенный под конкретную задачу. И чем он острее (тоньше, если угодно), тем он эффективнее. А приведенные здесь примеры все непригодны - они хороши лишь для "тренинга". В нашем случае, например, функция должна обязательно получить id элемента, а это уже немалое ограничение. Удобно ли ее использовать при установке обработчиков посредством addEventListener/attachEvent? |
| Автор: ksnk 10.2.2008, 17:16 | ||
 Следуя такой "установке" вообще ничего "универсального" делать не стоит. К тому-же универсальное на все времена или на пару ближайших проектов-сайтов, разные страницы которых вполне вероятно захотят использовать что-то такое? |
| Автор: Ghirik 13.2.2008, 22:03 | ||||
| Немного позанимался исследованием возможного применения такого вида всплытия, и вот к каким результатам пришел. В варианте с хэшем можно смело использовать style.clip. Для кроссбраузерного присвоения начальных значений следует делать такую запись.
Это, если вы используете строгий или переходный доктайп. Первая строчка по спецификации, вторая для IE( ).Еще лучше, эти строчки прописать прямо в тэгах. Из JavaScript-а значения clip прописываются нормально с запятыми, и в IE, и в остальных. Если потребуется доставать clip:rect, можно воспользоваться подобным выражением:
Эта строка достает из 'rect(auto, auto, auto, 40px)' значение 40 и делает его числовым. В выложенном мной http://forum.vingrad.ru/index.php?showtopic=195118&view=findpost&p=1407890 использовать clip у меня не получилось. Основная причина, циклическое считывание действующего значения clip:rect полностью забирает ресурсы. Но мой вариант хорошо заработал с уводом дивов в отрицательные значения, за экран. Выложить работающий код пока не могу, потому, как писал скрипт под специфическую задачу. Если потом сделаю универсальный вариант - покладу сюда. Отлично работает ещё один вариант. Мне, кстати, он понравился больше всего.  Вместо дивов я использовал изображения, генерируемые "на лету" php функцией (http://door-to.ru/LamerPhotoBlog/scripts/image_POST_rotation_through_iframe.htm) и возвращаемые в скрытый фрейм. Работает это молниеносно, и очень годится для информирования в реальном времени посетителей сайта. Примерно так... |
| Автор: Ghirik 15.2.2008, 19:27 |
| Я прошу прощения, бессмысленный оказался пост, модераторы, удалите пожалуйста. |
| Автор: Onis 14.8.2008, 22:15 | ||
| SelenIT, Переделал ваш шикарный скрипт для себя. Он теперь у меня работает с привью картинок, пока всё симпатично. Но вот никак не могу домыслить как сделать так чтобы картинки увеличивались пропорционально во все стороны а не от верхнего левого угла. И вообще это реально?
зы: я грэйв диггер |
| Автор: Onis 14.8.2008, 22:50 | ||
| Сам допер. Симпатично получилось: http://www.greatfruit.com.ua/thumbs/
В скрипте я переделал то что при начале анимации картинка получает абсолютное позиционирование чтобы не рушить таблицу и не сдвигать другие изображения. И чтобы совсем кавайно было добавил z-index чтобы текущее изображение не перекрывалось уменьшающимся соседним. В общем шикарный у SelenIT скрипт вышел. |
