JavaScript

  • 06 08.09

    Min-width и max-width в IE6 с помощью expression

    Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины,...

    » Читать полностью » Комментарии (7)
  • 28 11.08

    Ещё один PNG Fix для IE6

    Разработчики из Unit Interactive написали новый скрипт заставляющий IE6 адекватно отображать полупрозрачные PNG‑картинки — Unit PNG Fix. Главные преимущества скрипта: Очень компактный JavaScript: меньше 1 Kb! Исправляет большинство проблем интерактивности вызванных использованием IE-фильтров. Работает и для <img> и для CSS-свойства «background». Запускается автоматически. Не нужно...

    » Читать полностью » Комментарии (3)
  • 09 06.08

    Публичная порка JS-гуру

    Конкурс закончился и работы проверены. Работы прислали 11 программистов, из которых один участник прислал аж 8 вариантов. На удивление решения задачи оказались очень разные. Многие писали обработчики событий обычным способом, но некоторые всё-таки рекомендуемым AddEventListener/AttachEvent. Поразило разнообразие способов проверки на пробелы и наличие классов. В принципе, поскольку сама...

    » Читать полностью » Комментарии (25)
  • 17 05.08

    Конкурс для javascript-гуру!

    Объявляю конкурс среди javascript-программистов! В качестве конкурсной задачи предлагаю выполнить зачётное задание по javascript, которое выполняли в этом году студенты web-курсов на которых я преподаю. Итак, задание: Дана форма. Нужно: При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit». При убирании фокуса из поля нужно: очистить содержимое...

    » Читать полностью » Комментарии (27)
  • 18 01.08

    Градиентный текст с помощью CSS

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

    » Читать полностью » Комментарии (11)
  • 02 01.08

    Иерархический список с помощью jQuery

    Написал очень простой и функциональный скрипт организации иерархического списка. Но смысл заключается не только в скрипте, но и в правильной вёрстке. HTML Вот из такого небольшого обычного списка мы сделаем раскрывающийся иерархический список. Модель статусных групп (классов) Л. Уорнера Высший класс Верхний-высший класс, включал так называемые старые семьи. Низший-высший...

    » Читать полностью » Комментарии (19)
  • 07 12.07

    JS-Imagemapping — исправленно.

    В предыдущем посте я написал как делается активный imagemapping на jQuery. Но по какой-то непонятной причине мой мозг в один момент глюканул и решил, что указывать абсолютное позиционирование относительно всего документа — единственный вариант. А ведь это не правда. Исправляем В CSS добавляем относительное позиционирование тэгу div с id="map": #map{ position: relative; } Теперь кружочки...

    » Читать полностью » Комментарии (1)
  • 06 12.07

    Активный imagemapping на jQuery

    Главная проблема стандартного способа создания карт в том, что тэг <area> не поддерживает никаких css свойств, т.е. при наведении курсором на активную область нельзя никак её подсветить. В этом случае Flash выигрывает (пример карты на flash реализован в проекте pludmales9.lv). Я предлагаю такой вариант: подсвечиваются не сами активные области, а какие-то картинки расположенные по центру...

    » Читать полностью » Комментарии (12)
  • 17 09.07

    Всплывающая подсказка v.2

    Вспоминаем мой давний пост про плавающую над объектами подсказку. Феатурес: Вторая версия написана с использованием библиотеки jQuery (кстати, очень рекомендую обратить внимание, не такая громоздкая как Prototype) Запуск скрипта осуществялется средставми jQuery, в сам html-файл ничего не нужно вписывать В настройках скрипта можно указать в каких тэгах будет работать...

    » Читать полностью » Комментарии (21)
  • 06 09.07

    Замена подстрок с помощью JavaScript v.2

    Не string'ом единым... Пересмотрел я скрипт написаный мною в прошлой статье и теперь с некоторыми изменениями выкладываю вновь. Теперь в качестве поиска используется регулярное выражение игнорирующее вхождения подстроки между символами тэга (""), что означает что замена не будет применяться к самим тэгам. Кроме этого к объекту поиска добавил флаг (параметр 'flag'), который может быть...

    » Читать полностью » Комментарии (0)
  • 05 09.07

    Замена подстрок с помощью JavaScript

    Когда-то давно Mr. SergE попросил меня написать JS-скрипт, который при загрузке страницы заменяет в тексте определённые символы. Насколько я понял из его поста (хотя особо я его не читал - слишком много буков), ему нужна замена тире, дефисов и прочей дребедени. В общем скрипт почти написал, но остались некоторые недочёты. Код Сначала в массив symbols записываем подстроки для поиска и...

    » Читать полностью » Комментарии (8)
  • 29 08.07

    Antispam для WordPress своими руками. Эксперимент.

    Идея взята из переписки Typo3-девелоперов. Смысл Смысл идеи в том, чтобы изначально отключить отправку формы и убрать адрес отправки из атрибута action формы. Через три секунды после активации поля ввода textarea в атрибут action добавляется url страницы обрабатывающей форму, а так же активирует кнопку submit. JavaScript Поскольку этот скриптовой язык в последнее время стал мегапопулярным, мы...

    » Читать полностью » Комментарии (10)
  • 27 08.07

    Ajax анимация и загрузка

    Хотел сделать колекцию анимаций загрузок для ajax приложений, но перед этим решил порыть гугл. В итоге оказалось, что смысла нет рисовать что-то новое, потому как универсального полным полно, а специфическое каждый уважающий себя дизайнер нарисует сам, для каждого проекта своё. Вот, например, существует даже генератор анимированых иконок Ajaxload.info, в колекции которого десятки анимаций и на...

    » Читать полностью » Комментарии (6)
  • 04 08.07

    Остров. JavaScript события для групп однотипных объектов.

    Настроение было порисовать. Но вообще статья будет не о графике, а о коде. События JavaScript Те кто изучал JS знают, что в основном события пишутся внутри тэга как атрибуты и применяются к конкретному элементу. Например: <div id="someblock" onmouseover="this.backgroundColor='#eee'; onmouseout="this.backgroundColor='#fff' ">-----</div> Помещая курсор мышки над блоком,...

    » Читать полностью » Комментарии (4)
