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'));  
}

[RGB]

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

[ArtemPitov]

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

[Гість]

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

Змінено 23 грудня 2015 користувачем Гість

[mpn2005]

Можно просто использовать 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>

[sitecreator]

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

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

 

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

 

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

 

 

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

 

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

 

 

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

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

[ArtemPitov]

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

[sitecreator]

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

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

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

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

[ArtemPitov]

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