我正在为网店工作一些独特的卖点(usp' s)。下午5点之后,其中一个usp消失了。
第一个usp在下午5点后消失,剩下三个。
当您在平板电脑上查看时,应该只有3个usp。但是,根据时间或宽度,当在较小的设备上观看时,应该会消失。
我希望我的解释清楚。我正在调整我们已经拥有的脚本以满足我的需求。我用过的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?
答案 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;
}
}