Problema visualizzazione pulsanti dopo scroll

Paolo70

Nuovo Utente
4 Ott 2012
5
0
0
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:
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;}
mentre il codice jquery è il seguente:
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);
});

});
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:

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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
prova cosi:
Codice:
<script type="text/javascript">
            $(document).ready(function() {               
                
                $("#next").show();

                // START azioni per i pulsanti
                $("#next").click(function () { 
                    $("#PANEL").animate({scrollLeft: '+=980px'}, 800);   
                    $("#prev").show();                  
                    var absoluteLeft = $("#PANEL").scrollLeft();                   
                    if (absoluteLeft == 2940) {
                        $("#next").hide();
                    }
                });
   
                $("#prev").click(function () { 
                    $("#PANEL").animate({scrollLeft: '-=980px'}, 800);
                    $("#next").show();
                    var absoluteLeft = $("#PANEL").scrollLeft();                   
                    if (absoluteLeft == 980) {
                        $("#prev").hide();
                    }
                });
}
        </script>
non ho testato a dovere Pensaci tu

edit
2 osservazioni
non serve che ripeti l'id del div quando lo chiudi basta </div>
con explore lo script non funziona non ho controllato il motivo ma credo che sia dovuto all'impostazione del css
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Scusate lo riposto perche mi son perso qualche parentesi
eccolo funzionante
Codice:
<script type="text/javascript">

            $(document).ready(function() {              
                
                $("#next").show();

                // START azioni per i pulsanti
                $("#next").click(function () { 
                    $("#PANEL").animate({scrollLeft: '+=980px'}, 800);   
                    $("#prev").show();                  
                    var absoluteLeft = $("#PANEL").scrollLeft();                   
                    if (absoluteLeft == 2940) {
                        $("#next").hide();
                    }
                });
   
                $("#prev").click(function () { 
                    $("#PANEL").animate({scrollLeft: '-=980px'}, 800);
                    $("#next").show();
                    var absoluteLeft = $("#PANEL").scrollLeft();                   
                    if (absoluteLeft == 980) {
                        $("#prev").hide();
                    }
                });
            });

        </script>
 

Paolo70

Nuovo Utente
4 Ott 2012
5
0
0
Ciao Criric,
prima di tutto grazie per la disponibilità e la velocità nel rispondere:
lo script funziona perfettamente!
Passo alle tue osservazioni:
1) non serve che ripeti l'id del div quando lo chiudi basta </div> ...
- lo so che non serve ed è anche ridondante, ma è un vizio che mi porto dietro perchè mi sono incartato così tante volte
per aver dimenticato di chiudere un div o anche chiudendone di inesistenti che ho cominciato a mettere il nome nella chiusura come riferimento ;)
2) per curiosità con quale versione di Explorer non funge?? non ho modo di testarlo subito su quel browser, mi saresti d'aiuto

Buona giornata

Paolo
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
1)
piuttosto scrivi cosi
HTML:
</div> <!-- container -->
non credo venga validata dal w3c la sintassi che hai usato
2)
IE 9 ma credo abbia lo stesso effetto su tutte le versioni
 

Paolo70

Nuovo Utente
4 Ott 2012
5
0
0
1) di solito pulisco il codice prima di pubblicare, comunque grazie per la dritta della validazione, d'ora in poi controllo meglio di aver pulito tutto
o meglio ancora commento la chiusura come mi hai suggerito.
2) Explorer è veramente allucinante spero che con la 10 si mettano al passo

Alla prossima
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
per avere la 10 devi comprarti windows 8
furbi
sono le voci che ho sentito, ma di solito non sono al passo coi tempi, magari ora è cambiato qualcosa

ciao