SelenIT
-
Posts
4,327 -
Joined
-
Last visited
-
Days Won
140
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SelenIT
-
Какие же это тупо свойства? Атрибуты — в разметке, свойства — в DOM-е. Атрибуты могут быть только строками, а свойства могут быть любого типа (хоть объект, как parentNode, или функция, как onclick). Атрибуты — как в коде написано, свойства — как присвоено (или как по умолчанию)... Другое дело, что в типовых задачах атрибуты (и setAttribute, соотв-но) нафик не нужны, свойств достаточно. Имхо, здесь хорошо расписано...
-
выпадающие списки: дергается страница при свертывании/развертывании пункта
SelenIT replied to kpoxo6op's question in HTML Coding
Может, под "дерганьем" подразумевается появление/исчезновение скроллинга у body при изменении высоты страницы? -
Ну так IE-динозавры стремительно вымирают, их юзеры могут и потерпеть либо обновиться...
-
Виноват, полностью мой скрипт выглядит так: function changeTarget() { setTimeout(function() { var targetId = location.hash.replace('#',''); var lastTarget = (window.targetedDl && window.targetedDl.id) || ''; if (targetId != lastTarget) { if (window.targetedDl) { window.targetedDl.getElementsByTagName('dd')[0].style.height = '0'; window.targetedDl.getElementsByTagName('a')[0].style.backgroundColor = ''; window.targetedDl.getElementsByTagName('a')[0].style.cursor = ''; } if (window.targetedDl = document.getElementById(targetId)) { window.targetedDl.getElementsByTagName('dd')[0].style.height = 'auto'; window.targetedDl.getElementsByTagName('a')[0].style.backgroundColor = '#080'; window.targetedDl.getElementsByTagName('a')[0].style.cursor = 'text'; } } },1); } document.attachEvent('onclick', changeTarget); document.attachEvent('onreadystatechange', function() { if(document.readyState=='complete') changeTarget(); }); Ну и для полной совместимости можно в те же условные комменты добавить <noscript> с добавочным стилем из первого примера внутри...
-
Не надо путать HTML-атрибуты и DOM-свойства, как это делает IE7-
-
Мой вариант с зеленой подсветкой и сбросом выделения при переходе на "левый" hash, с учетом пожелания автора, что "лучше без классов", вышел таким: function changeTarget() { setTimeout(function() { var targetId = location.hash.replace('#',''); var lastTarget = (window.targetedDl && window.targetedDl.id) || ''; if (targetId != lastTarget) { if (window.targetedDl) { window.targetedDl.getElementsByTagName('dd')[0].style.height = '0'; window.targetedDl.getElementsByTagName('a')[0].style.backgroundColor = ''; } if (window.targetedDl = document.getElementById(targetId)) { window.targetedDl.getElementsByTagName('dd')[0].style.height = 'auto'; window.targetedDl.getElementsByTagName('a')[0].style.backgroundColor = '#080'; } } },1); } Не учитывает вариант смены #хэша вручную (вот что я пропустил по сравнению с вариантом зацикленного таймера), но, имхо, вероятность такого действия со стороны обычного пользователя архаичных IE стремится к нулю . На правах курьеза (пока что) в IE7 (точнее, в IE9 as IE7) работает вот такой забавный вариант. Ограничения — все участвующие в процессе id-шки должны быть нормальными по старым стандартам (непустыми и начинающимися с буквы, вместо href="#" для сброса выделения приходится указывать что-то типа href="#top"), и есть риск проблем с др. псевдоклассами (и псевдоэл-тами CSS2), которых IE7 не знал. К сожалению, IE8, похоже, вместо того, чтобы воспринимать незнакомый ":target" как столь удобный ":unknown", игнорирует строку с ним напрочь (нашел когда внезапно начать соблюдать стандарт, называется. Теоретически, можно вручную распарсить innerHTML тега style (как быть с внешними CSS, надо покумекать) и провернуть эту же логику "в обход", но реализация становится куда сложнее. Вот думаю, есть ли смысл ковырять в эту сторону?..
-
Функция вставляется в тег <script>. А вызывается по загрузке картинки, например, так: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Накладываем шум на картинку через Canvas</title> <script> function addNoise(img, alpha) { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixels = imageData.data, r, g, b, origR, origG, origB; var alpha1 = 1 - alpha for (var i = 0, il = pixels.length; i < il; i += 4) { // генерируем пиксель «шума» var color = Math.random(); origR = pixels[i]; origG = pixels[i + 1]; origB = pixels[i + 2]; // высчитываем итоговый цвет в режиме multiply без альфа-композиции r = origR * color; g = origG * color; b = origB * color; // альфа-композиция pixels[i] = r * alpha + origR * alpha1; pixels[i + 1] = g * alpha + origG * alpha1; pixels[i + 2] = b * alpha + origB * alpha1; } ctx.putImageData(imageData, 0, 0); // подменяем исходную картинку созданным Canvas-ом img.parentNode.replaceChild(canvas,img); } </script> </head> <body> А теперь берем любую картинку (с этого же домена!), и как только она загрузится (по событию onload) накладываем на нее же (первый параметр функции) шум с прозрачностью 20% (второй параметр функции): <img src="image.jpg" onload="addNoise(this, 0.2)"> </body> </html> Тут я чуть поменял последнюю строчку функции - у Чикуенка она дописывала созданный Canvas к <body> (т.к. там он служил фоном, а картинка грузилась только в память и сама по себе не отображалась), а здесь он подменяет собой исходную картинку. Но принцип от этого не меняется...
-
Так обертки и сейчас не нужны.
-
mishka, респект за большую и поучительную работу, но... обязательны ли такие сложности? Судя по этой и этой таблицам, единственные мало-мальски актуальные браузеры, не рубящие фишку :target-а — это непарнокопытные из Редмонда по 8-ю версию включительно, из них onhaschange понимает лишь IE8. Стоит ли ради него одного ветвить алгоритм? И от чего еще может поменяться location.hash, кроме как от клика по ссылке? И еще, что дает ограничение значения hash вопросом, разве вопрос в hash умеет делать какую-то магию? Вот случай пустого hash (просто решетка в адресе) я в своем варианте прощелкал, это да...
-
Существует вот такой подход. Но обычно для этого используют всё-таки серверные языки. Для серьезной разработки всё равно какой-то локальный HTTP-сервер на своем компьютере ведь понадобится...
-
Ну я там и написал, что способ с тенью более продвинутый . Единственное, я бы всё равно overflow:hidden добавил, "для минимизации ущерба" окружению картинки. Эх, где бы найти толковое пояснялово (а не то отрывочное непонятство с мертвыми ссылками из оперного блога, что обычно нагугливается) про оперные SVG-эффекты, в особенности mask... Чует моя интуиция, что где-то там может нарыться легкий фикс решения с тенями для неоднородного фона...
-
Лучше было, наверное, дать ссылку на демо вместо кода, а то в этом тесном окошке со скроллингом самая вкусность-то (про тени) в глаза не бросается... Я, как мог, постарался восстановить справедливость в новом комменте к "свежатинке" (хотя и свой пример на похожем принципе пропиарил заодно, сорри)...
-
Полное раскрытие при отключенном — имхо, проще всего взять добавочный <style> из первого примера и обернуть в <noscript>. И, тыща пардонов, но на всякий случай — ссылка на конкурентов...
-
Оно?
-
В IE7 работает, только что проверил. А в остальных — как вы себе представляете "разбегающиеся" ячейки таблицы (с display:table-cell)? Добавьте в середину еще одну ячейку шириной 34%, что ли...
-
Навскидку получилось как-то так: document.attachEvent('onclick', function() { setTimeout(function() { var target = document.getElementById(location.hash.replace('#','')); if (target && target != window.targetedDl) { if (window.targetedDl) { window.targetedDl.getElementsByTagName('dd')[0].style.height = '0'; } window.targetedDl = target; window.targetedDl.getElementsByTagName('dd')[0].style.height = 'auto'; } },1); }); Только зелененькой подсветки активной dt-шки по наведению пока нет, но это добавляется двумя строчками или одним доп. классом...
-
Потому что в IE комбинация writing-mode: tb-rl; text-align: center; центрирует по вертикали целый инлайновый блок (как одно "слово", повернутое набок). А внутри этого блока тексту возвращается нормальная здоровая горизонтальная ориентация. Без дополнительной обертки .content я не представляю, как это сделать.
-
При загрузке контента по средствам js вместо тегов получаю экранирование( < > )
SelenIT replied to tragbang's question in JavaScript
Может, с dataType поэкспериментировать тогда? -
При загрузке контента по средствам js вместо тегов получаю экранирование( < > )
SelenIT replied to tragbang's question in JavaScript
Может, достаточно заменить $('#result').text(data) на $('#result').html(data)? -
1) Что делает <li> в <div>? И нужен ли последний? 2) Зачем делать меню на CSS (заведомо теряя в юзабилити/функциональности по сравнению с JS-реализациями), если обработка ссылок в нем всё равно скриптовая? А вообще — вот, например
-
Расстояние между рисунком и div-ом только на строгом Doctype.
SelenIT replied to maasja's question in HTML Coding
Потому что всегда инлайновые по умолчанию картинки — главное (в теории единственное, но это не так, особенно в Опере), чем браузеры жертвуют в угоду тёмному прошлому в "почти стандартном" режиме. А сам факт наличия таких жертв — на мой взгляд, достаточное основание для полного отказа от transitional-доктайпов) -
1) Насколько я в курсе, надежно работает только для фреймов. Уже для таблиц появляются "приколы". Сильно полагаться на это не стоит. 2) Это не отступы, это обычные пробелы. Проще и вернее всего — физически, из кода.
-
Думаю, для текстарии надо бы контент обнулить: поставить закрывающий тег сразу после открывающего, вплотную (а пустоты между тегами могут восприниматься как начальное значение). И, пожалуй, autocomplete="off" не повредит (как минимум, на этапе отладки стилей формы). А насчет "чудес" с цветами — что сказать, пользуйтесь типовыми приемами отладки (делайте тестовые копии и удаляйте из них всё, кроме проблемного куска, очень внимательно проверяйте кодировки всех файлов и BOM-метки перед ними, и т.д.). Удачи!
-
IE9, похоже, тоже И ведь не прикопаешься — фильтры в CSS 2.1 не входят, так что заявленная "полная поддержка" как бы и не задета...
-
Как можно разместить по горизонтали несколько картинок ?
SelenIT replied to Saturn's question in HTML Coding
Они по умолчанию по горизонтали, вроде...