Google     
01 03.10

Международная выставка образования «Школа-2010»

С 25 по 28 февраля в Международном выставочном центре «Кипсала» прошла ежегодная выставка «Школа-2010», в которой Школа веб-технологий участвовала в первый раз. В первый раз участвовать в таких глобальных мероприятиях было трудно, особенно первый день, но мы выдержали и добились определённого успеха. Как минимум «засветились» среди высших (и не очень) учебных заведений, как Школа предлагающая профессиональное образование в сфере веб-технологий. Как максимум, нас запомнили и проявили интерес к нашей Школе сотни (если не тысячи) людей, а несколько человек сразу записалось на веб-дизайн, мультимедиа дизайн, веб-программирование и сетевое и веб-администрирование. Кроме того, в качестве успеха мы можем засчитать многочисленные предложения по сотрудничеству от владельцев предприятий, государственных организаций и даже высших учебных заведений. Фотографии и видео можно посмотреть соответственно на фейсбуке и на ютубе. Ну а в последний день выставки Туриба вместе с...

Категории: События | Фото | ВидеоТэги: » Читать полностью » Комментарии (1)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
23 11.09

Первая проба записи видео-лекций по PHP в Школе веб-технологий

Решили попробовать записывать лекции Школы веб-технологий на видео. Обработка занимает к сожалению больше времени, поэтому показываю только первые 10 минут (после монтажа) с основами синтаксиса. Сама лекция предназначена для тех, кто уже начал изучать PHP. Так сказать для закрепления материала. Преподаватель Арвид Годюк, очень волнуется, уж не забрасывайте помидорами, а вот оператора (меня) можете забросать: штатива нет, руки дрожат, поставил было на полку шкафа, так вдруг фокус стал пропадать. Не профессионал, что делать… Первая попытка даёт старт серии лекций по разным веб-технологиям.

Категории: Видео | PHP | КурсыТэги: » Читать полностью » Комментарии (9)
02 09.09

Новый amigos.lv

Сегодня была запущена новая социальная сеть Латвии amigos.lv, к разработке которого я имею непосредственное отношение (лого, дизайн и вёрстка). Особенности данного проекта изложены на главной странице (если пользователь не залогинен или не зарегистрирован). Особо хочу обратить внимание на следующий функционал: Ленты событий — всё что создаётся вашими друзьями, комментируются ваши записи в блоге и фотографии, пишутся ответы на ваши вопросы, всё это отражается в соответствующих лентах. Ответы — формат QNA с возможностью создания вопросов, опросов и фотовопросов, а отвечать можно только один раз. Интересы — это тэги, на которые можно подписаться и получать всё новое связанное с интересующими вас темами. Оценки — всё оценивается и за действия получаются оценки, причём за счёт хитрой системы накрутка фактически исключена. В общем, пробуйте. Хотелось бы знать ваше мнение, только конструктивно, без фанатизма.

Категории: События | ЛогоТэги: » Читать полностью » Комментарии (10)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (12)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (22)
28 07.09

Элементы управления в веб-сервисах

В продолжение предыдущей статьи посвящённой организации навигации в социальных сетях, пройдусь по другим темам. Существуют следующие виды элементов управления в веб-проектах: Контент-ссылки Контролы Контент-ссылки — это те ссылки которые позволяют перейти на страницу с каким-либо содержимым. Они могут быть следующего вида: Ссылки Иконки Ссылки с иконками Кнопки Табы Навигационное меню Контролы — это те ссылки, которые подразумевают какие-либо действия: добавить, удалить, изменить, искать, отправить и т. д. Внешний вид может быть: Ссылки Иконки Ссылки с иконками Кнопки И кстати говоря, кнопки могут быть тоже разные: С текстом С иконкой С текстом и иконкой Иконка сверху Иконка слева Иконка справа Также контролы можно классифицировать по эмоциональному признаку: Позитивные Негативные Нейтральные Бонусы Их может быть и больше, но эти основные. Следующим примером иллюстрируются различия этих контролов по...

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (7)