Tokolist
-
Posts
562 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Tokolist
-
философы, блин :-> Тот, кто считает, что интеллектуальная собственность бред, не владеет никакой ценной (даже не в плане денег) интеллектуальной собственностью. Просто поражаюсь Вашей логике... Это типа "не пойман - не вор". С таким же успехом я могу украсть машину и перекрасить или вообще продать по запчастям. rash ППКС
-
Дык посмотреть код любой сможет А мы тут учимся наступая на грабли А может получится даже лучше чем там Короче, присоединяйся ЗЫ счас скачаю посмотрю... upd Даже скачивать не пришлось, подглядел прямо на оффсайте Там чуть иначе реализовано. Там при наведении меняется ширина ссылки, а не фоновая картинка. И сделано на основе списка. Не знаю как лучше... Вроде и здесь и там неплохо Еще в фоксе наблюдается один интересный эффект при нажатии - пунктир на пол страницы
-
неа, 0.9.9 Хороший вопрос на засыпку Придумал два варианта: 1. не элегантный и глючный (возможно после некоторой доработки он будет получше). Картинка используется та же, что и в предыдущем примере. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> * { margin: 0; padding: 0; } #rating { position: relative; width: 100px; background: url(stars.gif) 0 -25px no-repeat; margin-left: 20%; /* test */ } #rating, #rating a { height: 25px; } #rating a { position: absolute; top: 0; left: 0; display: block; text-decoration: none; width: 22px; font-size: 25px; } #level1 { z-index: 4; } #level2 { z-index: 3; padding-left: 25px; } #level3 { z-index: 2; padding-left: 50px; } #level4 { z-index: 1; padding-left: 75px; } #rating a.current, #level1:hover, #level2:hover, #level3:hover, #level4:hover { background: url(stars.gif) 0 0 no-repeat; } /* HIDER */ #rating a span { display: none; } #rating a:hover span { display: block; position: absolute; top: 0; height: 25px; background: url(stars.gif) right -25px no-repeat; } #hider1 { width: 75px; left: 25px; } #hider2 { width: 50px; left: 50px; } #hider3 { width: 25px; left: 75px; } </style> </head> <body> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> <div id="rating"> <a href="#" id="level1"> <span id="hider1"> </span></a> <a href="#" id="level2"> <span id="hider2"> </span></a> <a href="#" id="level3" class="current"> <span id="hider3"> </span></a> <a href="#" id="level4"> </a> </div> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> </body> 2. более элегантный stars2.gif - http://slil.ru/24712407 stars2.psd - http://slil.ru/24712413 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> * { margin: 0; padding: 0; } #rating { position: relative; width: 100px; background: url(stars2.gif) 0 -25px no-repeat; margin-left: 20%; /* test */ } #rating, #rating a, #rating div.current { height: 25px; } #rating a, #rating div.current { position: absolute; top: 0; left: 0; } #rating div.current { z-index: 1; width: 75px; /* current rating */ background: url(stars2.gif) 0 -50px no-repeat; } #rating a { display: block; text-decoration: none; width: 25px; font-size: 25px; } #rating a.level1 { z-index: 5; } #rating a.level2 { z-index: 4; padding-left: 25px; } #rating a.level3 { z-index: 3; padding-left: 50px; } #rating a.level4 { z-index: 2; padding-left: 75px; } #rating a.level1:hover, #rating a.level2:hover, #rating a.level3:hover, #rating a.level4:hover { background: url(stars2.gif) 0 0 no-repeat; } #rating a span { display: none; } #rating a:hover span { display: block; position: absolute; left: 110px; width: 150px; padding: 2px 0; border: 1px solid #000; background: #ffffe1; text-align: center; font-size: 20px; font-family: sans-serif; color: #000; } </style> </head> <body> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> <div id="rating"> <div class="current"> </div> <a href="#" class="level1"><span>Фтопку</span></a> <a href="#" class="level2"><span>Низачод</span></a> <a href="#" class="level3"><span>Зачод</span></a> <a href="#" class="level4"><span>Нумляващще</span></a> </div> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> </body>
-
stars.gif - http://slil.ru/24701049 stars.psd - http://slil.ru/24701056 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> * { margin: 0; padding: 0; } #volume { position: relative; height: 25px; width: 100px; margin-left: 20%; /* test */ } #volume a { display: block; position: absolute; top: 0; left: 0; text-decoration: none; height: 25px; width: 25px; font-size: 25px; } #volume a.level1 { z-index: 4; } #volume a.level2 { z-index: 3; padding-left: 25px; } #volume a.level3 { z-index: 2; padding-left: 50px; } #volume a.level4 { z-index: 1; padding-left: 75px; background: url(stars.gif) 0 -25px no-repeat; } #volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover { background: url(stars.gif) 0 0 no-repeat; } #volume a span { display: none; } #volume a:hover span { display: block; position: absolute; left: 110px; width: 150px; padding: 2px 0; border: 1px solid #000; background: #ffffe1; text-align: center; font-size: 20px; font-family: sans-serif; color: #000; } </style> </head> <body> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> <div id="volume"> <a href="#" class="level1"><span>Фтопку</span></a> <a href="#" class="level2"><span>Низачод</span></a> <a href="#" class="level3"><span>Зачод</span></a> <a href="#" class="level4"><span>Нумляващще</span></a> </div> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> </body>
-
кроссбраузерный :-P <html><head> <style>div{text-align:center;font-size:150px;}</style> <script>setInterval(function(){var d=document.getElementsByTagName('DIV');for(var i=0;i<d.length;i++){d[i].innerHTML=Math.round(Math.random()*9)+' '+Math.round(Math.random()*9)+' '+Math.round(Math.random()*9)}}, 100); var c=['#f00', '#0f0', '#00f']; setInterval(function(){document.getElementsByTagName('BODY')[0].style.background = c[Math.round(Math.random()*2)]}, 100); var c2=['#000', '#fff']; setInterval(function(){var d=document.getElementsByTagName('DIV');for(var i=0;i<d.length;i++){d[i].style.color=c2[Math.round(Math.random())]}}, 100); </script></head> <body><div></div><div></div><div></div></body></html>
-
Проблема в моем невнимательном прочтении спецификации а ведь там можно все переработать и сделать гораздо элегантнее <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #volume { position: relative; height: 27px; width: 108px; background: #0f0; margin-left: 20%; /* test */ } #volume a { display: block; position: absolute; top: 0; left: 0; text-decoration: none; border: 1px solid #000; height: 25px; width: 25px; font-size: 25px; } #volume a.level1 { z-index: 4; } #volume a.level2 { z-index: 3; padding-left: 27px; } #volume a.level3 { z-index: 2; padding-left: 54px; } #volume a.level4 { z-index: 1; padding-left: 81px; } #volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover { background: #f00; } #volume a span { display: none; } #volume a:hover span { position: absolute; left: 110px; display: block; font-size: 23px; color: #f00; } </style> </head> <body> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> <div id="volume"> <a href="#" class="level1"><span>hint1</span></a> <a href="#" class="level2"><span>hint2</span></a> <a href="#" class="level3"><span>hint3</span></a> <a href="#" class="level4"><span>hint4</span></a> </div> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> </body>
-
yopopt угу, точно. выровнял)) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #volume { height: 27px; overflow: hidden; } #volume a { display: block; position: relative; text-decoration: none; border: 1px solid #000; height: 25px; width: 25px; font-size: 25px; overflow: hidden; } #volume a.level1 { z-index: 4; } #volume a.level2 { top: -27px; z-index: 3; padding-left: 27px; } #volume a.level3 { top: -54px; z-index: 2; padding-left: 54px; } #volume a.level4 { top: -81px; z-index: 1; padding-left: 81px; background: #0f0; } #volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover { background: #f00; } </style> </head> <body> <div id="volume"> <a href="#" class="level1"> </a> <a href="#" class="level2"> </a> <a href="#" class="level3"> </a> <a href="#" class="level4"> </a> </div> </body> YETI Продублирую djredshake. ИЕ понимает hover только для ссылок (вроде в седьмой уже исправили). можно сделать hover и для ИЕ через behavior, но это те же скрипты, а наша задача сделать усе без скриптов и кроссбраузерно. теги не могут быть вложенными друг в друга, поэтому и родился у меня такой вариант. вместо b лучше использовать что-нибудь другое (например, div) ИМХО. Была идея расширения функциональности: появление подсказки при наведении на каждый из квадратиков. Хотел реализовать так <a href="#" class="level1"><span>hint</span> </a> и через #volume a:hover span { } показывать С абсолютным позиционированием проблем бы не было, а вот с относительным как-то не элегантно все получается...
-
:-) это не обязательно должен быть регулятор громкости. это может быть, например, оценка статьи, заметки или проги. проще говоря - рейтинг
-
kiD, yopopt Молодцы раскрыли мне глаза на мою ошибку или ошибку ИЕ ARA спасибо за моральную поддержку yopopt к твоему коду надо еще добавить overflow: hidden; для a теперь проблема в position: absolute в некоторых случаях наш регулятор будет сложно интегрировать в страницу. Вот вариант с position: relative <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #volume { height: 27px; overflow: hidden; margin-left: 20%; /* for test only */ } #volume a { display: block; position: relative; text-decoration: none; border: 1px solid #000; height: 25px; width: 25px; font-size: 25px; overflow: hidden; } #volume a.level1 { z-index: 4; } #volume a.level2 { top: -27px; z-index: 3; padding-left:25px; } #volume a.level3 { top: -54px; z-index: 2; padding-left:50px; } #volume a.level4 { top: -81px; z-index: 1; padding-left:75px; background: #0f0; } #volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover { background: #f00; } </style> </head> <body> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> <div id="volume"> <a href="#" class="level1"> </a> <a href="#" class="level2"> </a> <a href="#" class="level3"> </a> <a href="#" class="level4"> </a> </div> <p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you activate a section, its detailed contents then appears at the top of the column. We are doing our best to provide you with current, clear, example-rich documentation. The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do when using Prototype :-) The API documentation is a reference documentation. If you need to learn how to use Prototype, or to acquire skills in a particular feature area, have a look at the Learn section, which is accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from the orange bar in all reference pages. Documentation in the Learn section is more narrative, tutorial-style.</p> </body> попробуйте поизменяйте размеры окна теперь наш "регулятор" можно разместить в "любом месте" Есть еще одна идея для наращивания функциональности. Код выложу завтра.
-
В принципе и глобальной области видимости должно хватать... У window, к сожалению, нет свойства prototype Я пытался что-нибудь придумать... вот на этом я застрял да и криво как-то, особенно если интервал будет маленький... var timerValues = new Array(); setIntervalEx = function(func, interval) { var timer = window.setInterval(intervalFunction, interval); var argsArray = new Array(); for (i = 2; i < arguments.length; i++) { argsArray.push(arguments[i]); } timerValues[timer] = argsArray; } clearIntervalEx = function(ID) { } intervalFunction = function() { }
-
http://forum.htmlbook.ru/viewtopic.php?pid=29190
-
Собственно началось все отсюда http://forum.htmlbook.ru/index.php?showtopic=4887 Создал препреальфу подобного на одном CSS, просто чтобы показать такую возможность <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } a { display: block; left: 0; top: 0; position: absolute; text-decoration: none; border: 1px solid #000; height: 25px; font-size: 1px; line-height: 0; } #a1 { z-index: 4; width: 25px; } #a2 { z-index: 3; width: 50px; } #a3 { z-index: 2; width: 75px; } #a4 { z-index: 1; width: 100px; } #a1:hover, #a2:hover, #a3:hover, #a4:hover { background: #f00; } </style> </head> <body> <div> <a href="#" id="a1"> </a> <a href="#" id="a2"> </a> <a href="#" id="a3"> </a> <a href="#" id="a4"> </a> </div> </body> Есть проблема: глюки в одном замечательном браузере. Да, правильно, вы угадали в каком . Там работает только ее уменьшение.
-
а зачем там position: relative ?
-
Вы уверены в этом???
-
2 raven Мда.., дружище, код комментировать не стану, т.к. не могу подобрать адекватных слов но самое худшее вот это 40+100+50+150+105+98=543 != 548 Весь код не перерабатывал, только ту часть где "проблема". Вот как он должен выглядеть: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <table width="225" cellpadding="0" cellspacing="0"> <tr> <td height="40"><img src="img_3_1.gif" alt=""></td> </tr> <tr> <td height="100"></td> </tr> <tr> <td height="50"><img src="img_3_3.gif" alt=""></td> </tr> <tr> <td height="150"></td> </tr> <tr> <td height="105"><img src="img_3_5.gif" alt=""></td> </tr> <tr> <td height="98"></td> </tr> </table> </body> </html>
-
рисунки в футере и хедере сделайте "чересстрочными" для загрузки так будет ИМХО лучше
-
там есть еще now = new Date(); и это просто тест, а не готовый код AKS только надо еще доработать, поскольку нам не текущее время нужно, а сколько времени провели на сайте или я чего-то недопонял? Да, но если я добавляю юзерский скрипт, то знаю для чего и что он делает, а время изменить можно не подозревая, что этим мы что-то испортим угу, и такое бывает Мда... а я то наивный полагал, что дело только в неточности Особенно порадовал Gecko
-
Такое можно сделать на одном только CSS.
-
Браузер от W3C (наступление эры стандартов)
Tokolist replied to Fu-tai's topic in Tricks and solutions
w3c его и не позиционирует как браузер, а как что-то типа полу-визуального редактора. и если закрыть глаза на то что он жрет почти 40 метров мозгов (видимо из-за использования wxWidgets), то вполне достойная внимания вещь ИМХО Для примера хотя бы создайте в визуальном режиме таблицу и посмотрите код. -
2 raven сколько раз уже повторять? убрать все символы между и
-
? убирает "жадность" квантификаторов иначе если в примере скриптовых блоков несколько, то они сольются в один (от первого тега первого блока до последнего тега последнего, регулярное жадно вс? захватит)... ;-) А, понятненько, разобрался Пасибки. 2 AKS Я ведь забыл, что есть такая штучка как prototype.js Вот как там это реализовано <script[^>]*>([u0001-uFFFF]*?)</script> и используется вместе с флагом m
-
Только в мультибайтовых кодировках. А есть же ведь и UTF-32 Ну если дела обстоят так, то читай пост ?7, но это при условии, что перезагрузка функций не включена для strlen(). Надо отключить или в php.ini или в .htaccess. Вот еще придумал способ (он не элегантен, но зато работает ) strlen(bin2hex($str)) / 2
-
По-моему тоже :P Слишком бегло прочитал вопрос, а для чего _top вообще забыл Дико извиняюсь
-
AKS что это за конструкция? .*? разве там не достаточно просто .* здесь (.|[rn])*? также (.|[rn])* или лучше вообще .* и выставить флаг m для node желательно еще и setAttribute("type", "text/javascript") не обязательно конечно я не понимаю смысла такой конструкции if (window.ActiveXObject) { node.text = js; } else { node.appendChild(document.createTextNode(js)); } ИЕ ведь должен понять такое? node.appendChild(document.createTextNode(js));
-
Будем не соглашаться с Вами, коллега Представим ситуацию: Захожу я на страничку... Просматриваю 5 мин. потом вдруг замечаю, что часы на компе идут не точно (начинаются новости по телеку)... вот блин 10 мин. разницы... устанавливаю часы на компе правильно... просматриваю страничку еще 5 мин.... и что получается? а получается то, что провел я согласно Ваших данных на страничке не 10, а 20 мин. Или еще одна невероятная история: Винда автоматически перевела часы с летнего на зимнее время :P но я на этом не остановился и начал тестить setInterval vs Date. Сообразил небольшой код И что мы имеем? Таблица результатов (в миллисекундах): IE 6 87 FF 2 7~8 FF 1.5 16 Op 9.0 первый раз 246 !!!! потом 86~87 MZ 7~16 Safari B3 86 Тестировал для каждого из браузеров по несколько раз. Какие выводы можно сделать: 1. разница между Date и setInterval действительно есть (но эксперимент был не совсем чист если смотреть код) 2. "хваленый" Gecko не так уж и плох, особенно в ФФ2 3. разработчики ФФ действительно совершенствуют свой продукт 4. скорей-всего Опере нужна какая-то первичная инициализация таймера (или это просто баг) Тест конечно не претендует на звание истины, но... ...если считать, что Date - идеал (хотя это не всегда так), то мы получаем разницу, грубо говоря, 80 миллисекунд на каждую МИНУТУ и того мы получим погрешность в 1 секунду через 1 / 0.08 ~= 13 мин., что не совсем уж ИМХО критично. не исключено также, что я что-то где-то напутал или просчитался