Перейти к содержанию
ArtemPitov

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

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

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

 

Ломаю голову как правильно сделать адаптивную верстку, пациент 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-ов родителя что бы по дизайну все плясало

Поделиться сообщением


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

использовать detach() и insertAfter()

Изменено пользователем timedontwait

Поделиться сообщением


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

Можно просто использовать 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.