Смена места элементов. Управление DOM

[npofopr]

Я тут про адаптивный дизайн...

Как вы делаете такую штуку:

есть элемент .block-item, на 1024 он расположен внутри .header, а при 768px, этот блок переходит в .footer, ну т.е. в совсем другое место.

 

Думаю не редко такое видели, в макетах.

Вот и хочется услышать, как такое делается? 

Понятно конечно, что самое просто это дублировать :-) Т.е. делать 2 элемента, и там и там, и менять у них display: block на none и обратно, но это же не кошерно.

 

Может скрипты какие то есть, для таких манипуляций? А может у jquery есть что то встроенное, решающее этот вопрос двумя строчками? :-)

Нашел вот такую штуку intentionjs, но на сколько я понял, там то же самое дублирование. Хотя может я не просек фишку.

[Radiocity]

Ни разу не видел подобное. Покажите живой пример.

[decode]

хз, все же если элементы не очень большие, то мне кажется проще продублировать (кнопка и т/п),

если большие, то да - это по стилю бомжа)

А что тогда мешает определить разрешение и вставить элемент в нужное место?)

Или их больше одного и хочется более гибкого решения?

[npofopr]

А что тогда мешает определить разрешение и вставить элемент в нужное место?)

Ничего не мешает, я и спрашиваю, как это делается. И их не больше одного. Но это счетчик.

 

Пример... Нарисуйте в уме обычный макет. Где в header есть например баннер, при ресайзе окна на 768px, этот баннер должен появиться в footer, т.е. переместиться :-) У меня немного проще, но смысл тот же самый.

 

это по стилю бомжа)

А это что такое?

[nerv]

css media queries?

[Zverushka]

Ну явно такое на css чистом не сделать. Можно написать свой простенький скрипт - делов на 5 минут.

Edited December 8, 2013 by Zverushka

[decode]

Ну явно такое на css чистом не сделать. Можно написать свой простенький скрипт - делов на 5 минут.

на CSS можно, но только вроде если весь родительский блок перемещать

[Zverushka]

А как он их местами в css поменяет?
Разве что absolut относительно страницы - один вверху, другой снизу - и отступы для других элементов задать, чтобы они отодвинулись от краев страницы. Кстати это способ...

Edited December 8, 2013 by Zverushka

[Radiocity]

Пример... Нарисуйте в уме обычный макет. Где в header есть например баннер, при ресайзе окна на 768px, этот баннер должен появиться в footer, т.е. переместиться :-) У меня немного проще, но смысл тот же самый.

Тогда media-queries + абсолютное позиционирование. Будут еще какие подробности?

[decode]

А как он их местами в css поменяет?

Разве что absolut относительно страницы - один вверху, другой снизу - и отступы для других элементов задать, чтобы они отодвинулись от краев страницы. Кстати это способ...

есть такая штука под названием flexbox, но в случае ТС не прокатит.

если он только как-то структуру переопределит, чтобы .block-item, не зависил от .header ну и отказаться от ie9 или даже ie10 (но этот способ ИМХО не для такой мелочи)

—-

короче самый верняк будет накатать пару строчек, чтобы в зависимости  от разрешения блок перещался/вставлялся

Edited December 8, 2013 by decode

[npofopr]

Тогда media-queries + абсолютное позиционирование. Будут еще какие подробности?

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

В общем то вывод один, только скриптами, только я думал, может есть какие то готовые решения.  

[Zverushka]

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

Ну-ну! Постоянно подвал абсолютом вниз загоняют. Можно сделать по принципу подвала, но и для хедера тоже - и менять их местами просто.

[decode]

 

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

Ну-ну! Постоянно подвал абсолютом вниз загоняют. Можно сделать по принципу подвала, но и для хедера тоже - и менять их местами просто.

 

подвал вниз таким способом загоняли года 3 назад и то, это уже казалось как минимум херовенько 

Edited December 8, 2013 by decode

[npofopr]

 

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

