availWidth не работает в mozilla и IE

Question

, поскольку меню становится слишком большим для более низкого разрешения, im удаляет менее важные кнопки .... но это не работает в 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> 

Answer 1

screen.availwidth свойство, кажется, работает нормально, но в качестве альтернативы вы можете использовать document.body.clientWidth. Чтобы удалить элемент, который вы можете использовать r1.parentNode.removeChild(r1);instead of the .remove() method, но для ваших целей я рекомендую вам достаточно настроить свойство дисплея здесь:

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

Answer 2

Я считаю, что вы после измерения ширины клиента документа (доступное полезное пространство для работы с). Затем вы можете использовать:

document.documentElement.clientWidth 

Вы можете найти более подробную информацию об этой теме здесь:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow