Приветствую Вас!

Вот, значит, какая проблема:

Есть движок, у которого все элементы формы при наведении должны менять класс(css), а при убирании курсора, соответственно наоборот.

Вот, значит, как у меня сейчас сделано:


Только вот проблема, в ИЕ такая фишка не проходит...  

Придумал решение: Написать яваскрипт ф-цию, которая циклом прохожилась по всем элементам форм и ставит им на onrollover соответствующий класс и обратно, на onrollout. Пробовал сам написать, только не работает. Помогите, пожалуйста!

GZep, если с использованием JS, то так:

А можно написать функцию, которая проходилась бы циклом по элементам и задавала им onMouseOver и onMouseOver?

GZep, не надо ничего обходить циклом - ловите событие (при его всплытии) на уровне самой формы, и анализируйте объект-источник. В простейшем случае (как в данном примере, когда стили у кнопок и полей при наведении меняются одинаково) - примерно так:

Спасибо, но меня все-таки интересует вариант с циклом...  

GZep, да что Вы на этом цикле зациклились-то, простите за каламбур? Насколько я могу судить, делать это циклом сейчас "не модно и не современно".

GZep, ноу проблема:

Или так, только при этом для каждого элемента создается по паре экземпляров функции-обработчика, а можно было бы обойтись одной функцией на все события...

Nicholas_S, то, что нужно! Спасибо! Прошу извинить меня за настырность с этим циклом. Мне правда неловко! Всем Спасибо. Сейчас напишу универсальную ф-цию и выложу её для народа...
  

Это сообщение отредактировал(а) GZep - 3.11.2006, 16:35

SelenIT, ...нужно!  

Добавлено @ 17:25 
...блин, почему у меня кешируется все и не обновляется, ниче не пойму...

SelenIT, 

Прямо в "яблочко", как говорится! ;) Что ж, поделюсь с Вами своими "впечатлениями" по теме, т.к. автора темы, похоже, Вам "спасти" не удалось... ;)
Чуть-чуть переделал Ваш пример, ведь судя по таблице стилей, нужно на самом деле совсем немного (по "вашим следам" - легче топать ;) ):

Вызов:

AKS, здорово. Только я бы постраховался и проверил n на существование...

И еще очень хочется навесить вызовы из скрипта же, не трогая HTML - к сожалению, этому я еще не научился, может быть, поможете?

В принципе, в данном конкретном случае кроссбраузерность не нужна (в других браузерах CSS справляется сам), так что можно и не передавать событие при вызове, тогда весь JS легко выносится из HTML (и оформляется в виде .htc, к примеру). Но интересно динамическое навешивание обработчиков в общем случае, когда ссылка на event обязательна...

Это сообщение отредактировал(а) SelenIT - 3.11.2006, 18:21

А что мешает делать так?

hover становится несколько излишним, но для перестраховки не мешает.

Можно сделать и через behavior-стиль для IE: http://js2.ru/example/JsPrimeryCode-84.htm (пример - таблица)

Т.е. вопрос к автору темы - зачем стремиться к циклам, если без них работает?

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:18

SelenIT, 
 
Так ведь в функцию передается первым параметром ссылка на объект Event. 

Зачем? 

12345c, насколько я понял, автору нужно подсвечивать только один элемент, а не группу. Поэтому вариант с контейнером, по-моему, мимо. А вот behavior - по-моему, самое то.

AKS, с проверкой действительно я перемудрил - мне казалось, что при отсутствии класса у элемента n останется undefined, не подумал, что оно преобразуется в пустую строку...

SelenIT, вот, собрал из "домашних заготовок", для данного случая (пусть у формы будет id='forma'):

AKS, большое спасибо!
Опять этот "Коля" (callee)... видно, пришла пора мне познакомиться с ним поближе, в XXI веке без него никак 

SelenIT, "Колей" Zeroglif "ласково" называет caller'а - вызывающий объект, короче сказать, то самое, куда в функции укажет this. А здесь у нас arguments.callee - указатель на текущую функцию (удобная штучка ;) ).

Мда, вот как у меня, оказывается, все запущено - такие базовые вещи путаю...   
буду срочно исправляться!

SelenIT, arguments.callee незаменим в анонимных функциях. Вот пример, только что взял у "себя" с Xpoint (можно было бы так функцию f "присобачить"):


Добавлено @ 19:50 
SelenIT, что-то я глянул "со стороны" на фразу "взял у себя" - нехорошо! Основная идея в этом примере (obj.method || obj.another_method)() - от Zeroglif!

AKS, мощно, внушает   
Выходит, именно этой arguments.callee мне последнее время и не хватало. А я-то все пытался какими-то обходными маневрами this переназначить...

SelenIT, не-е-е, this не переназначить ни "обходными маневрами", ни какими другими - он "упрямый". Так что берегите время, оставьте его в покое ;) ...

Значит так...  

Сразу скажу, что от цикла я отказывать не буду.(без цикла у меня уже есть давно пример кода)

А вот, что у меня получилось нахимичить с циклом(не смейтесь тока  )


Меня интересует цикл for ( ; ; ), точнее то, почему он "не пашет"
  

А в Tools -> Advanced -> Error console ничего при этом не пишется?

Вот что пишет:

Event thread: load
Error:
name: TypeError
message: Statement on line 85: Could not convert undefined or null to object
Backtrace:
  Line 85 of inline#1 script in http://localhost/text.php
    if (content_form_elements[i].type == "checkbox" || content_form_elements[i].type == "radio")
          Line 28 of inline#2 script in http://localhost/text.php
    HoverFormElements();
  At unknown location
    [statement source code not available]

GZep, а что такое HoverFormElements() и откуда оно взялось?

Я попробовал убрать кое-что из кода и проверил - вроде бы работает. Может так:

Это у меня так ф-ция называется. Перед тем, как выложить разметку, я естественно покорректировал её(убрал то, что не в тему).

HoverFormElements() { = onload.function() {
 

Добавлено @ 20:58 

немогли бы Вы код с комментариями дать.  

GZep, 

Я бы с удовольствием, только я не знаю, что комментировать - ведь это же ваш код, просто я убрал несколько строк, показавшихся мне лишними. Напишите, что именно Вас интересует? 

GZep, у Вас переменная content_form_elements (и не только она), была глобальной, поэтому влиять на работу кода могло даже то, "что не в тему" (и, судя по сообщению Оперы, как раз влияло)...

Ура! Сделал!  
Огромное спасибо AKS'у за идею простого "лечения" цикла for( ; ; ).
Финальный вариант предпологает то, что в тегах форм не надо указывать ни стиль, ни действия, только то, что они input'ы.  

яваскрипт задает стандартные стили элементов форм, стили при наведении мыши, стили при убирании мыши. Он replace я отказался, потому что, вроде, проще просто поменять имя стиля без замен, ведь мы и так его знаем(поправьте, если не так)

Только textarea палки в колеса всемирного прогресса вставляет, ведь он не инпут.... 

А можно написать <input type="textarea"???

Добавлено @ 21:23 

SelenIT, я - просто обожаю префиксы, ну, и немножко пространство имен. Конфликтов имен у меня никогда еще не было, ни в пхп, ни в яваскрипте...    

Это сообщение отредактировал(а) GZep - 4.11.2006, 21:42

Писать-то можно, только толку никакого. ;)
А для textarea тогда уж можно отдельно задать обработчик ("раз пошла такая пьянка" ;) - т.е. раз уж Вы выбрали именно такой "тернистый" путь...).

А по-моему, путь просто отличный... Можно написать эту функцию, стили и все остальное забыть...все само будет делвться и в ИЕ 6-7 будет работать.

Народ, а как склеить массивы в javascript??? нигде найти не могу...  

http://javascript.aho.ru/files/js/ArrayJS.html#concat

content_form_elements = document.getElementsByTagName('input').concat(document.getElementsByTagName('textarea'));

