Просмотр полной версии : JavaScript
Нужно написать такой вот скриптик (см. аттач) с комментариями, чтобы человек, не знающий JavaScript, смог разобраться программе и переделать ее по своему усмотрению.
Задача:
Переписать код под элемент div или td с использованием метода onmouseover. Полностью сохранить функциональность выполнения метода.
<html >
<head >
<style type = "text/css" >
a{
display: block;
height: 100px;
width: 100px;
}
a:link, a:visited, a:active{
background-image: url('light_off.png');
}
a:hover{
background-image: url('light_on.png');
}
</style>
</head>
<body >
<a href = "#" > </a>
</body>
</html>
Задача:
Переписать код под элемент div или td с использованием метода onmouseover. Полностью сохранить функциональность выполнения метода.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function f1()
{
document.getElementById("div").style.backgroundImage = "url('lighton.png')";
}
function f2()
{
document.getElementById("div").style.backgroundImage = "url('lightoff.png')";
}
</script>
</head>
<body>
<div id="div" style="width:100px;height:100px;background-image:url('lightoff.png')" onmouseover="f1()" onmouseout="f2()"></div>
</body>
</html>
Нафига кодить на javascript, если через css это и так прекрасно работает. Javascript может быть отключен в браузере в целях безопасности и работать не будет.
to Insya
Благодарю!
to ΛLIEN
В задумке объект не должен быть ссылкой.
Возможно использовать пару <a ></a> без параметра href, но в этом случае пропадает кроссбраузерность.
Данный прием является дизайнерским решением. Если он не будет работать в браузерах с отключенным JS, то это не беда. А если его не увидят пользователи потому, что им нравится какой-то из 5 основных браузеров, то это нехорошо.
Пардон, я забыл об у... в смысле, ущербности ie6, которым я не пользуюсь по причине его у...щербности. Меня поражает, что этот идиотизм с селектором :hover не был исправлен ни одним из сервис паков, так что без яваскрипта только через обертку тегом <A>
<html>
<head>
<style type = "text/css" >
div.mydiv a {
background-image: url('lightoff.png');
text-decoration : none;
display:block;
}
div.mydiv a:hover {
background-image: url('lighton.png');
}
</style>
</head>
<title>Untitled 1</title>
</head>
<body>
<div class="mydiv"><a href="#">1234567</a></div>
</body>
</html>
В IE6 нет никаких проблем с псевдоэлементом :hover в том случае, если пара <a ></a> обозначена как ссылка, т.е. с присвоенным параметром href.
Но мне надо, чтобы эффект метода достигался без использования ссылки, т.е. без параметра href. А в этом случае возникает проблема в Google Chrome, IE и Safari.
А зачем ты использовал обертку в div я вообще не понимаю.
В IE6 нет никаких проблем с псевдоэлементом :hover
В IE6 :hover воспринимается только тэгом <a>, хотя по стандарту css2 должен восприниматься любым. СSS2 это стандарт 1998 года вообще-то.
href="#" считай что это ссылка вникуда. От клика по ней ничего не произойдет.
В IE6 :hover воспринимается только тэгом <a>, хотя по стандарту css2 должен восприниматься любым. СSS2 это стандарт 1998 года вообще-то.
Вот этого я не знал. Спецификации W3C не читаю, т.к. с английским мы поссорились. А в учебниках по CSS, которые я читал, авторы не потрудились осветить данный факт.
href="#" считай что это ссылка вникуда. От клика по ней ничего не произойдет.
Знаю. Но стремление все делать идеально не позволяет мне создавать ссылку в никуда.
стремление все делать идеально не позволяет мне создавать ссылку в никуда.
Обычно такие объекты являются ссылками куда-то конкретно. Необходимость чтобы просто менялся фон над div или td при наведении манипулятором мне попадалось редко.
Все было бы идеально, если удалось изобрести машину времени и, вернувшись в прошлое, оторвать руки, а может быть что-нибудь еще, разработчикам ie6, в результате чего сей продукт вообще не появился бы на свет.
Обычно такие объекты являются ссылками куда-то конкретно. Необходимость чтобы просто менялся фон над div или td при наведении манипулятором мне попадалось редко.
Быть может по этой причине дизайнер и захотел использовать данный прием.
Я так вообще рисовать не умею, и мне на это плевать. Моя задача, чтобы сайты работали и одинаково отображались в разных браузерах. Тут уж что умею, то и делаю.
Нафига кодить на javascript, если через css это и так прекрасно работает. Javascript может быть отключен в браузере в целях безопасности и работать не будет.
Если отключен яваскрипт, это проблема пользователя. У него так же могут быть отключены картинки, не установлен флеш и т. д. Что теперь, один голый текст на сайте размещать?
Если отключен яваскрипт, это проблема пользователя.
Не забываем, что javascript на мобильных устройствах не всегда присутствует. И даже если у пользователя не установлен флэш, отключены картинки и не работает javascript, все равно css будет работать, если конечно не включен "стиль в режиме пользователя".
А вот то, что в ie6 не совсем корректно организован css2, уж точно не проблема пользователя.
ps: кстати, код можно упростить, используя чистый inline.
...
<style type = "text/css" >
tr.mytr1 { background-image: url('lightoff.png'); }
tr.mytr2 { background-image: url('lighton.png'); }
</style>
...
<tr class="mytr1" onmouseout="javascript:this.className='mytr1';" onmouseover="javascript:this.className='mytr2';">
...
работает в Опере, ie6/7 и FF.
А вот на мобильные устройства я не ориентирован.
За помощь всем большое спасибо!
Не забываем, что javascript на мобильных устройствах не всегда присутствует. И даже если у пользователя не установлен флэш, отключены картинки и не работает javascript, все равно css будет работать, если конечно не включен "стиль в режиме пользователя".
Для мобильных устройств надо делать отдельную версию. Пользователям очень удобно пользоваться сайтом, если некоторые вещи сделаны через аякс, хочешь сказать его тоже в топку? Это все равно, что отказаться от нового порше в пользу старого уазика только из-за того, что иногда обуваешь гады и неудобно на педали нажимать.
Я не предлагаю исключить javascript вообще. Просто для решения определенных задач надо пользоваться соответствующими технологиями: CSS - для разметки, аякс - для общения с сервером, и т.д.
Я не предлагаю исключить javascript вообще. Просто для решения определенных задач надо пользоваться соответствующими технологиями: CSS - для разметки, аякс - для общения с сервером, и т.д.
Да по большому счету, если весь сайт в скрипте, то использовать в одном месте его вместо css не грех (не про конкретный сайт говорю, а в общем).
Я не предлагаю исключить javascript вообще. Просто для решения определенных задач надо пользоваться соответствующими технологиями: CSS - для разметки, аякс - для общения с сервером, и т.д.
Бредятина!
Да по большому счету, если весь сайт в скрипте, то использовать в одном месте его вместо css не грех (не про конкретный сайт говорю, а в общем).
Грех. CSS лучше поддерживается браузерами, чем javascript. Отчасти по той причине, что CSS значительно лучше определен и описан.
Если сделать эту фигню на CSS, то это будет более предсказуемо и более работоспособно. Разумеется, не стоит использовать CSS, если разработчик сайта его не знает, а обучить стоит дорого, но это уже другой вопрос.
Кстати, умные люди из интернетов говорят, что функциональность CSS перекрывает функциональность javascript только когда речь идет о mouseover.
Бредятина!
Ну и в чем же здесь бредятина?
Ну и в чем же здесь бредятина?
Поинт: использовать надо то, что больше всего подходит для поставленной задачи. Неважно, css, javascript, или лопату.
Догматизм - удел нищих умом.
Поинт: использовать надо то, что больше всего подходит для поставленной задачи. Неважно, css, javascript, или лопату.
Догматизм - удел нищих умом.
Для нестандартных решений, да. Особенно, если ничего другого не подходит. Но прежде чем ваять html разметку лопатой надо научиться пользоваться вещами специально предназначенными для этого.
Для нестандартных решений, да. Особенно, если ничего другого не подходит. Но прежде чем ваять html разметку лопатой надо научиться пользоваться вещами специально предназначенными для этого.
Для любых решений, без исключений.
Для любых решений, без исключений.
Для поставленной задачи под все платформы больше всего подходит css2. А на пользователей ie6 по хорошему (мне) наплевать. Давно пора обновиться.
Для поставленной задачи под все платформы больше всего подходит css2.
Это очень хорошо, что ты меня понял.
А на пользователей ie6 по хорошему (мне) наплевать. Давно пора обновиться.
Такой подход годится только при верстке альбома "я и моя сраная кошка". Объяснять?
использовать надо то, что больше всего подходит для поставленной задачи. Неважно,...лопата
Это очень хорошо, что ты меня понял.
Значит если для поставленной задачи больше всего подходила бы лопата, т.е. например VBScript, надо бы использовать его? Хм, как-то очень сомневаюсь в разумности этого решения.
Такой подход годится только при верстке альбома "я и моя сраная кошка"
Такой подход годится для стимулирования перехода с говно эксплорера версии 6, на другие... хотя бы версии. Или скачать 17 мегабайт это все еще проблема?
Грех.
Ты слишком педантичен.
А на пользователей ie6 по хорошему (мне) наплевать.
ох как зря, пользователей ие6 немалый процент, если тебе важно, чтобы люди пользовались твоим ресурсом, то поддержка ие6 необходима
Давно пора обновиться.
Большинство пользователей интернета не знают как это сделать.
Кстати, на счет изменения цвета объекта при наведении курсора: давно заметила, что это функция сделанная на css работает гораздо шустрее, чем, если ее сделать на яваскрипте, на яваскрипте она чуток подтормаживает.
ох как зря, пользователей ие6 немалый процент,
Большинство пользователей интернета не знают как это сделать.
- Не думаю, что такая мелочь как отсутствие поддержки :hover вообще будет как-то замечена.
- Могу предположить, что в настоящее время кол-во пользователей ie6 =< ie7 + ie8. У меня ie8.
- Если уж это так приспичило, я бы сделал через css + <a hover="#" и не парился, что это ссылка. Указатель мыши при этом тоже можно поменять. Текст в статус строке тоже тем же яваскриптом.
- ie7 разве не распространяться через автоматические обновления? Для этого ничего знать не надо. А если уж ты знаешь, как выключить систему автоматического обновления, то должно хватить мозгов на замену на ie7 руками.
- всевозможные и популярные пиратские говносборки "хр блабла эдишен", как правило, уже идут с интегрированным ie7.
- Продажа ноутов идет, как правило, с предустановленной какой системой? Тут же и дешевые нетбуки.
- С выходом win7 (что не за горами) все еще сильнее поменяется, т.к. результат Vista vs. Win7 (мне) очевиден в пользу Win7. Немало народа не ставят Vista, а ждут именно Win7.
Из всего вышесказанного для решения данной задачи я бы наплевал и забыл об ie6.
Только что смотрел статистику площадки на мастерхосте.
Versions Hits Percent
MICROSOFT INTERNET EXPLORER 1390 67.7 %
Microsoft Internet Explorer 7.0 (8.0) 3 0.1 %
Microsoft Internet Explorer 7.0 408 19.8 %
Microsoft Internet Explorer 6.0 715 34.8 %
Microsoft Internet Explorer 5.5 2 0 %
Microsoft Internet Explorer 7.0b 1 0 %
Microsoft Internet Explorer 8.0 261 12.7 %
FIREFOX 290 14.1 %
Firefox 3.0.1 2 0 %
Firefox 3.5 25 1.2 %
Firefox 2.0.0.6 6 0.2 %
Firefox 3.0.5 6 0.2 %
Firefox 3.0.8 6 0.2 %
Firefox 3.0.11 245 11.9 %
OPERA 279 13.6 %
Opera Mini 4.2.13337 4 0.1 %
Opera 9.52 29 1.4 %
Opera 9.63 100 4.8 %
Opera 9.80 7 0.3 %
Opera 9.25 5 0.2 %
Opera 9.01 1 0 %
Opera 9.27 1 0 %
Opera 9.64 80 3.9 %
Opera 7.54 1 0 %
Opera 9.61 35 1.7 %
Opera Mini 4.1.11355 5 0.2 %
Opera 9.51 5 0.2 %
Opera 7.11 1 0 %
Opera 9.26 5 0.2 %
NETSCAPE 1 0 %
Netscape Navigator 4.0 1 0 %
MOZILLA 53 2.5 %
Mozilla 5.0 47 2.2 %
Mozilla 1.8.1.12 6 0.2 %
SEAMONKEY 6 0.2 %
SeaMonkey 1.1.14 6 0.2 %
Others 32 1.5 %
Unknown 32 1.5 %
- Не думаю, что такая мелочь как отсутствие поддержки :hover вообще будет как-то замечена.
ну это же юзабилити, если не делать поддержку для ие6, то уровень твоего сайта падет в глазах пользователей, что может сказаться на кол-ве хостов
- Могу предположить, что в настоящее время кол-во пользователей ie6 =< ie7 + ie8. У меня ie8.
Если не изменяет память, то на данный момент около 10%, что не мало, если твой сайт расчитан на широкую публику
- ie7 разве не распространяться через автоматические обновления? Для этого ничего знать не надо. А если уж ты знаешь, как выключить систему автоматического обновления, то должно хватить мозгов на замену на ie7 руками.
- всевозможные и популярные пиратские говносборки "хр блабла эдишен", как правило, уже идут с интегрированным ie7.
- Продажа ноутов идет, как правило, с предустановленной какой системой? Тут же и дешевые нетбуки.
- С выходом win7 (что не за горами) все еще сильнее поменяется, т.к. результат Vista vs. Win7 (мне) очевиден в пользу Win7. Немало народа не ставят Vista, а ждут именно Win7.
ты как с луны свалился, общайся больше с простым людом, они понятия не имеют как вообще устанавливать программы, что такое виндоус и что такое ие, зато умеют серфить.
Из всего вышесказанного для решения данной задачи я бы наплевал и забыл об ie6.
Я, кстати, не имела ввиду конкретно данную задачу, говорила в общем о поддержке ие6: сохранении функционала, отображения картинок с прозрачностью и т д
C1FR0, что ж они про сафари забыли, ай-яй-яй :)
C1FR0, что ж они про сафари забыли, ай-яй-яй :)
Не уверен, но возможно, что Safari причислили к Other.
Хотя скорее всего мой сайт не открывали в Safari на хостинге (только на локальной машине при разработке).
Если не изменяет память, то на данный момент около 10%, что не мало, если твой сайт расчитан на широкую публикуесли смотреть динамику, то для ie6 она почти катастрофическая
Значит если для поставленной задачи больше всего подходила бы лопата, т.е. например VBScript, надо бы использовать его? Хм, как-то очень сомневаюсь в разумности этого решения.
Повторяю: надо использовать тот инструмент, который больше подходит. Почему это не кажется тебе разумным?
Такой подход годится для стимулирования перехода с говно эксплорера версии 6, на другие... хотя бы версии. Или скачать 17 мегабайт это все еще проблема?
Проблема не в 17 мегабайтах. Проблема в том, что ты ничего не знаешь о практической стороне совеременной веб-разработки. А основной ее постулат в том, что не ты срешь на пользователей, а пользователи срут на тебя. Лет 10 назад было наоборот, но сейчас времена изменились.
У тебя, поставщика информации, нет ничего уникального. Ты стоишь в длинном ряду и конкурируешь с тысячей других таких. Если ты посылаешь 15-16% своих пользователей скачивать что-то там 17-мегабайтное, то они уйдут. Поздравляю! Своими нелепыми убеждениями, глупостью и нежеланием потратить лишний час ты потерял ровно 16% дохода.
Дело в том, что Алиен не ставит себя в ряд жалкого айти планктона, который должен обеспечивать 99.9% совместимость со всеми браузерами, хоть малость известными, в целях охватить максимум веб аудитории. Алиен творец и на его сайты люди стремятся, на пути к его контенту люди учатся, открывают для себя новые вещи...
Повторяю: надо использовать тот инструмент, который больше подходит. Почему это не кажется тебе разумным?
Мне кажется разумным, что больше всего подходит инструмент, который для этого специально разработан и поэтому имеет большую поддерку для различных платформ.
Ну да, конечно. Из-за того что у C1FR0 на сайте не будет меняться чудо логотип при наведении на ячейку таблицы юзабилити просто ох... как рухнет и он потеряет всех пользователей в лице ie6. Мне, честно говоря, смешно. Как вы любите растекаться по общему. Было предложено простое решение для конкретной задачи врядли как то меняющее функциональность сайта вообще и его юзабилити. И в этом случае и было предложено наплевать на ie6, который изживает свой век. А вы развели сопли по поводу, что все уйдут. Да нихрена они не заметят, к тому же важность контента в данном случае гораздо больше обертки в которую вы её обернете.
Ну да, конечно. Из-за того что у C1FR0 на сайте не будет меняться чудо логотип при наведении на ячейку таблицы юзабилити просто ох... как рухнет и он потеряет всех пользователей в лице ie6. Мне, честно говоря, смешно. Как вы любите растекаться по общему. Было предложено простое решение для конкретной задачи врядли как то меняющее
Прочитай мое сообщение от 03.07.2009, 18:05.
Видишь, нам потребовались каких-то жалких три дня и пара тысяч печатных знаков на то, чтобы ты со мной согласился :)
Прочитай мое сообщение от 03.07.2009, 18:05.
А теперь читаем моё сообщение 02.07.2009, 22:36 применительно к данной задаче, которую поставил C1FR0, где было предложено использовать css и на этом успокоиться.
А теперь читаем моё сообщение 02.07.2009, 22:36 применительно к данной задаче, которую поставил C1FR0, где было предложено использовать css и на этом успокоиться.
Да, но какое отношение это имеет к нашей дискуссии?
Да, но какое отношение это имеет к нашей дискуссии?Прямое. Один говорит про конкретную задачу и ее решение, другой вообще за жизнь несчастных пользователей ie6.
Дизайнера я убедил, что подсветка на пустом месте - фуфло.
И я нигде в теме не писал, что сайт станет ущербным, если этот эффект никто не увидит. Я не писал, что из-за этого могу потерять сколько-то там % пользователей.
Алиен не ставит себя в ряд жалкого айти планктона, который должен обеспечивать 99.9% совместимость со всеми браузерами
Спасибо! Счел за личное оскорбление.
Я стремлюсь к совместимости в 5-и браузерах: Google Chrome, Internet Explorer 7, Mozilla Firefox 3, Opera 9.63, Safari 3.2.1.
Прямое. Один говорит про конкретную задачу и ее решение, другой вообще за жизнь несчастных пользователей ie6.
Ты случайно не женщина?
Прошу прощения. Поддался импульсу, возникло ощущение, что я доктор, который почти вылечил больного от бронхита, а тот внезапно воткнул себе вилку в глаз и принялся бегать по палатам :)
Начнем заново?
Начнем заново?
Разжевывать в очередной раз, что я имел ввиду не хочу. В главном мы сошлись. Так что, пожалуй, нет.
Помогите допилить данный информер, чтобы установить на страницу в UTF8.
HTML-код следует полностью, не изменяя все 6 строк, поместить в код страницы.
HTML - код в прикрепленном файле.
В коде Вы можете поменять два параметра: (5,false)
6 - количество показываемх заголовков, можно менять от одного до шести false - ссылка открывается в текущем окне, можно поменять на true - ссылка открывается в новом окне.
Следует помнить, что способ вызова <script src=...> приводит к проблемам в случае недоступности системы и требует от клиента поддержки javascript.
Поэтому Вы можете использовать другой способ экспорта заголовков новостей - Server Side Includes (SSI) - с помощью CGI - скрипта ( http://www.informer.ru/rbcnews.zip ) Perl версии.
В коде скрипта находится инструкция по настройке.
<!--
include virtual="/include/funs.shtml"
//-->
<script language=JavaScript
src="http://pics.rbc.ru/js/top_funs.js"></script>
<script>
<!--
print_funs_news(10,true);
//-->
</script>
Ява-скрипт корректно выводится только на win1251, в настройке SSI и Perl я не шарю.
Случай с javascript не пойдет, т.к. сервер рбк отдает скрипт в кодировке ср1251. Cкрипт сам пишет в html документ через "document.write". Если рбк могут отдавать в другой кодировке, то это самое простое решение проблемы. Спроси их поддержку.
Конечно, наверняка можно через какой нибудь ajax самому загружать этот файл в переменную, потом перекодировать, написав функцию перекодирования (о стандартных функциях перекодирования в javascript не слышал), потом писать из переменной через тот же "document.write"... бла бла бла
Второй вариант с перловым скриптом, который подключается через
<!--
#include virtual="/cgi-bin/rbcnews.cgi"-->
//-->
накладывает условия:
- хостер должен поддерживать cgi, а скрипт rbcnews.cgi нужно кидать в папку cgi-bin.
- хостер должен поддерживать ssi. если поддерживает, то расширение скорее всего должно быть shtml, иначе не сработает.
- надо знать абсолютный путь куда кэшировать новости. строка 17: my $place="...", хотя может и поймет относительные пути.
- папка в которую кэшируется файл новостей должна иметь права записи.
Само перекодирование, см. файл rbcnews.cgi. После фразы "# Подключение модулей" добавить строчку "use Encode;"
Строку 52:
my @file=map { s/<a/"<a target=".($target?"'_blank'":"'_top'")/gei; $_; } split("\n", $response->content);
заменить на:
my @file=map { s/<a/"<a target=".($target?"'_blank'":"'_top'")/gei; $_; } split("\n", Encode::decode("cp1251",$response->content));
Есть третий вариант. Написать при помощи php кода:
<script>
<!--
<?php echo iconv("CP1251", "UTF-8", file_get_contents("http://pics.rbc.ru/js/top_funs.js")); ?>
print_funs_news(10,true);
//-->
</script>
В техподдержку писал - молчат как партизаны.
Второй вариант с SHTML видимо не подходит, т.к. надо встроить в PHP-страницу.
Пока думал над третьим вариантом, произошло какое-то шаманство - информер стал корректно отображаться на UTF8-странице, хотя сервер РБК по-прежнему отдаёт в кодировке cp1251.
Вот код, который размещён:
<script language=JavaScript src="http://pics.rbc.ru/js/top_funs.js"></script>
<script>
<!--
print_funs_news(10,true);
//-->
</script>
Вот адрес страницы UTF8: http://gatchina.ru.net/funs/
Нихрена не пойму, до этого же не работало...
Пока думал над третьим вариантом, произошло какое-то шаманство - информер стал корректно отображаться на UTF8-странице, хотя сервер
Это зависит от браузера и настроек определения кодировки. Опера, ie9, лиса и хром отобразили правильно, если установить кодировку: кириллица - автоматически. Значит определяют кодировку и перекодируют сами, когда файл скрипта загружается отдельно. Стоит принудительно поменять на ср1251 или утф-8, отображается корректно только часть страницы. Так что насчет работает, ты поторопился.
Короче я нашёл RSS-поток этого раздела (в самом разделе его не было, поэтому я думал что вообще нет RSS этих новостей).
Щас сделаю свой собственный настраиваемый инфомер с помощью API гугла, а свой отстой пусть сами юзают.
Алиен - спасибо большое за советы, я надеюсь ты мне ещё поможешь с радио в соседней теме =)
vBulletin® v3.8.12 by vBS, Copyright ©2000-2024, vBulletin Solutions, Inc. Перевод: zCarot