Problema visualizzazione pulsanti dopo scroll

Paolo70 · 4 Ott 2012

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.

criric · 4 Ott 2012

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

criric · 4 Ott 2012

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 · 4 Ott 2012

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 · 4 Ott 2012

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 · 4 Ott 2012

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 · 4 Ott 2012

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

Cerca

Cerca

Problema visualizzazione pulsanti dopo scroll

Paolo70

Nuovo Utente

criric

Super Moderatore

criric

Super Moderatore

Paolo70

Nuovo Utente

criric

Super Moderatore

Paolo70

Nuovo Utente

criric

Super Moderatore

Discussioni simili