jquery windows widthcalculation

Question

У меня есть навигатор, который дал ему класс «nav-oferta24», и я вам нужен, если он находится в «ширине> 992», помещает класс navbar-inverse, но если нет, то поместите навигатор по умолчанию

Мой код:

<nav class="navbar navbar-inverse nav-oferta24"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav">         
       <li><a href="#" class="no-margin">¿Qué es la oferta del día?</a></li>    
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li class="no-margin no-padding"> 
        <a href="#" class="no-margin"> 
         <span class="m-r-5"> 
          <i class="pg-shopping_cart bg-icon-oferta24h"></i> 
         </span> 
         2 Producto(s)<b><span class="text-naranja m-l-10">56,99€</span></b> 
        </a> 
       </li> 
      </ul> 

      <ul class="nav navbar-nav center-nav"> 
       <li class="b-r no-margin no-padding"><a href="#" class="no-margin">Atencion al cliente</a></li> 
       <li class="b-r no-margin no-padding"><a href="#" class="no-margin">902 00 55 55</a></li> 
       <li><a href="#" class="no-margin">Contáctanos</a></li> 
      </ul> 


     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

Я не вижу код JavaScript/JQuery. Во всяком случае, вот как рассчитать высоту и ширину окна:

var scw = document.documentElement.clientWidth; // This is screen Width 
var sch = document.documentElement.clientHeight; // this is screen Height 

https://jsfiddle.net/cxaLgg9z/

jsfiddle.net эмулирует экран, поэтому он не будет показывать реальную высоту и ширину экрана, но окно, в котором он работает с :) Так что попробуйте запустить его на своем компьютере - он будет показывать реальный W и H.

Answer 2

с помощью JQuery, вы можете сделать это:

$().ready(function() { 
    if ($('.nav-oferta24').width() > 992) { 
     $('.nav-oferta24').addClass('navbar-inverse'); 
    } else { 
     $('.nav-oferta24').addClass('navbar-default'); 
    } 
}); 

Это, очевидно, может быть CLE аннулированный. Но это выполнит то, что вы хотите.

Heres рабочая скрипку