Problema visualizzazione pulsanti dopo scroll

P

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

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

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>
 
P

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

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
 
P

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

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
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
Y Problema visualizzazione PDF generato da fpdf PHP 1
M Problema visualizzazione colori in photoshop Photoshop 0
M [HTML] Problema visualizzazione immagini su dispositivi HTML e CSS 4
Antonio Nervi [Javascript] Problema visualizzazione banner accettazione cookies Javascript 6
A Problema visualizzazione photoshop elements 9 Photoshop 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
A [PHP] Problema visualizzazione nome utente loggato su sito ecommerce PHP 23
fulviozecchin Problema Visualizzazione tabelle HTML nel Browser HTML e CSS 9
asevenx problema visualizzazione menu sovrapposto allo slider WordPress 7
N Problema visualizzazione dati dopo GET PHP 19
M Problema con visualizzazione immagini da BLOB PHP 1
D problema visualizzazione su smartphones Google Ads (AdWords) 1
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
B Problema di visualizzazione di uno Slider in jquery jQuery 4
asevenx problema visualizzazione slider con firefox HTML e CSS 3
G Problema visualizzazione sito su iOS HTML e CSS 4
A problema slideshow con visualizzazione mobile HTML e CSS 6
M Problema visualizzazione immagini su blog Tumblr HTML e CSS 2
N ciao a tutti ho un problema con la visualizzazione delle pagine in php PHP 1
D Problema visualizzazione oltre 50 record .... MySQL 2
andrea.peo Problema query con join visualizzazione record ripetuti PHP 5
R Problema di visualizzazione testo con google crome WordPress 1
P Problema visualizzazione immagine da database MySQL 3
S problema di visualizzazione PHP 7
A problema nella visualizzazione file caricato tramite ftp WordPress 0
Emix Problema visualizzazione pagina su host diversi HTML e CSS 3
asevenx problema visualizzazione sito su tablet e portatile PHP 1
A problema visualizzazione dati da tabella PHP 15
N Problema visualizzazione hyperlink con Google Chrome. HTML e CSS 2
S Problema visualizzazione HTML e CSS 5
M Problema visualizzazione codice sorgente altro sito PHP 4
S Problema visualizzazione chrome HTML e CSS 3
GoshMaledetto Problema valori giusti in array sbagliati in visualizzazione Javascript 2
Nicola Miceli Problema Visualizzazione pagina WP su Iphone Smartphone e tablet 0
S Problema visualizzazione codice PHP 4
M Problema visualizzazione immagine PHP 6
D Problema visualizzazione immagini png PHP 1
M problema di visualizzazione con FF ed Opera HTML e CSS 11
O Problema visualizzazione dati [era:Un problema] HTML e CSS 11
P Problema visualizzazione sito wordpress CMS (Content Management System) 2
A Problema estrazione e visualizzazione immagine da database PHP 16
L Problema visualizzazione immagini formato Tif [era: Formati Tif Problema?!] Windows e Software 1
S Problema permessi visualizzazione immagine PHP 1
S Problema visualizzazione lista amici PHP 6
G Problema visualizzazione immagini PHP 1
C Problema con visualizzazione dell'immagina da tabella database PHP 5
S Problema visualizzazione HTML e CSS 0
giancadeejay Intro flash,problema nella visualizzazione su sito Flash 2
A IE 8 problema visualizzazione e compatibilità Javascript 0
F problema visualizzazione immagine dopo compilazione form Javascript 2

Discussioni simili

Alto Basso