javascript - availWidth not working in mozilla & IE -
as menu becoming big lower resolution, im removing less important buttons....but not working in mozilla & ie ?
javascript
<script> if(screen.availwidth<=1345) {var r1=document.getelementbyid("rem1"); r1.remove();} if(screen.availwidth<=1255) {var r2=document.getelementbyid("rem2"); r2.remove();} </script>
html
<li id='rem1'><a href=''id='pad2'>resources</a></li> <li id='rem2'><a href='' id='pad2'>help</a></li>
the screen.availwidth property seems work ok, alternative can use document.body.clientwidth. remove element can use r1.parentnode.removechild(r1);
instead of .remove() method, purpose i'd recommend rather adjust display property here:
window.onload = window.onresize = function () { var r1 = document.getelementbyid("pad1"); var r2 = document.getelementbyid("pad2"); r2.style.display = (document.body.clientwidth <= 1345) ? 'none' : 'list-item'; r1.style.display = (document.body.clientwidth <= 1255) ? 'none' : 'list-item'; }
jsfiddle: code + fullscreen
Comments
Post a Comment