Buongiorno a tutti,
ho creato una pagina html nella quale mostrare o nascondere i pulsanti "#prev" e "#next" al variare della posizione del Div "#PANEL":
quando la posizione di "#PANEL" sull'asse x è minore di 980px vorrei mostrare solo next , quando è compresa tra 980px e 3920px vorrei mostrare sia prev che next, mentre quando la posizione x è maggiore di 3920px mostrare solo prev !!!
Ho attribuito ai pulsanti le proprietà css display:none per non visualizzarli di default:
mentre il codice jquery è il seguente:
I pulsanti muovono il "#PANEL" correttamente:
si può testare eliminando dal codice jquery le righe comprese tra:
// START stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
e
// END stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
però non funziona correttamente la visualizzazione di "#prev" e "#next".
La pagina HTML per testare è interamente listata di seguito:
Sono grato a chiunque voglia darmi una mano a capire lo sbaglio e ad aiutarmi a correggerlo.
Grazie in anticipo.
Ciao.
ho creato una pagina html nella quale mostrare o nascondere i pulsanti "#prev" e "#next" al variare della posizione del Div "#PANEL":
quando la posizione di "#PANEL" sull'asse x è minore di 980px vorrei mostrare solo next , quando è compresa tra 980px e 3920px vorrei mostrare sia prev che next, mentre quando la posizione x è maggiore di 3920px mostrare solo prev !!!
Ho attribuito ai pulsanti le proprietà css display:none per non visualizzarli di default:
Codice:
#prev {float: left;display: none;cursor: pointer;background-color: #ff0000;text-indent: 10px;color: #fff;width: 70px;padding: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#next {float: right;display: none;cursor: pointer;background-color: #ff0000;text-indent: 10px;color: #fff;width: 70px;padding: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
Codice:
$(document).ready(function() {
// stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
var absoluteLeft = $("#PANEL").offset().left;
if (absoluteLeft < 980) {
$("#prev").hide();
$("#next").show();
}
else if (absoluteLeft > 980 && absoluteLeft < 3920) {
$("#prev").show();
$("#next").show();
}
else if (absoluteLeft > 3920) {
$("#prev").show();
$("#next").hide();
}
// azioni per i pulsanti
$("#next").click(function () {
$("#PANEL").animate({scrollLeft: '+=980px'}, 800);
});
$("#prev").click(function () {
$("#PANEL").animate({scrollLeft: '-=980px'}, 800);
});
});
si può testare eliminando dal codice jquery le righe comprese tra:
// START stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
e
// END stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
però non funziona correttamente la visualizzazione di "#prev" e "#next".
La pagina HTML per testare è interamente listata di seguito:
HTML:
<html>
<head>
<title>JQUERY PANEL SLIDER TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
html,body {background-color:#000;margin:0 auto;}
#header {text-align:center;height: 60px;}
h3,p {margin-top:20px;color:#fff;}
#container {position: relative;background-color: #ccc;width: 940px;height:340px;left: 50%;margin-left: -470px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;padding: 30px;}
#PANEL {overflow:hidden;height:300px;}
#slidecontent {width:4900px;margin-left:-40px;}
#footer {position: relative;text-align:center;}
.sez {float: left;width: 940px;height:400px;padding-left:40px;}
#prev {float: left;display: none;cursor: pointer;background-color: #ff0000;text-indent: 10px;color: #fff;width: 70px;padding: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#next {float: right;display: none;cursor: pointer;background-color: #ff0000;text-indent: 10px;color: #fff;width: 70px;padding: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// START stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
var absoluteLeft = $("#PANEL").offset().left;
if (absoluteLeft < 980) {
$("#prev").hide();
$("#next").show();
}
else if (absoluteLeft > 980 && absoluteLeft < 3920) {
$("#prev").show();
$("#next").show();
}
else if (absoluteLeft > 3920) {
$("#prev").show();
$("#next").hide();
}
// END stabilisco quando mostrare o nascondere i pulsanti in base allo spostamento del pannello
// START azioni per i pulsanti
$("#next").click(function () {
$("#PANEL").animate({scrollLeft: '+=980px'}, 800);
});
$("#prev").click(function () {
$("#PANEL").animate({scrollLeft: '-=980px'}, 800);
});
// END azioni per i pulsanti
});
</script>
</head>
<body>
<div id="header"><h3>JQUERY PANEL SLIDER TEST</h3></div id="header">
<div id="container">
<div id="PANEL">
<div id="slidecontent">
<div class="sez"><h1>1° PANNELLO<br><br>Adesso vorrei vedere solo il pulsante NEXT</h1></div>
<div class="sez"><h1>2° PANNELLO<br><br>Adesso vorrei vedere sia il pulsante NEXT che il pulsante PREV</h1></div>
<div class="sez"><h1>3° PANNELLO<br><br>Adesso vorrei vedere sia il pulsante NEXT che il pulsante PREV</h1></div>
<div class="sez"><h1>4° PANNELLO<br><br>Adesso vorrei vedere sia il pulsante NEXT che il pulsante PREV</h1></div>
<div class="sez"><h1>5° e ULTIMO PANNELLO<br><br>Adesso vorrei vedere solo il pulsante PREV</h1></div>
</div id="slidecontent">
</div id="PANEL">
<div id="prev">< PREV</div><div id="next">NEXT ></div>
</div id="container">
<div id="footer"><p>... speriamo che qualcuno mi aiuti ;D</p></div>
</body>
</html>
Sono grato a chiunque voglia darmi una mano a capire lo sbaglio e ad aiutarmi a correggerlo.
Grazie in anticipo.
Ciao.
Ultima modifica di un moderatore: