По нажатию кнопки, как изменить положение блока, при max-width: 810px, на jQuery ?


#1
                                       Доброго времени суток!
   Есть некий Блок (.spoiler-body.absolute) с position: absolute; и по нажатию на кнопку всё работает отлично!

Но как только уменьшается размер экрана, этому блоку хочу задать уже другое позиционирование, т.е. position: static; чтобы этот блок вернулся в поток и соответственно, нижние блоки, уже не будут “наезжать” на этот верхний.

И вот как мне реализовать это на jQuery ?
Вот примерно, накидал такую, не рабочую конструкцию :slight_smile: https://jsfiddle.net/72kpe8qz/


#2

А зачем здесь js? Используйте media-выражение в css, пропишите точку разрыва 810px и добавьте необходимые свойства для этого разрешения…


#3

Так в том-то и дело, что я и начал с media queries и перелопатил кучу вариантов! И всё не получалось… А оказалось всё банально просто. Были элементарные ошибки из-за невнимательности, которые исправил … кое-что удалил и всё получилось сразу!
У меня в медиа-запросе, при меньшем разрешении экрана, были стили, которые и мешали нужному позиционированию блока .spoiler-body поэтому я их и удалил.
Ну а теперь всё ок! :+1: :grinning:

Ну а переопределил, так......

В стилях было:
.spoiler-body { /Скрытый синий Блок с навигацией/
position: absolute;
right: .5%;
top: .5%;
width: 29.5%;
margin-right: -4%;
display: none;
visibility: hidden;
transition: visibility 0.5s lenear!important;
}

  А в медиа стало....

@media only screen and (max-width: 808px) {
.spoiler-body {
position: static!important; /изменяем позиционирование с absolute на static, чтобы .spoiler-body вернулся в поток и div.container-story опустился ниже/
width: 50%;
top: 45%;
margin-left: 4%;
}
}


#4

А !important обязательны?


#5

Как оказалось, совсем нет, не обязательно. Просто, я так сильно хотел, чтобы это получилось, поэтому и поставил !important :smiley: (сейчас удалил). Но это в Chrome…
А в IE11 не получается… Т.е. такие же стили в медиа-запросе, но не срабатывают в IE11.
Т.е. не получается изменить позиционирование блока .spoiler-body с absolute; на static; чтобы и в IE11, блок вернулся в поток. Как же это сделать?
Т.е. в IE11, по клику кнопки, блок .spoiler-body,исходя из стилей медиа-запросов, опускается ниже, он остаётся в position: absolute; поэтому нижняя секция со слайдером, не опускается, а наезжает на .spoiler-body

.ie-screen - это дополнительный класс div.spoiler-body, для IE11
             https://jsfiddle.net/72kpe8qz/2/


#6

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


#7

Да, спасибо! Я это уже смотрел…и тоже ставил родительскому блоку position:relative; - всё равно не выходит… В Chrome всё получается, а в IE нет :sweat:


#8

Получилось! :+1: :smiley:

 Оказывается, чтобы абсолютно спозиционированный блок изменить на position: static;  Он всё-равно не вернётся в поток, (речь идёт о IE11) пока Вы не зададите ему "маржины" в абсолютных величинах! 

@media only screen and (max-width: 808px) {
:-ms-fullscreen, /для Ie/
:root .ie-screen {
/изменяем позиционирование с absolute на static, чтобы .spoiler-body вернулся в поток и div.container-story опустился ниже/
margin: 37% auto 210px 16%;
}
}