Estoy mostrando un div oculto #alert
cuando #total=0
, y lo que estoy buscando es que #alert
SÓLO se muestre cuando la pantalla está en landscape.
El problema es que aunque en el CSS hay un @media screen
el script lo ignora y siempre me muestra el div #alert
a cualquier resolución de pantalla y en cualquier orientación, y la verdad es que no sé solucionarlo correctamente.
¿Cuál es el fragmento del script que debería agregar para evaluar si la pantalla está sólo en horizontal y hasta 999px ántes de mostrar el div #alert
para un #total=0
...?
Éste es mi código (también disponible en JSFiddle):
$(document).ready(function() {
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = parseFloat($("#total").val());
if (totalStorage != null && total === 0) {
total = totalStorage;
}
if (total > 99.99 && total < 299.99) {
console.log("PASS");
$('#regalo').show();
$('#alert').hide();
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 2000);
//--------------------
if (!$("#notify")[0].paused) { //play audio
$("#notify")[0].pause(); //play audio
$("#notify")[0].currentTime = 0; //play audio
} else { // play audio
setTimeout(function() { //play audio
$("#notify")[0].play(); //play audio
})
}; //play audio
//--------------------
localStorage.setItem('suppress_gift_tooltip_1', 'true')
}
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
} else {
console.log("FAIL");
$('#alert').hide();
$('#regalo').hide();
}
}
$(document).on('click', function(event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val()));
}
});
manageRegalo();
});
#alert,
.tooltip {
display: none
}
@media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo">REGALO</div>
<div class="tooltip">Tooltip</div>
<div id="alert">ALERT</div>
<input type="text" id="total" value="0">
<button type="button" class="bbp">Enter</button>