javascript - How to 'cut' DOM element and display it in other place? -
i have website, , want "cut" every div#id .tab-content , add every div every li when viewport width less 768px.
my html page:
<section id="menu"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul id="menu-nav" class="nav nav-pills text-center"> <li class="active"><h2><a href="#about" data-toggle="tab">about</a></h2></li> <li><h2><a href="#services" data-toggle="tab">services</a></h2></li> <li><h2><a href="#contact" data-toggle="tab">contact</a></h2></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="tab-content"> <div class="tab-pane active" id="about"> <div class="col-sm-8 col-sm-offset-2"> <p class="text-center"> lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. nam sit, est libero obcaecati. </p> </div> </div> <div class="tab-pane" id="services"> <div class="col-sm-8 col-sm-offset-2"> <p class="text-center"> lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. nam sit, est libero obcaecati. </p> </div> </div> <div class="tab-pane" id="contact"> <div class="col-sm-8 col-sm-offset-2"> <p class="text-center"> lorem ipsum dolor sit amet, consectetur adipisicing elit. debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. nam sit, est libero obcaecati. </p> </div> </div> </div> </div> </div> </div> </section> i tried use jquery every div#id, it's not working.
$(document).ready(function(){ if ($(window).width() < 768) { var divabout = $('#about').pop(); $(divabout).appendto('#menu-nav li:first-of-type'); } }); i want have result on mobile:
<li> <h2>about</h2> <div id="about"> ... </div> </li> and same other divs.
you can use resize handler , do
var flag; $(window).on('resize.menu', function () { var width = $(window).width(), $ul = $('#menu-nav'); if (width < 768 && flag != 1) { flag = 1; $('#menu .tab-content .tab-pane').each(function () { $(this).appendto($ul.find('li:has(a[href="#' + this.id + '"])')) }); } else if (width >= 768 && flag != 2) { flag = 2; $ul.find('.tab-pane').appendto('#menu .tab-content'); } }).trigger('resize.menu') demo: fiddle
Comments
Post a Comment