Ottiminazzare script

Ciao, ho trovato uno script on-line che nascone o mostra un div al click di una parola.

Questo è il codice dello script

Codice:

---

<script type='text/javascript'>
animatedcollapse.addDiv('nome_div', 'fade=1, height=100%');

animatedcollapse.ontoggle=function($, divobj, state)
{ //fires each time a DIV is expanded/contracted
  //$: Access to jQuery
  //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
  //state: "block" or "none", depending on state
}

animatedcollapse.init()
</script>

---

E questo è codice del collegamento ipertestuale per aprire e chiudere il div

Codice:

---

animatedcollapse.hide(nome_div)

---

Dato che utilizzo questo script in un ciclo for creo n <div> con n collegamenti per aprirli e per chiuderli.

Posso ottiminare lo script facendo in modo che che lo script crei in automatico i tag

Codice:

---

animatedcollapse.addDiv('nome_div', 'fade=1, height=100%');

---

che mi servono

Visto che lo script indicato usa jquery, potresti tenatre così:

in tutti i div che vuoi inserire nello script, metti una determinata classe (ad esempio class="collapse");

e al posto di scrivere

Codice PHP:

---

animatedcollapse.addDiv('nome_div', 'fade=1, height=100%');


---

prova con

Codice PHP:

---

$('.collapse').each(function(){
animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});


---

Ciao, non funziona ma probabilmente non ho capito io.

Io genero n div in questo modo.

Codice HTML:

---

<div id="apri_1"></div> - <div id="chiudi_1"></div>
<div id="my_div_1"></div>

<div id="apri_2"></div> - <div id="chiudi_2"></div>
<div id="my_div_2"></div>

---

ecc.

Dove nel div apri c'è il collegamento per attivare il div "my_div" e "chiudi" e per nascondere se stesso.

In questa situazione il codice che mi hai dato funzionerebbe ancora?

Facciamo le cose con ordine.

Se il codice per aprire/chiudere il div lo metti dentro al div stesso ti dai la zappa sui piedi perchè appena chiudi il div non avrai più tasto/link per riaprirlo in quanto scoparirà anch'esso.

E' chiaro quindi che il codice deve essere besterno al div ;)

Riguardo al codice, tu crei n div a cui assegni un id per identificarli uno ad uno.

Codice PHP:

---

<div id="div_1">...</div>
<div id="div_2">...</div>
<div id="div_3">...</div>
...
<div id="div_n">...</div>


---

Ora per poter subito identificare i div che saranno "animati" dallo script ti ho consigliato di impostare anche l'attributo class

Codice PHP:

---

<div id="div_1" class="collapse">...</div>
<div id="div_2" class="collapse">...</div>
<div id="div_3" class="collapse">...</div>
...
<div id="div_n" class="collapse">...</div>


---

Infine per attivare lo script hai bisogno di dichiare a quale div applicare lo script stesso, e lo fai con la riga

Codice PHP:

---

animatedcollapse.addDiv('nome_div', 'fade=1, height=100%');


---

e questa riga la dovresti ripetere per ogni div che vuoi animare

Codice PHP:

---

animatedcollapse.addDiv('div_1', 'fade=1, height=100%');
animatedcollapse.addDiv('div_2', 'fade=1, height=100%');
animatedcollapse.addDiv('div_3', 'fade=1, height=100%');
...
animatedcollapse.addDiv('div_n', 'fade=1, height=100%');


---

Tu chiedevi se c'era un modo per non riscrivere quest'ultima parte riga per riga ed assegnare ad un gruppo (l'attributo class impostato serve appunto per identificare appunto il gruppo) l'animazione.
Ti suggerivo quindi di usare il ciclo

Codice PHP:

---

$('div .collapse').each(function(){
animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});


---

Che non fa altro che identificare il gruppo e per ogni elemento di tipo div con classe collapse fa si che venga animato dallo script.

Ora ti è più chiaro?

Si sei stato molto chiaro, sono io che ho poca esperienza con javascript.

Seguendo le tue sitruzioni ho scritto questo:

Codice:

---

<script type='text/javascript'>

$('div .collapse').each(function(){
    animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});
 
animatedcollapse.ontoggle=function($, divobj, state)
{ //fires each time a DIV is expanded/contracted
  //$: Access to jQuery
  //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
  //state: "block" or "none", depending on state
}

animatedcollapse.init()
</script>

---

Poi ho scritto il collegamento (nel ciclo)

Codice HTML:

---

<a href="javascript:animatedcollapse.show('all_comment_$id_post')"> Mostra</a>

---

e infine il codice del div (nel ciclo)

Codice HTML:

---

<div class='collapse' id='all_comment_".$id_post."' style='display:none'></div>

---

Il problema è che in questo modo quando premo sul collegamento non succede niente

Puoi fornire un link per vedere cosa hai fatto?

In questo momento no, perchè sto lavorando prevalentemente in locale.
Comunque il codice è quello che ho scritto nel post precedente.

Da soli pezzi di codice, per di più generati dinamicamente, non si riesce a capire dove possa esse l'inghippo.

Posso suggerirti però una cosa: ho notato che nomini i div con delle valiabili PHP, ma nella sintassi utlizzata c'è il rischio che l'interprete php faccia un po' di confusione.

Al posto di scrivere

Codice PHP:

---

<a href="javascript:animatedcollapse.show('all_comment_$id_post')"> Mostra</a>


---

prova a scrivere

Codice PHP:

---

<a href="javascript:animatedcollapse.show('all_comment_{$id_post}')"> Mostra</a>


---

e così dove la variabile è praticamente attaccata ad altre parole.
In pratica l'underscore (_) che precede potrebbe far non riconoscere quello che viene come variabile e quindi non effettuare la sostituzione.
racchiudendo il nome variabile tra graffe, non fai altro che dire all'interprete php "guarda che questa è una variabile e ci devi mettere il suo valore".

Ti ripeto che così però si va a tentativi. Magari l'intoppo sta nell'ordine in cui metti le cose, nel fatto che quando richiami il codice JS la pagina non è completamente caricata e quindi non funziona, ...

Prova a mettere una pagina di test on line, se puoi.

Ciao ho pubblicato la pagina.
http://onlinefreegame.altervista.org/index.php

Allora

per prima cosa il codice JS deve essere eseguito quando la pagina è stata completamente caricata, altrimente tenta di associarlo ad elementi non ancora presenti nel documento, quindi cambia questo

Codice PHP:

---

<script type='text/javascript'>

$('div .collapse').each(function(){
animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});

animatedcollapse.ontoggle=function($, divobj, state)
{ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()
</script>


---

in questo

Codice PHP:

---

<script type='text/javascript'>
$('document').ready(function(){
$('div .collapse').each(function(){
animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});

animatedcollapse.ontoggle=function($, divobj, state)
{ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()
});
</script>


---

così dici di eseguire il codice solo quando il documento è stato completamente cricato e la pagina è pronta.

Poi mi sono accorto che la classe collapse l'hai usata e questo implica comportamenti non voluti, cambia quindi la classe collapse nei div nascosti e nel ciclo each (ad esempio rinominala in collapsed).

quindi avrai nell'head

Codice PHP:

---

<script type='text/javascript'>
$('document').ready(function(){
$('div .collapsed').each(function(){
animatedcollapse.addDiv($(this).attr('id'), 'fade=1, height=100%');
});

animatedcollapse.ontoggle=function($, divobj, state)
{ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()
});
</script>


---

e nel body

Codice PHP:

---

<div class="collapsed" href="...


---

Ciao ho ripulito la pagina da codice e classi inutili, poi ho copiato il codice javascript che mi hai dato e infine ho inserito nei div nascosti la nuova classe ma lo script sembra non funzionare.

Tra gli errori firefox scrive:

Errore: this.divholders[divid] is undefined
File sorgente: http://onlinefreegame.altervista.org...tedcollapse.js
Riga: 54

cambia

Codice PHP:

---

$('div .collapse').each(function(){


---

in

Codice PHP:

---

$('.collapse').each(function(){


---

Adesso funziona, credo che mi leggerò qualche guida su javascript.

Ciao e ancora grazie