Append and remove element with jquery when width of window is greater than 769px

Question

I'm trying something a bit different with slideshows when the window width reduces and expands in size. I have the html code for two slideshows in slideshows.html. Slideshows are labeled:

<div class="slideshow-mobile">... </div>

<div class="slideshow-desktop">... </div>

I'd like to append '.slideshow-desktop', located in slideshow.html, into my '#featured' div, which is located index.html page, when the window width is greater than 769px.

When the window width is less than 769px, I'd like to remove the code from the existing slideshow,'.slideshow-desktop', and then append '.slideshow-mobile' in #featured. In other words when window width is less than 769px I just want to replace '.slideshow-desktop' with '.slideshow-mobile'.

I hope this makes since. Would anyone know, or have a clue on how to do this?

Answer 1

我建议使用Adapt.js（ http://adapt.960.gs/ ），它具有一个回调函数，您可以在其中依赖于宽度来添加/删除元素。