Не работает! getElementsByTagName() почему-то возвращает массив, где последний элемент имеет значени null(по-моему). Из-за этого не работал цикл for(i=0; i<content_form_elements[i]; i++) {, а пришлось вместо него писать for(i=0; content_form_elements[i]; i++) {.

Поправьте, пожалуйста, строчку с concat.

Это сообщение отредактировал(а) GZep - 5.11.2006, 11:33

GZep, нельзя применить concat к коллекциям DOM - нет у коллекций этого метода в "распоряжении". 

А как тогда склеить можно?

Могу это сделать при помощи цикла, но хотелось бы покрасивее сделать...

GZep, по-моему, самый красивый вариант показал AKS здесь - вообще никаких циклов, компактно и кроссбраузерно...

А мне больше нравится, когда в начеле скрипт поставил, и все, больше ничего делать не надо. Вот только скрипт этот еще надо select и taxtarea понимать научить. Что я щас, собственно говоря, и делаю.  

GZep, а есть существенная разница, какой скрипт "в начале поставить и больше ничего не делать" - с циклами или без?

SelenIT, а, ну да, тот же тоже можно в начале поставить и ничего не делать, кроме назначения форме id   

Значит так...

С циклами ничего конкретного не получилось и я на них "забил". Прошу извинить меня за то, что игнорировал советы умных людей отказать от циклов. Надо было послушаться и не терять даром время. Что я имею на данный момент:
1-ое. В браузерах Opera и FireFOX прекрасно можно обойтись без javascript при помощи CSS, и все будет работать "как нельзя лучше". Остается решить проблему с всеми "любимым" Internet Explorer.

2-ое. Все-таки я признаю, что "отнимать" у тегов атрибуты типа class и id - не совсем верно...хотя скорее - совсем не верно.

3-тье. Код CSS(решает проблему в опере и мозиле):


4-ое. У всех "кпопкоподобных" присвоен класс input_button, для всего остального input_field.

5-ое. Чекбоксы и радио "батоны" в этой теме рассматривать вообще не стоит.

6-ое. Остается решить проблему с ИЕ. Вот тут я хотел спросить: может поставить обработчики на яваскрипте только, если браузер ИЕ(вообще всю ф-цию запихнуть в "тело условия"?

GZep, 

Так и сделайте! Скачайте whatever:hover и подключайте через behavior...

Одно понятно - идея правильная.

Что это вообще такое?

И я вообще заблудился на том сайте  Все на английском...

GZep, 

• Качайте сценарий
• Подключайте через таблицу стилей вот так: body { behavior:url("csshover.htc"); }
• Используйте сценарий в соответствии с лицензией

Ну а как это работает Вы мне объяснить можите? По-моему там много лишнего...регулярное выражение вот краем глаза вижу...Что это за проект? Это проект, который направлен конкретно на hover элементов формы в ИЕ? Или чтоб вообще сделать hover полнофункциональным.
Не скудитесь, пожалуйста, на слова. Хочется же не просто сделать, а еще и понять, что сделал.

GZep, 

Этот сценарий позволяет эмулировать поведение псевдоклассов :hover и :focus в IE для всех элементов, к которым они применены в таблице стилей. Конечно же для вашего случая там много лишнего - сценарий для вашей формы может быть лаконичней (что я мог предложить, я уже предлагал). 

AKS, вот Ваш пример, только немного переделал(сделал более читабельным), но суть не изменил. Чуть не забыл: я его в тело условия запихнул, которое проверяет тип браузера.

• id формы - form.
• e = arguments.callee(o, e[1], f), e[0]//ИЕ выдает ошибку: "\"0\" - есть null и не является объектом"
• Всё это можно как-нибудь в виде одной ф-ции записать? А не в виде 3-х...

  AKS, пожалуйста, не поленитесь помоч мне "разжувать" эту тему...

GZep, 

Можно:

Потом в форме:

И не пытайтесь добавить к имени стилевого класса строку ":hover". У Вас должен быть дополнительный класс .hover, имя которого и будет добавляться (удаляться) к уже имеющимся именам классов элементов формы.

Ну а как сделать чтоб только в ИЕ эта функция выполнялась? Воткнуть её в тело условия, а для других браузеров сделать эту функцию пустой? или как?

И зачем форме id присваивать в этом примере? Он ведь не нужен...

Это сообщение отредактировал(а) GZep - 7.11.2006, 18:22

GZep, 

А она и будет только в IE выполняться (сделайте первое условие пожестче против Opera   if(el && !window.opera), а то я забыл).

Вы написали, а я повторил...

Финальный вариант.

CSS

JavaScript
Для Windows Internet Explorer и Microsoft Internet Explorer

HTML резметка

• Чек боксы и радио "батоны" в этой теме не рассматриваются!
• Этот вариант идогда обновляется, если Вы его используете у себя, то советую иногда заглядывать сюда и сверять! Обращайте внимание на дату редактирования.
• Жду отзывы и замечания, если таковые имеются!

P.S.
AKS, поправь, пожалуйста, если что-то не так сделал.

Добавлено:

Теперь javascript функция будет выполняться только в Internet Explorer. В других браузерах эта функция вообще ни разу вызываться не будет. Это немного ускоряет работу скрипта, ведь раньше все браузеры вызывали функцию и прекращали ее выполнять когда натыкались на условие в ней. Теперь подсветка в браузерах отличных от ИЕ будет выполняться исключительно при помощи css. И теперь не надо писать:
<form onmouseover="HoverForm(event)" onmouseout="HoverForm(event)">,
теперь надо просто:
<form>
  

Это сообщение отредактировал(а) GZep - 21.11.2006, 15:48

Народ, прокомментируйте, пожалуйста, если есть какие-либо замечания...

Модифицирую приведённый пример, чтобы показать другой способ достижения того же:

Файл JsPrimeryCode-43.htc :
Демо - на http://javascript.aho.ru/example/zzzz55.htm (+ укоротил описания стилей)


Это сообщение отредактировал(а) 12345c - 21.11.2006, 17:06

12345c, так прокомментируйте вариант раз Вы его выложили. Расскажите как он работает, его достоинства и недостатки.

Вот я не пойму зачем вообще в подобных вещах пользоваться replace. Это ведь функция, для работы с текстом. Разве не быстрее просто менять имя класса?

Кроме того я заметил одну такую особенность в поведении javascript: при изменении класса с помощью javascript изменяются все параметры. Например, вы создали класс, где указан цвет фона и цвет рамки, а потом поменяли ява скриптом этот класс на другой, где указан только цвет фона. Так что же? Вы думаете что цвет фона поменяется, а цвет рамки останется от предыдущего класса? Ничего подобного! Цвет рамки в таком случае поменяется на стандартный, установленный в настройках браузера. Поэтому в своем примере я сделал так, что javascript вообще не меняет имя класса, а просто заменяет цвета, без css, сам.
Это я так, к теме сказал...  

А что комментировать, и так всё видно. Недостаток - лишний файл. Достоинство - компактнее. replace - чтобы убрать только добавленное имя класса, не трогая те, что были до него.
 Вы, видимо, не заметили, что я не поменял класс, а добавил : ) :

Я это прекрасно понял. Я это писал не к Вашему примеру, а просто рассказал особенность поведения javascript, по скольку это уместно в данной теме.

Ну, не все же такие профи  

Кстати, по вашему примеру то, что я говорил про особенность javascript все-таки относится, вроде. Вот посмотрите:

Этот отрезал из вашего кода. Сдесь при включении input_button:hover(это произойдет в опере и мозиле) все будет нормально, например параметр font останется от класса input_field,.input_button, где он был задан. А вот в ИЕ, где замену класса будет выполнять javascript не будет наследоваться параметры. То есть font станет стандартным, браузерным. В своем примере я это исправил примитивным, но надежным путем, я просто не менял класс, а задал параметры, которые надо поменять вручную, без css. Вот так ваш вариант будет работать правильно в ИЕ:

Вот так вот. Ваше мнение...???  

Совершенно не поняли. Яваскрипт не при чём, сложно ожидать от замены имени класса какого-то там наследования. 


Откуда такой вывод про IE и Javascript? Есть же живая ссылка на пример, разве вы не видите, что у элементов форм при наведении меняется фон, а шрифт остаётся тот же? Замена класса может быть прописана в стиле, естесственно предыдущий класс будет "забит" последующим, это обычное поведение для стилей, явакскрипт, бедный, ни при чём.


Автор скрипта тоже не меняет класс, он добавляет класс, разные вещи же:



против



Выше много классов, они могут перекрывать друг друга (если свойства сопадают, это по сути замена одного класса на другой), а могут дополнять. Если вам нужно при наведении только изменить цвет фона, то вы добавляете (а не удаляете/заменяете предыдущий) новый класс отдельно для фона, а потом убираете его (метод replace, привет). Если же вы заменяете один класс на другой, то само собой вам приходится полностью переносить все свойства (а их может быть ой-ой-ой сколько) в новый класс. Вам оно надо? 




Это сообщение отредактировал(а) Zeroglif - 22.11.2006, 15:31

Это разве не изменение:

Я имею ввиду, что при использовании метода или свойства или как там это в яваскрипте наз-ся, короче при изменении className никакого наследования не происходит, элемент просто забывает про предыдущий класс и к нему присваивается новый. Свойства не заменяются при совпадении, они просто становятся стандартными, кроме тех, что указаны в новом классе. Это я, кстати, на практике видел...  

Это изменение, присваивается другое имя, но вот это


уже дополнение, к одному имени справа встанет другое (обратите внимание на пробел в строке), соответственно, сначала элементу наведут красоту из old_name, а потом найдут ниже new_name и наведут красоту, взяв свойства уже из него.


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

Ещё раз (3-й) опишу то, что Вы в упор не видите.

• До наведения мыши в IE - класс "input_button"
• При наведении - "input_button hovered (потому что написано - function hig_light(){element.className+=' hovered';})
• При отведении мыши - класс снова "input_button", потому что написано - function low_light(){element.className=element.className.replace(/ hovered/,'');}

Если бы было при наведении function hig_light(){element.className=' hovered';}, то увидели бы так жадно ожидаемое стандартное свойство бордюра. Но написано же не так? Что Вам мешает читать так, как написано? 

Добавлено @ 16:37 
(Пост был к GZep.)

Добавлено @ 16:45 
(Ещё понятно было бы, если без примера, а тут пример работает. "Давайте спорить о вкусе устриц с теми, кто их ел", а о неправильной работе примера - с теми, кто его видел.)

Все, я понял. До меня дошло, когда Вы сказали про пробел.  Спасибо.


А чтобы понять рекурсию, надо понять рекурсию.(цитата Nastya)

Зачем обижать меня?   

Я просто не знал что в css можно свойства через пробел задавать. Вот от сюда и пошло все...   Естественно, я знаю что такое "+="  

4 раза прочитал, ничего не понял из смысла фразы, на пятый "ура". Наверное, переутомился сегодня.  

А вот еще вопросик:

Ну, вопрос, собственно, в коде.

Возвращаясь к предыдущему вопросу, хочу сказать слово в поддержку GZepа - хоть на этот раз его опасения оказались заблуждением и тревога, к счастью, оказалась ложной, но дыма без огня не бывает - я тоже припоминал какие-то проблемы с применением нескольких классов в IE. Так и оказалось: у IE есть аж две проблемы - со стилями вида элемент.class1.class2.classn { /*стиль*/ } и #id.class1, #id.class1, ..., #id.classn. К счастью, оба варианта (особенно первый) достаточно экзотичны и не имеют ничего общего с данным случаем, но я считаю, что "лучше перебдить чем недобдить" и настороженность не была безосновательной!

Все видели? Вот так вот!
Кстати в вашем варианте заметил небольшой глюк, что ли или как его там лучше назвать...
Суть "глюка":
При наведении мышкой начинает намного страницу "колбасить", например, рамка вокруг флеш ролика(она в 7 версии ИЕ есть) начинает подмигивать глючно. Начало сильно раздражать, вернул код на вариант, который я выложил и назвал финальным - все супер. Ведь хоть и мой вариант сложнее редактировать под себя, но, согласитесь работать он должен чуточку быстрее.

Из-за глюка, описанного в моем предыдущем посте, я советую использовать все-таки этот вариант. Потому что он вполне корректно работает и теперь он еще меньше будет задействовать системных ресурсов на браузерах отличных от ИЕ.