<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивная вёрстка через jQuery

Адаптивная вёрстка через jQuery

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

Разберём достаточно классическую задачу. Есть трёхколоночный сайт. И нам необходимо его адаптировать под ширину, например, 480px. Обычными стилями тут никак не обойтись, поэтому необходимо менять структуру. Самый простой способ - это просто всё содержимое правой колонки поставить вниз левой. То есть фактически, превратить трёхколоночный сайт в двухколоночный.

Это тоже пример адаптивной вёрстки, но уже через jQuery. Давайте с Вами это реализуем (не забудьте подключить библиотеку jQuery):

<script type="text/javascript">
  $(document).ready(function() {
    var w = $(window).width(); // Получаем ширину окна
    if (w <= 480) { // Если ширина окна меньше, либо равна 600
      $("#left").html($("#left").html() + $("#right").html()); // Копируем содержимое правой колонки в левую
      $("#right").remove(); // Удаляем правую колонку
    }
  });
</script>

Я думаю, что тут код достаточно прозрачный. Безусловно, без медиа-запросов в CSS тут не обойтись. В частности, у центральной колонки изначально есть margin-left и margin-right. И поскольку теперь правой колонки нет, то margin-right надо обнулить, и, тем самым, центральная часть увеличится, и уместить контент на небольших экранах станет значительно проще.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (7):

Dima2000 Dima2000 15.03.2014 15:05:39

Михаил, а вы будите менять дизайн своего сайта? Просто заметил новый дизайн вашего сайта на продающей странице нового курса по сиэсэс 3 и аштиэмэль 5.

Ответить

alexandrdante alexandrdante 15.03.2014 15:24:02

Дмитрий,всё в работе. Из-за недостатка времени у Михаила - это не быстро. Естественно,дизайн будет изменён

Ответить

GoTo GoTo 18.03.2014 20:09:14

Друзья, есть обычный трехколоночный сайт. <div id="content"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> Установил jQuery, проверил, работает. Но скрипт адаптивной верстки не работает. Куда нужно конкретно вставить этот код, чтобы скрипт заработал? Спасибо.

Ответить

tikkiwiki tikkiwiki 19.03.2014 14:29:04

Здравствуйте, Анатолий. А, где скрипт? Я не вижу. И впервые слышу о скрипте jQuery который делает адаптивную верстку. Скорее всего Вы не так поняли.

Ответить

GoTo GoTo 21.03.2014 13:56:04

Александр, спасибо. С этим разобрался. Теперь у меня такой вопрос. Как правильно написать условие? "Если ширина окна больше, либо равна 320 И меньше, либо равна 768"?

Ответить

Ucome Ucome 28.03.2014 22:30:49

if (w >= 320 AND w <= 768) // Если ширина окна больше, либо равна 320 И меньше, либо равна 768"

Ответить

SuperSonicFire SuperSonicFire 25.06.2016 07:22:36

Ещё плохо разбираюсь в JS; как сделать так, чтобы $(document).ready(function().. срабатывала при каждом изменении ширины окна? Я уже разобрался, что надо добавить в <body> атрибут onResize="...", но как заставить скрипт выполниться ещё раз? Ведь у функции нет имени.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.