Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Jquery и адаптивная верстка


ArtemPitov
 Поделиться

Рекомендованные сообщения

Доброго времени суток 

 

Ломаю голову как правильно сделать адаптивную верстку, пациент 1.5.xx стоит на 980 grid sistem

в некоторых моментах нужно таскать блоки "туда - сюда" и вот возник вопрос как правильно это сделать ?

 

1) копировать блоки с помощью скрипта и через доп. классы скрывать / показывать нужное 

- или -

2) определять расширение при каждом ресайзе  innerWidth || documentElement.clientWidth || body.clientWidth и потом через append перемерять куда нужно

 

Прицепи понятно что второй вариант предпочтительнее , но вот тут возникает вопрос 

1. как сделать что бы при каждом ресайзе если элемент уже перемещен  в нужное место он повторно не создавался

2. как переместить блоки в первоначальное состояние для десктопе если был резайз и отработал скрипт 

if (width >= 980 && width <= 1280){
  $('.mob').append($('.shortDesc'), $('.tegs'));
  $('.cheap').append($('.share'));  
}
Ссылка на комментарий
Поделиться на других сайтах

А в чем смысл делать адаптивную верстку на js, если с этим прекрасно справляется простой css? Тем более используя 980gs реализация адаптивности по своей сути будет не сильно отличаться от bootstrap

Ссылка на комментарий
Поделиться на других сайтах

нужно несколько элементов перемещать из div-ов родителя что бы по дизайну все плясало

Ссылка на комментарий
Поделиться на других сайтах

Можно просто использовать after и before. http://api.jquery.com/after/

Для переноса элемента.

 

Обратить внимание на пример:

$( ".inner" ).after( "<p>Test</p>" );

До выполнения было:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

После выполнения будет:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
Ссылка на комментарий
Поделиться на других сайтах

Jquery для верстки стоит использовать осторожно.

Особенно хорошо нужно это помнить, делая страницы "категория", "поиск" и подобные, когда "верстаете" товары в списке товаров. Не забывайте, что тот же фильтр будет перезагружать часть страницы при фильтрации по своим алгоритмам и ваша "верстка" на Jquery может разъехаться.

 

Да и частенько фокусы возникают при изменении разрешения и отработки Jquery.  Jquery рекомендую запускать один раз после загрузки страницы, а далее все чисто CSS - это в тысячу раз надежнее чем ваше:
 

 

2) определять расширение при каждом ресайзе  innerWidth || documentElement.clientWidth || body.clientWidth и потом через append перемерять куда нужно

 

 

Лучше уж первый ваш вариант.

 

Я не понял, что именно вам нужно. Возможно, что вообще все на чистом CSS можно реализовать. Конкретики бы. А то "туда-сюда" непонято.

 

 

----------------

Кстати, плохо, что нет раздела на форуме по верстке или программированию, несвязанному напрямую с движком. Так сказать, фундаментальные вопросы. Причем тут курилка, в которой о погоде говорим и анекдоты травим, и сообщения в которой ценятся ниже гроша ломаного?

Ссылка на комментарий
Поделиться на других сайтах

Я все таки переверстал немного по другому все село почти как было запланировано на чистом css, не захотел сильно грузить все скриптами, за ответ спасибо

Ссылка на комментарий
Поделиться на других сайтах

И это правильно. Почти всегда если подумать хорошенько, то все на чистом CSS сделать можно.

даже блок, который сверху можно в низ передвинуть, а если точнее, то для примера:

<div>1</div>
<div>2</div>
<div>3</div>

Это исходное отображение. При желании можно визуально менять порядок следования как угодно и в любой последовательности.  При этом сам код HTML не меняется, естественно нет никакого JS, все на CSS и @media, разумеется.

Ссылка на комментарий
Поделиться на других сайтах

это да, согласен с Вами благо СSS 3 есть, правда браузеры иного мозги е****т

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.