How can I use media-queries to load a javascript file from HTML -
is possible (and if how) have media query load different javascript file html depending on browser size?
something along lines of this?
<script media="screen , (max-width: 900px)" src="/js/menu_home.js" type="text/javascript"></script>
or found on internet didn't load either file
<script> function require(path) { try{ document.write('<script type="text/javascript" src="'+path+'"><\/script>'); } catch(e) { var script = document.createelement('script'); script.src = path; document.getelementsbytagname('head')[0].appendchild(script); } } if (ismedia("screen , (max-width:900px)"){ require('/js/menu_home.js'); } else { require('/js/menu_photo.js'); } </script>
on website http://www.kujawadesigns.com/web/where_art_thou/ have set load different script files allow accordion menu expanded on right category. have expandfirst class removed mobile version however. if guys recommend use process, please let me know.
thanks in advance!
using matchmedia can execute blocks of javascript when mediaquery condition met
<script> if (window.matchmedia('screen , (min-width: 600px)')){ var head = document.getelementsbytagname("head")[0]; s = document.createelement('script'); s.setattribute('type','text/javascript'); s.setattribute('src',jsname); head.insertbefore(s, head.firstchild); } </script>
reference: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
note: older/unsupported web browsers, can try matchmedia() polyfill, although doesn’t support addlistener.
Comments
Post a Comment