当容器太小时,让div消失

时间:2015-06-18 10:39:13

标签: javascript html css css3

我正在为网店工作一些独特的卖点(usp' s)。下午5点之后,其中一个usp消失了。

Normal USP Before 5 PM

第一个usp在下午5点后消失,剩下三个。

当您在平板电脑上查看时,应该只有3个usp。但是,根据时间或宽度,当在较小的设备上观看时,应该会消失。

One of the usp's should disappear

我希望我的解释清楚。我正在调整我们已经拥有的脚本以满足我的需求。我用过的javascript javascript在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>  

如何使用javascript始终显示3个usp?

4 个答案:

答案 0 :(得分:0)

您可以检查窗口宽度和条件可以启用禁用div。

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

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

答案 1 :(得分:0)

尝试溢出:隐藏。当窗口宽度很小时,你的usp不会换行。

答案 2 :(得分:0)

我的想法:您可以计算“功能”类的总宽度。然后检查它是否加上div#countdown超大。

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

您可以使用 outerwidth()代替 width()以获得更好的结果

答案 3 :(得分:0)

为什么不尝试使用自适应CSS:

例如:

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