Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> hover элементов формы на javascript 
:(
    Опции темы
GZep
Дата 4.11.2006, 21:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

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

<html>
<head>
<style type="text/css">
<!--
//Класс для "не кнопок"(текст, список и т.д.)
.input_field {
    color: #C0C0C0;
    background: #000000;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
//Класс для "не кнопок"(текст, список и т.д.) при наведении мышки
.input_field_hover {
    color: #FFFFFF;
    background: #606060;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
//Класс для кнопок("батон", "ресет", "субмит")
.input_button {
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 2px;
    border: 1px;
    height: 20px;
}
//Класс для кнопок("батон", "ресет", "субмит") при наведении мышки
.input_button_hover {
    color: #FFFFFF;
    background: #606060;
    font: 14px Comic Sans MS;
    margin: 2px;
    border: 1px;
    height: 20px;
}
// -->
</style>
<script language="JavaScript" type="text/javascript">
<!--
document.body.onload=function() {
    content_form_elements = document.getElementsByTagName('input');
    for(i=0; content_form_elements[i]; i++) {
        if (content_form_elements[i].type=='checkbox' || content_form_elements[i].type=='radio') {
            continue;
        } if (content_form_elements[i].type=='button' || content_form_elements[i].type=='submit' || content_form_elements[i].type=='reset') {
            content_form_elements[i].className = 'input_button';
            content_form_elements[i].onmouseover = function () {
                this.className = 'input_button_hover';
            }
            content_form_elements[i].onmouseout = function () {
                this.className = 'input_button';
            }
        } else {
            content_form_elements[i].className = 'input_field';
            content_form_elements[i].onmouseover = function () {
                this.className = 'input_field_hover';
            }
            content_form_elements[i].onmouseout = function () {
                this.className = 'input_field';
            }
        }
    }
}

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

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

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

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

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

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

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
AKS
Дата 4.11.2006, 21:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52
Цитата

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

Писать-то можно, только толку никакого. ;)
А для textarea тогда уж можно отдельно задать обработчик ("раз пошла такая пьянка" ;) - т.е. раз уж Вы выбрали именно такой "тернистый" путь...).
PM MAIL   Вверх
GZep
Дата 4.11.2006, 21:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
GZep
Дата 4.11.2006, 22:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
Народ, а как склеить массивы в javascript??? нигде найти не могу... smile 


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
12345c
Дата 5.11.2006, 00:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Цитата(GZep @  4.11.2006,  22:21 Найти цитируемый пост)
Народ, а как склеить массивы в javascript??? нигде найти не могу... smile  

http://javascript.aho.ru/files/js/ArrayJS.html#concat
PM WWW   Вверх
GZep
Дата 5.11.2006, 11:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
AKS
Дата 5.11.2006, 14:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52
GZep, нельзя применить concat к коллекциям DOM - нет у коллекций этого метода в "распоряжении". 
PM MAIL   Вверх
GZep
Дата 5.11.2006, 14:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
А как тогда склеить можно?

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 5.11.2006, 15:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
GZep
Дата 5.11.2006, 17:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
SelenIT
Дата 5.11.2006, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
GZep
Дата 5.11.2006, 19:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
SelenIT, а, ну да, тот же тоже можно в начале поставить и ничего не делать, кроме назначения форме id  smile 


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
GZep
Дата 7.11.2006, 12:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
Значит так...

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

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

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

.input_field {
    color: #C0C0C0;
    background: #000000;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
.input_field:hover {
    color: #FFFFFF;
    background: #606060;
    border: 1px solid #FFFFFF;
    font: 14px Comic Sans MS;
}
.input_button {
    color: #C0C0C0;
    background: #000000;
    font: 14px Comic Sans MS;
    margin: 0px;
    border: 1px;
    height: 20px;
}
.input_button:hover {
    color: #FFFFFF;
    background: #606060;
    font: 14px Comic Sans MS;
    margin: 0px;
    border: 1px;
    height: 20px;
}


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

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

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


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
AKS
Дата 7.11.2006, 12:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52
GZep, 
Цитата

Остается решить проблему с ИЕ. Вот тут я хотел спросить: может поставить обработчики на яваскрипте только, если браузер ИЕ...

Так и сделайте! Скачайте whatever:hover и подключайте через behavior...
PM MAIL   Вверх
GZep
Дата 7.11.2006, 13:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 2
Всего: 32
Цитата(AKS @  7.11.2006,  12:41 Найти цитируемый пост)
Так и сделайте!

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

whatever:hover

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

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



--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
Страницы: (5) Все 1 2 [3] 4 5 
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0619 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.