Простые JavaScript и JQuery, а также MooTools-примеры.


Решение на JavaScript для случая, когда Opera не понимает псевдокласс active

Далее приведено простое решение на JavaScript для случая, когда Opera не понимает псевдокласс CSS active:

<script>
    jQuery(function($) {
        // Для Opera:
        $('.register-page-social-auth-block a').click(function() {
            $(this).addClass('active');
        }).mouseout(function() {
            $(this).removeClass('active');
        });
    });
</script>

(далее…)

Опубликовано 17-03-2014 в 10:13

Кнопка Наверх для сайта

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

Кнопка Наверх для сайта

Скачать рабочий пример

1. Подключите JQuery к сайту, и добавьте также следующий сценарий на JavaScript:

$(document).ready(function() {

  /*** Кнопка Наверх ***/
  
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('#to-top').fadeIn();
    } else {
      $("#to-top").hide();
    }
  });

  $('#to-top').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 599);

    return false;
  });
  
});

(далее…)

Опубликовано 23-01-2014 в 11:39

Генерация картинок-заглушек на JavaScript самостоятельно

Изготавливать себе изображения-заглушки для сайта, находящегося в разработке, можно множеством различных способов, начиная от ручного орудования каким-нибудь графическим редактором типа GIMP или Adobe Photoshop, и заканчивая сторонними веб-сервисами вроде http://placehold.it/.

Однако сегодня я покажу вам один полезный готовый скриптик на JavaScript с помощью которого можно решить ту же проблемку альтернативным способом. Имя ему holder.js. Скачать его можно, кликнув на следующую кнопочку:

Скачать holder.js

(далее…)

Опубликовано 16-01-2014 в 16:51

Различные JQuery меню (и не только) для ваших сайтов

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

pro_dropdown_3

JQuery меню многоуровневое вертикальное

Выпадающее многоуровневое вертикальное меню, сделанное с примением JavaScript, и не без JQuery. По внешнему виду чем-то напоминает (отдаленно) элементы пользовательского интерфейса ОС Windows Vista / темы для Windows XP и т.п. Возможно все дело в фоновых картинках?

Просмотреть Скачать
(далее…)

Опубликовано 1-01-2014 в 17:46

JQuery — как вставить элемент на страницу: .after() и .before()

Пара примеров с использованием JQuery-методов .after() и .before().

.after()

Имеем:

<script>
$(document).ready(function() {
    $("#raz-after").after("<p>JQuery - метод .after()</p>");
});
</script>
<div class="tak-dlya-primera">
    <div id="raz-after">
    </div>
</div>

Получаем:

<div class="tak-dlya-primera">
    <div id="raz-after">
    </div><p>JQuery пример с методом .after()</p>
</div>

(далее…)

Опубликовано 9-12-2013 в 16:52

JQuery — как вставить элемент на страницу: .append() и .prepend()

Несколько не сильно сложных примеров с JQuery-методами .append(), .prepend().

.append()

Было:

<script>
$(document).ready(function() {
    $("#demka-odin").append("<p>JQuery пример с методом .append()</p>");
});
</script>
<div class="obichnii-div">
    <div id="demka-odin">
    </div>
</div>

Станет:

<div class="obichnii-div">
    <div id="demka-odin">
    <p>JQuery пример с методом .append()</p></div>
</div>

Как видим метод .append() вставляет тег между тегами блочных div-элементов под общим идентификатором #demka-odin. (далее…)

Опубликовано 9-12-2013 в 15:56

JQuery — как вставить элемент на страницу: .insertAfter(), .insertBefore()

Немного о различных методах динамичной вставки элементов в содержимое веб-страницы, просто в примерах.

.insertAfter()

Имеем:

<script>
$(document).ready(function() {
    $("<p>Пример первый</p>").insertAfter("#primer-pervii");
});
</script>
<div class="prosto-div">
    <div id="primer-pervii">
    </div>
</div>

Получим:

<div class="prosto-div">
    <div id="primer-pervii">
    </div><p>Пример первый</p>
</div>

Как видим абзац вставился ПОСЛЕ заданного элемента. (далее…)

Опубликовано 9-12-2013 в 15:30













Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты