javascript

УрокСкрипт, который меняет цвет первого слова в строке

Дизайнеры - люди творческие, поэтому на них обижаться нельзя. Недавно один товарищ прислал мне макет, в котором первое слово каждого заголовка было выделено другим цветом. Пошуршав по просторам веба, и не найдя готового решения, пришлось писать своё.

Собственно, сам скрипт:

УрокУменьшаем количество исходного кода на странице при помощи javascript

Не секрет, что большинство поисковых систем обращают внимание на соотношение количества нормального текста к количеству html и javascript кода на странице. И чем меньше "лишнего" на странице, тем лояльнее к сайту относится эта система. Поэтому надо каким-то образом этот код урезать. Но что же делать, если, например, дизайн не позволяет? Ну вот нарисовал дизайнер закруглённые уголки в комментариях - а это как минимум 4 ( а в худшем случае и все 8 ) лишних классов для каждого коммента! Представьте, что на странице 100 комментариев. Это 400 (800) лишних классов только для уголков!!

Я предлагаю абсолютно нехитрый способ решения этой проблемы: пару строк кода на Jquery - и поисковик, а вместе с ним и Вы, будете счастливы.

Предположим, у нас шаблон комментария comment.tpl.php выглядит таким образом:

<div class="comment <?php print $comment_classes; ?>">
 
  <!-- вывод переменных, html разметка и прочее -->

УрокPop-up логин при помощи javascript

Обычный логин занимает на сайте много места, а это может быть критично для некоторых сайтах. Так что сегодня я расскажу о том, как можно сделать симпатичный всплывающий логин.

Как это сделать в теории:

  • запихиваем блок логина в какой-нибудь div
  • скрываем этот div через css (display:none;)
  • создаём кнопку/ссылку с надписью ВХОД
  • вешаем скрипт, который при нажатии на кнопку ВХОД показывает/прячет div с блоком логина

А теперь к практике:

Напишем в template.php функцию, которая будет показывать анонимам кнопки ВХОД и РЕГИСТРАЦИЯ, а зарегистрированным - ПРОФИЛЬ и ВЫХОД (а заодно и блок логина обернём в div):

  function custom_login() {
 
  $output = '<div id = "custom_login">'; //оборачиваем наш код в дополнительный div
  global $user;
 
 
  if ($user->uid) {
    //если пользователь авторизовался, то

УрокJava-скрипт, который обрезает фотографии и сохраняет их на сервере при помощи Ajax

Не так давно получил примерно такое техзадание: вывести фотографию, которую пользователь может обрезать графическими средствами, после чего сохранить картинку на сервере. На самом деле тз было немного сложнее, но к сути вопроса это не относится ;)

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

Для этого я написал небольшой модуль, который можно скачать тут. Он включает в себя файл с упакованным скриптом imgareaselect, и моим модулем, который я назвал image_cropper.

Урок"Умное" раскрывающееся вертикальное меню на jquery за 2 минуты

Сейчас поговорим о том, как за 2 минуты сделать своё выпадающее меню, не обделённое мозгами, на скриптах, не прибегая к дополнительным модулям.

Допустим, у нас есть такое праймари меню:

  • Топ 100
  • Графика
    • Абстракция
    • Кино
    • Компьютерная графика

Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать "умный" скрипт, который будет за этим следить.

Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

УрокРазворачивающийся тизер при клике на заголовок ноды

Поступила заявка, сделать следующий урок: "Пример: страница с перечнем новостей, но показываются только тайтлы + дата публикации и автор. Нажимаешь на тайтл и под ним разворачивается на js тизер с ссылкой на полную ноду."

Для начала нам нужен будет вот такой код в файле node.tpl.php:

УрокМеню с анимацией

Всегда хочется своё основное меню как-нибудь украсить. Кто-то делает его выпадающим, иногда раздвигающимся. Кто-то навешивает на него разных красивых картинок. Я вот решил прикрутить к меню красивый скрипт, который видели немногие. А так как меню многим нравится, я решил рассказать как его сделать. Темболее что оно абсолютно кроссбраузерно.