content slider - ID automatico contenitore

[fuzzonce]

Ciao a tutti,

premetto che di programmazione so davvero poco, ma sto sviluppando delle pagine web, recuperando un po' di codici open in giro per la rete.

nello specifico ho trovato uno script che mi permette di inserire uno slider all'interno della pagina, pilotato da dei pulsanti. Lo slider mi consente di mandare in slide dei div con del contenuto al loro interno.

La mia necessità è quella di inserire più d'uno di questi slider all'interno della pagina.
E fino a qui tutto ok.
Il sistemino però mi obbliga a cambiare l'ID del div contenitore dello slider ad ogni istanza dello stesso.
Questo mi è scomodo perché dovroò aggiornare spesso la pagina, modificando anche il numero degli slider presenti, e questo tipo di procedura è ad alto rischio di errore.

esempio qui: http://www.fuzzonce.com/ipad/boxPlus2.htm

Io cos'ho fatto: ho definito una variabile numerica che incremento ad ogni istanza dello slider. Questa variabile poi la "unisco" (scusate il termine poco tecnico) alle variabili necessarie allo script e quindi all'ID del contenitore dello slider (e anche al contenitore dei controlli).

Ecco. Non funziona. Come vedete dall'esempio linkato, funziona solo l'ultimo slider, come se le funzioni che lo governano venissero attivate solo una volta finito di caricare la pagina, e quindi pescando solo l'ultimo valore della variabile numerica che via via è andata incrementandosi.

questo il codice presente nel body della pagina:

<script type="text/javascript">var numBoxPlus=1;</script>

<script type="text/javascript">
numBoxPlus = numBoxPlus + 1;
document.write("<div id='containerBoxPlus" + numBoxPlus + "' class='containerBoxPlus'>");
</script>

<script type="text/javascript">
numBoxPlus = numBoxPlus.toString();
window.addEvent('domready', function() {
//slider variables for making things easier below
var itemsHolder = $('containerBoxPlus' + numBoxPlus); var myItems = $$(itemsHolder.getElements('.itemBoxPlus'));
//controls for slider
var theControls = $('controlsBoxPlus' + numBoxPlus); var numNavHolder = $(theControls.getElement('ul')); var thePlayBtn = $(theControls.getElement('.play_btn')); var thePrevBtn = $(theControls.getElement('.BoxPrev')); var theNextBtn = $(theControls.getElement('.BoxNext'));
//create instance of the slider, and start it up
var mySlider = new SL_Slider({slideTimer: 200, orientation: 'vertical', fade: true, isPaused: true, container: itemsHolder, items: myItems, numNavActive: true, numNavHolder: numNavHolder, playBtn: thePlayBtn, prevBtn: thePrevBtn, nextBtn: theNextBtn}); mySlider.start(); });
</script>


<div class="itemBoxPlus BoxItemEmpty"></div>

<div class="itemBoxPlus BoxItemBlack">

Fusce aliquam blandit elit. Suspendisse lectus massa, ultricies sed, hendrerit in, tempor non, nunc.
</div>



<script type="text/javascript"> document.write("<div id='controlsBoxPlus" + numBoxPlus + "'>");</script>
<div class="BoxPrev">&lt;</div> <div class="BoxNext" style="background:none;">&gt;</div> <div class="BoxNum_nav"><ul>[/list]</div> </div>

</div>

Non riesco a venirne fuori...

ciao e grazie a tutti

[fuzzonce]

praticamente la riga

var itemsHolder = $('containerBoxPlus' + numBoxPlus); var myItems =...

dice al sistema di andare ad agire sul div che ha come ID "'containerBoxPlus' + numBoxPlus"
che DOVREBBE essere dato da una stringa unita alla mia variabile incrementata.

STessa procedura la utilizzo per scivere il tag html relativo al div contenitore

[Vindav]

invece di creare degli id dinamici ti basta accedere ad essi tramite la proprietà class:

$(".containerBoxPlus")

[fuzzonce]

eh si lo so, questo era lo script originale, ma dovendo inserire molte istanze di questo script all'interno della pagina e dovendolo fare spesso, tenendo conto che il numero delle istanze non rimarrebbe sempre lo stesso, mi è moooolto più comodo che l'ID sia dinamico, così lo script lo copoi/incollo cambiando solo il contenuto del div, senza preoccuparmi di rinominare -senza doppioni- tutti gli ID e, tra l'altro, in più punti all'inerno dello script...

[fuzzonce]

@Vindav

ah, scusa, adesso ho capito. Dici di non riferirmi agli ID ma alla class...

ho paura che però non funzioni -adesso cmq provo.

[fuzzonce]

No, così prorpio non funziona, neanche se nella pagina è presente una sola istanza dello script.
Evidentemente devo proprio riferirmi all'ID


Non so se può essere utile, ho dimenticato di dirlo, ma lo script è basato su mootools

[Vindav]

con mootools devi fare cosi: $$(".containerBoxPlus")

[fuzzonce]

nada. Come prima. Non funziona...

[Vindav]

grazie delle mille informazioni che mi dai per capire perche non funziona, cmq il problema quasi certamente sta da un altra parte... per esempio l'utilizzo del document.write è errato se vuoi modificare il dom della pagina utilizza i metodi che mette a disposizione mootools...

[fuzzonce]

scusa, non arrabbiarti, è che non so cosa dirti per farti capire meglio.
anzi, ti ringrazio per la pazienza

Ci provo.
facendo come mi hai detto tu lo slider non si attiva. Neppure il bottone di apertura si attiva, non comparendo neanche la manina del cursore, come invece avviene riferendosi all'ID.

Il mio problema non è far funzionare lo script quando questo è istanziato nella pagina un'unica volta, ma quando lo istanzio da due in su.

Mi dici del document.write... però a me sembra funzionare, ovvero leggendo la pagina dal browser con firebug vedo effettivamente il codice html che volevo venisse inserito.

Il problema forse quindi risiede nello script che gestisce lo slider (script che è esterno)?

http://fuzzonce.com/ipad/js/sl_slider.js