容器太小時，讓div消失

Question

我正在爲網上商店購買一些獨特的賣點（usp's）。下午5點後，這些usp的消失之一。

第一USP自敗下午5點之後將有三個左邊。

當您在平板電腦上查看時，應該只有3個usp。但取決於時間或寬度，在較小的設備上觀看時應該消失。

我希望我的解釋是明確的。我正在調整我們已經有的腳本來滿足我的需求。 JavaScript的我對美國藥典dissapearing作品5的JavaScript後：

<div class="main-container col1-layout"> 

     <div id="countdown" class="hide-below-768"> 
      <div class="container"> 
       <div class="usp"> 
        <div class="feature indent countdown"> 
         <span class="icon i-countdown no-bg-color"></span> 
         <p class="no-margin ">Bestel binnen 
      <strong> 
       <span id="t_hours">5 uren en </span><span id="t_minutes">6 minuten</span> <span id="t_seconds"></span> 
      </strong> 
      en ontvang je bestelling morgen al in huis 
     </p> 

     <script type="text/javascript"> 
      var lang_hours  = 'uren'; 
      var lang_hour  = 'uur'; 
      var lang_minutes = 'minuten'; 
      var lang_minute  = 'minuut'; 
      var lang_seconds = 'seconden'; 
      var lang_second  = 'seconde'; 

      var Counter = Class.create(); 
      Counter.prototype = { 

       time_left: 0, 
       keep_counting: 1, 
       interval: null, 

       /* 
       * INITIALIZATION - CONFIGURATION 
       */ 
       initialize: function(t) { 
        this.time_left = t; 
        this.interval = setInterval("countdown.timer()", 1000); 
        // this.timer(); 
       }, 

       timer: function() { 
        this.countdown(); 
        this.format_output(); 
       }, 

       countdown: function() { 
        if(this.time_left <= 60) { 
         clearInterval(this.interval); 
         this.keep_counting = false; 
        } 

        this.time_left = this.time_left - 1; 
       }, 

       format_output: function() { 
        if(this.keep_counting) { 
         var hours, minutes, seconds; 
         seconds = this.time_left % 60; 
         minutes = Math.floor(this.time_left/60) % 60; 
         hours = Math.floor(this.time_left/3600); 

         if($('t_hours')) $('t_hours').innerHTML = hours+' '+(hours == 1 ? lang_hour : lang_hours) + ' en '; 
         if($('t_hours') && hours < 1) $('t_hours').innerHTML = ""; 
         if($('t_minutes')) $('t_minutes').innerHTML = minutes+' '+(minutes == 1 ? lang_minute : lang_minutes); 
         if($('t_minutes') && minutes < 1) $('t_minutes').innerHTML = ""; 
         if($('t_seconds') && (hours < 1 && minutes < 10)) $('t_seconds').innerHTML = (minutes >= 1 ? ' en ' : '') + seconds + ' ' + (seconds == 1 ? lang_second : lang_seconds); 
        } else { 
         $('countdown').remove(); 
        } 
       } 

      }; 

      var countdown = new Counter(18464); 
     </script> 

        </div> 
        <div class="feature indent transport"> 
         <span class="icon i-transport no-bg-color"></span> 
         <p class="no-margin ">Gratis verzending binnen heel Nederland</p> 
        </div> 
        <div class="feature indent calender"> 
         <span class="icon i-calender no-bg-color"></span> 
         <p class="no-margin ">30 dagen retourrecht. Niet goed? Geld terug!</p> 
        </div> 
        <div class="feature indent pay"> 
         <span class="icon i-pay no-bg-color"></span> 
         <p class="no-margin ">Achteraf betalen, koop vandaag betaal over 14 dagen</p> 
        </div> 



    </div> 
</div> 

我怎樣才能保持始終顯示3個USP是用JavaScript？

Answer 1

你爲什麼不嘗試使用CSS響應：

爲如：

@media (max-width: 420px) { 
    .the-div { 
     display: none; 
    } 
} 

Answer 2

你可以檢查窗口的寬度和條件可以啓用禁用div（s）。

var width = $(window).width(); 

if(width < "your tablet width you want to set") 
{ 
    $("your div element").fadeOut(); 
} 
else 
{ 
    $("your div element").fadeIn(); 
} 

Answer 3

嘗試溢出：隱藏。當窗口寬度很小時，您的usp將不會換行。

Answer 4

我的想法：你可以計算「功能」類的總寬度。然後檢查它是否加上div＃倒數過大。

$("document").ready(function(){ 
    var twidth = 0; 
    $(".main-container .feature").each(function(){ 
     twidth += $(this).width(); 
    }); 
    if(twidth + $("#countdown").width() > $(".main-container").width()) 
     $("#countdown").hide(); 
}) 

您可以使用outerwidth（）的代替寬度（），效果更佳