Ну-ну! Постоянно подвал абсолютом вниз загоняют. Можно сделать по принципу подвала, но и для хедера тоже - и менять их местами просто.

 

Ужас :-) 

 

Про хедер и футер я писал, для примера, в моей ситуации элементы просто в одной обертке. 

[Radiocity]

Тогда media-queries + абсолютное позиционирование. Будут еще какие подробности?

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

В общем то вывод один, только скриптами, только я думал, может есть какие то готовые решения.

Просил примеры. Вы не предоставили.

Объяснил один из вариантов решения проблемы. Вы меня осудили.

Больше попыток помочь с моей стороны не ждите.

[Zverushka]

подвал вниз таким способом загоняли года 3 назад и то, это уже казалось как минимум херовенько

Хм, интересно, а можно тогда ссылку на современный способ загоняния подвала? И кстати в чем минус способа с абсолютами и вытеснением контента вверх?

Edited December 8, 2013 by Zverushka

[decode]

 

подвал вниз таким способом загоняли года 3 назад и то, это уже казалось как минимум херовенько

Хм, интересно, а можно тогда ссылку на современный способ загоняния подвала? 

 

flexbox (если по очень современному )

Edited December 8, 2013 by decode

[Zverushka]

А насколько он кроссбраузерный? Какие версии ie поддерживаются?

[decode]

А насколько он кроссбраузерный? Какие версии ie поддерживаются?

гугл подскажет

[npofopr]

 

 

Тогда media-queries + абсолютное позиционирование. Будут еще какие подробности?

Вы шутите что ли? Когда вы в последний раз верстали абсолютами?

 

В общем то вывод один, только скриптами, только я думал, может есть какие то готовые решения.

 

Просил примеры. Вы не предоставили.

Объяснил один из вариантов решения проблемы. Вы меня осудили.

Больше попыток помочь с моей стороны не ждите.

 

Ну не маленькие же дети... Не за чем обижаться :-) Но это и правда не серьезно. Может быть для каких то макетов и можно так сделать.

Но с адаптивной версткой, как то редко, даже никогда такого не встречал.

А насколько он кроссбраузерный? Какие версии ie поддерживаются?

http://ryanfait.com/sticky-footer/

http://www.webmolot.com/recipe/footer/

у бутстрапа есть реализация. 

Пример моего макета.

На 1024 выглядит так

 

На 768:

Может конечно я туплю и это можно через медиа-запросы состыковать всё

Edited December 8, 2013 by npofopr

[Zverushka]

http://ryanfait.com/sticky-footer/ http://www.webmolot.com/recipe/footer/ у бутстрапа есть реализация. 

Хм, вообще там не флексов, но реализация сама по себе простейшая и понятная. непонятно тогда к чему и кто пляски с абсолютами придумал. 

[decode]

 

http://ryanfait.com/sticky-footer/ http://www.webmolot.com/recipe/footer/ у бутстрапа есть реализация. 

Хм, вообще там не флексов, но реализация сама по себе простейшая и понятная. непонятно тогда к чему и кто пляски с абсолютами придумал. 

 

придумано для старого хлама было и это один из многих способов, который по моему мнению не самый лучший просто был

[npofopr]

 

http://ryanfait.com/sticky-footer/ http://www.webmolot.com/recipe/footer/ у бутстрапа есть реализация. 

Хм, вообще там не флексов, но реализация сама по себе простейшая и понятная. непонятно тогда к чему и кто пляски с абсолютами придумал. 

 

Ну да, а флексы пока не стоит использовать. Рановато еще. 

Не для всех проектов. А вообще можете посмотреть презентацию, если не видели

[Zverushka]

Флексы я смотрю с 10го осла только работают. Неужели Вы забиваете на остальные версии.

[nerv]

Ну да, а флексы пока не стоит использовать. Рановато еще. 

http://javascript.ru/forum/offtopic/43300-konec-adam-vjorstki-2.html#post283710