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