1

Здравствуйте. Подскажите пожалуйста, как верно изменить этот скрипт, чтобы при разрешении экрана меньше 420px высота блока detail_text изменяла значение? Сейчас при любом разрешении экрана выставляется значение в 200px, что не подходит для мобильных телефонов. Копала в сторонуmatchMedia, но что-то идет не так.

    <script type="text/javascript">
    var element_detail_text = $("#detail_text").html();

    $("#detail_text_resize").show();

    function resize_text_field(){
        if(document.getElementById("detail_text").offsetHeight > 200){
            document.getElementById("detail_text").style.overflow = "hidden";
            document.getElementById("detail_text").style.height = "200px";
            document.getElementById("detail_text_resize").style.display = "";
        }
    resize_text_field();
    onload = function(){ resize_text_field() }

    function element_detail_show(){
        $("#detail_text_resize").hide();
        document.getElementById('detail_text').style.overflow='';
        document.getElementById('detail_text').style.height='auto';
        $("#detail_text_minimize").show();
    }

    function element_detail_hide(){
        $("#detail_text_minimize").hide();
        document.getElementById('detail_text').style.height='200px';
        document.getElementById('detail_text_resize').style.display='inline-block';
        document.getElementById('detail_text').style.overflow='hidden';
        $("#detail_text_resize").show();
    }
    </script>
1
  • вам именно по js нужно ибо же и css подойдет? 17 сен 2017 в 16:56

1 ответ 1

1

Может такой пример Вам поможет.

function changeHeight(){
	var element = document.getElementById("detail_text");

	if (window.matchMedia("(max-width: 420px)").matches) {
		element.style.height = "100px";
	} else {
		element.style.height = "200px";
	}
}
changeHeight();

window.addEventListener("resize", changeHeight);
#detail_text{
  height: 200px;
}
<div id="detail_text" >detail_text</div>

Но, проще сделать через CSS media queries

@media screen and (max-width: 420px){
    #detail_text{
        height: 100px;
    }
}
8
  • здравствуйте. Я пробовала через CSS media queries, но приходится дополнительно прописывать !important и все-равно работает криво. Т.е. при попытки раскрыть текст полностью, он накладывается на нижний текстовый блок. Поэтому хочу попробовать прописать в самом скрипте разное поведение для разных размеров окна. Предполагаю, что это может решить проблему. Спасибо, сейчас попробую воспользоваться предложенным вами примером
    – Alla
    18 сен 2017 в 8:40
  • Вообще, как раз для этого и существуют CSS media queries, что бы адаптировать вашу страницу для всех экранов. Кстати, Вы код с media queries поместили в самый низ стилей?
    – Igor Lut
    18 сен 2017 в 8:54
  • да, конечно. Может так происходит из-за того, что стили для этого элемента, которые определяются в скрипте, прописываются инлайн?
    – Alla
    18 сен 2017 в 9:24
  • Да, конечно инлайновые стили в приоритете. Так что лучше Вам их убрать в основной файл. Есть такая возможность?
    – Igor Lut
    18 сен 2017 в 9:29
  • 1
    @Alla Скрипт Вам не нужен будет вообще. Вы все это можете сделать на CSS на много легче и удобнее. На JS стоит это делать, если в CSS не получается. Не стоит усложнять...
    – Igor Lut
    18 сен 2017 в 9:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.