Ho una pagina, abbastanza complessa, sviluppata in PHP. All'interno di questa pagina, ci sono alcuni div che appaiono/scompaiono con effetto slide verticale.
Il JS che comanda l'effetto é fondamentalmente questo (i layer sono molti, ed il JS viene creato dinamicamente dal PHP; qui riporto solo un paio di esempi):
Codice PHP:
function showSlidingDiv(quant){
if (quant == 11) {
$("#offer1").animate({"height": "show"}, { duration: 500 });
$("#offer2").animate({"height": "hide"}, { duration: 500 });
$("#offer3").animate({"height": "hide"}, { duration: 500 });
$("#cercah").animate({"height": "hide"}, { duration: 500 });
$("#cercap").animate({"height": "hide"}, { duration: 500 });
} else if (quant == 110) {
$("#offer1").animate({"height": "hide"}, { duration: 500 });
$("#offer2").animate({"height": "hide"}, { duration: 500 });
$("#offer3").animate({"height": "hide"}, { duration: 500 });
$("#cercah").animate({"height": "hide"}, { duration: 500 });
$("#cercap").animate({"height": "hide"}, { duration: 500 });
}
Nella pagina, ovviamente, ci sono svariati div cui viene applicato questo effetto (il JS riportato ne contempla solo 5), ma per spiegare il problema credo sia sufficiente anche solo questa parte del codice JS. Nel primo caso, infatti, c'è un effetto mostra uno, nascondi gli altri, nel secondo un effetto nascondi tutti, che indipendentemente dai div a cui sono applicati, sono le due tipologie necessarie.
Qui sotto, riporto il codice html con cui i vari div interessati sono presenti nella pagina:
Codice PHP:
<div id="cercah" class="cerca" style="display:none;">
<form method="post" name="cercahotel" id="cercahotel">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="32" colspan="3" valign="middle" class="findtxt">PER HOTEL</td>
</tr>
<tr>
<td width="270" height="73" align="right" valign="middle" class="topsearch">Scegli Hotel che preferisci!</td>
<td width="20"></td>
<td align="left" valign="middle" class="selhotel"><select name="selhotel" id="selhotel" onchange="MM_jumpMenu('parent',this,0)" style="background-color: #f8b400;font-size:12px;font-weight:bold;width:200px;">
<option>selezionare</option>
<option value="cerca.php?k=h&val=30">Hotel Ambasciatori</option><option value="cerca.php?k=h&val=33">Hotel Antares</option><option value="cerca.php?k=h&val=19">Hotel Belvedere</option><option value="cerca.php?k=h&val=5">Hotel Castiglione Village SPA</option><option value="cerca.php?k=h&val=36">Hotel Eugenio</option><option value="cerca.php?k=h&val=20">Hotel Gran Paradiso</option><option value="cerca.php?k=h&val=29">Hotel Grazia Terme</option><option value="cerca.php?k=h&val=3">Hotel Grifo</option><option value="cerca.php?k=h&val=37">Hotel Internazionale</option><option value="cerca.php?k=h&val=13">Hotel Maremonti</option><option value="cerca.php?k=h&val=27">Hotel Mediterraneo</option><option value="cerca.php?k=h&val=40">Hotel Noris</option><option value="cerca.php?k=h&val=24">Hotel Parco Residence La Rosa</option><option value="cerca.php?k=h&val=28">Hotel Parco dei Principi</option><option value="cerca.php?k=h&val=18">Hotel Parco delle Agavi</option><option value="cerca.php?k=h&val=39">Hotel Parcocartaroma</option><option value="cerca.php?k=h&val=38">Hotel Punta Molino Beach Resort & SPA</option><option value="cerca.php?k=h&val=9">Hotel San Nicola</option><option value="cerca.php?k=h&val=10">Hotel Santa Maria</option><option value="cerca.php?k=h&val=25">Hotel Sorriso Thermae Resort</option><option value="cerca.php?k=h&val=21">Hotel Terme Al Bosco</option><option value="cerca.php?k=h&val=15">Hotel Terme La Reginella</option><option value="cerca.php?k=h&val=26">Hotel Terme Manzi</option><option value="cerca.php?k=h&val=35">Hotel Terme Oriente</option><option value="cerca.php?k=h&val=7">Hotel Terme Parco San Marco</option><option value="cerca.php?k=h&val=8">Hotel Terme Park Imperial</option><option value="cerca.php?k=h&val=1">Hotel Terme Punta del Sole</option><option value="cerca.php?k=h&val=41">Hotel Terme Royal</option><option value="cerca.php?k=h&val=6">Hotel Terme Royal Palm</option><option value="cerca.php?k=h&val=14">Hotel Terme San Lorenzo</option><option value="cerca.php?k=h&val=16">Hotel Terme San Montano</option><option value="cerca.php?k=h&val=34">Hotel Terme Solemar</option><option value="cerca.php?k=h&val=4">Hotel Terme Tramonto Oro</option><option value="cerca.php?k=h&val=17">Hotel Terme Villa Svizzera</option><option value="cerca.php?k=h&val=31">Hotel Terme di Augusto</option><option value="cerca.php?k=h&val=2">Hotel Thermal Park Nausica Palace</option><option value="cerca.php?k=h&val=11">Hotel Villa Orta</option><option value="cerca.php?k=h&val=12">Hotel Villa Fiorentina</option><option value="cerca.php?k=h&val=22">Hotel Villa Tina</option><option value="cerca.php?k=h&val=23">Hotel Villa al mare</option>
</select></td>
</tr>
</table>
</form>
</div>
<div id="cercap" class="cerca" style="display:none;">
<form action="preview2010_ith.php" method="post" name="cercaprice" id="cercaprice">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="32" colspan="3" valign="middle" class="findtxt">PER PREZZO</td>
</tr>
<tr>
<td width="270" height="73" align="right" valign="middle" class="topsearch">Scegli la fascia di prezzo che preferisci!</td>
<td width="20"></td>
<td align="left" valign="middle" class="topsearch_y" style="background-attachment: scroll;background-image: url(images/coinsearch.jpg);background-repeat: no-repeat;background-position: right top;"><span class="topsearch">da</span>
<input name="from" type="text" style="background-color: #f8b400;font-size:12px;font-weight:bold;width:100px;" />
<span class="topsearch">a</span>
<input name="to" type="text" style="background-color: #f8b400;font-size:12px;font-weight:bold;width:100px;" />
<input type="submit" name="cerca1" id="cerca1" value=" CERCA " style="background-color: #ff0000;font-size:10px;font-weight:bold;width:70px;color:#fff;" /></td>
</tr>
</table>
</form>
</div>
<div id="offer1" style="display:none;"><table width="922" border="0" align="left" cellpadding="0" cellspacing="4" style="background-color:#f2eac2;"><tr height="25"><td align="left" valign="middle" bgcolor="#216400" style="color:#FC0;font-weight:bold;">HOTEL TERME PUNTA DEL SOLE / 8 giorni / 199 € !</td></tr><tr><td height="25" align="right" valign="middle">[url="#topofferte"]chiudi[/url]</td></tr><tr><td valign="top">
- Sistemazione in camera doppia Economy.
- Trattamento di pensione completa incluso bevande (1/4 di vino e 1/2 minerale a persona ai pasti).
- Mezza pensione sconto di euro 5,00 a persona al giorno.
- Sconto 3° e 4° letto 50%
- Culla Euro 8,00 al giorno, compreso pasti.
- Camera singola Euro 8,00 al giorno
- Camera con balcone Euro 5,00 a persona al giorno
- Parcheggio Auto Euro 5,00 al giorno (posti limitati).
- Fanghi e Inalazioni scontati del 50% se sprovvisti della impegnativa ASL.</p></td></tr></table></div>
<div id="offer2" style="display:none;"><table width="922" border="0" align="left" cellpadding="0" cellspacing="4" style="background-color:#f2eac2;"><tr height="25"><td align="left" valign="middle" bgcolor="#216400" style="color:#FC0;font-weight:bold;">HOTEL TERME PARCO SAN MARCO / 6 giorni / 350 € !</td></tr><tr><td height="25" align="right" valign="middle">[url="#topofferte"]chiudi[/url]</td></tr><tr><td valign="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, neque.</p></td></tr></table></div>
<div id="offer3" style="display:none;"><table width="922" border="0" align="left" cellpadding="0" cellspacing="4" style="background-color:#f2eac2;"><tr height="25"><td align="left" valign="middle" bgcolor="#216400" style="color:#FC0;font-weight:bold;">HOTEL MEDITERRANEO / 8 giorni / 379 € !</td></tr><tr><td height="25" align="right" valign="middle">[url="#topofferte"]chiudi[/url]</td></tr><tr><td valign="top">
</p></td></tr></table></div>
Il problema è, in effetti di duplice natura, e provo qui a descriverne i vari aspetti.
Innanzitutto, quando richiamo il JS per mostrare un livello, quale che sia il livello target questo viene effettivamente mostrato. Però, se agisco per mostrare uno dei livelli del gruppo di ricerca ('cercah' e 'cercap', nel codice riportato) funziona pienamente, cioè il livello target viene mostrato, e l'altro nascosto. Se, invece, vado ad agire sull'altro gruppo ('offer1', 'offer2', 'offer3'), il livello target viene mostrato, ma gli altri livelli (eventualmente) visibili dello stesso gruppo non vengono nascosti, mentre quelli dell'altro si. Infine, se poi tento di mostrare un secondo livello, questo diventa sì visibile, ma aggiungendosi a quello già visibile.
Insomma, su uno dei due gruppi di livelli la funzionalità è piena, sull'altro solo parziale.
Da aggiungere che, in quest'ultimo gruppo, sono presenti del link che richiamano la funzione JS per nascondere tutti i livelli. E che, invece, non funzionano affatto.
Il problema, quindi, sembra essere concentrato su questi livelli, ma non riesco proprio a capire perchè!...
Spero di essere riuscito a spiegarmi...