javascript - How to remove data-toggle="modal" in specific window size? -
i beginner of javascript. want remove data-toggle attribute when screen size less 760px , make href working. have no idea how remove data-toggle attribute, below code:
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;"> <div class="portfolio-wrapper"> <a data-toggle="modal" data-target="#mymodal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox"> <img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.jpg" /> <div class="b-wrapper"> <h2 class="b-animate b-from-left b-delay03"> <img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/> </h2> </div> </a> </div> <div class="port-info"> <h4> <a href="http://www.example.com/main/includes/onepager/business_service/example/index.php"> example</a> </h4> </div> </div
nobody addressed case when screen width might again greater 760. we'll have add data attribute back.
window.addeventlistener("resize", resizehandler); function resizehandler() { var winwidth = window.innerwidth, threshold = 760, els = document.getelementsbyclassname('thickbox'); [].foreach.call(els, function (el) { if (winwidth < threshold) { el.removeattribute("data-toggle"); } else { el.setattribute("data-toggle", "bar"); } }); }
check out tiny demo see in action. http://codepen.io/antibland/pen/reznno
Comments
Post a Comment