jQuery append function and resizing

Я пытаюсь создать свой первый сайт с прогрессивным улучшением и задать вопрос о добавлении jQuery и изменении размера браузера. В основном, я настроил его так, чтобы загруженный по умолчанию сайт был мобильной версией, а затем у меня есть функция jQuery для добавления элементов рабочего стола в div на странице, если ширина браузера составляет не менее 1100 пикселей.jQuery append function and resizing

Он отлично работает, но теперь мне просто нужно решить проблемы с изменением размера. В настоящее время, если вы измените размер окна браузера ниже ширины 1100 пикселей, элементы, добавленные в div, не исчезнут, пока вы не обновите браузер. Я хотел бы сделать так, чтобы при изменении размера окна браузера ниже 1100px элементы, которые были добавлены, исчезли без обновления.

Может ли кто-нибудь указать мне в правильном направлении? Благодаря!

HTML:

<div id="section1"> 

</div>

Javascript:

if (window.matchMedia("(min-width: 1100px)").matches) { 
    $("#section1").append("\ 
     <div class='placeholder'>\ 
      <img src='assets/site/desktop_placeholder.png' />\ 
     </div>\ 
    "); 
}

источник

2013-11-18 APAD1

Вы хотите полностью удалить их или просто скрыть их? – PlantTheIdea

Я бы, вероятно, использовал запросы css media, но вы также можете использовать событие [resize event] (http://api.jquery.com/resize/). – ioums

Я думаю, вам нужно обработать событие изменения размера. Выполните следующие действия: http://stackoverflow.com/questions/641857/javascript-window-resize-event – Aaron

Я играл с ним немного, и я думаю, что я близко. Сообщите мне, если есть лучший способ сделать это, или если вы видите какие-либо проблемы с этим кодом. Благодаря!

function appendElements() { 
    //swap in desktop content 
    if (window.matchMedia("(min-width: 1100px)").matches) { 
     $("#section1").append("\ 
      <div class='placeholder'>\ 
       <img src='assets/site/desktop_placeholder.png' />\ 
      </div>\ 
     "); 
    } 
    }else{ 
     $("#section1").empty(); 
    } 
} 

if (window.matchMedia("(min-width: 1100px)").matches) { 
    appendElements(); 
} 

$(window).resize(function(){ 
    appendElements();  
});

источник

2013-11-18 21:58:54 APAD1

jQuery append function and resizing

ответ

Смежные вопросы