Newsgroup: it.comp.lang.javascript
Titolo: presentazione html+css+javascript

Buongiorno a tutti,
    stavo valutando di fare una presentazione per la mia tesi in html, css e javascript.
L' idea sarebbe quella di strutturarla a pagine numerate. Ciascuna pagina contiene diversi
paragrafi, e in basso a destra un link per avanzare con la presentazione. Premendo
il bottone viene visualizzato il paragrafo successivo, se la pagina è completa viene visualizzata
la pagina successiva.
Qualcosina di javascript e dom so... la mia domanda è: come faccio ad associare
un array di paragrafi tramite dom di modo da modificare la proprietà visibility
di ciascuno tramite contatore in javascript?
Lo saprei fare tramite l' attributo name:
<!-- intestazione -->
<div id="content">
    <p name="paragrafo">
        <!-- primo paragrafo -->
    </p>
    <p name="paragrafo">
        <!-- secondo paragrafo -->
    </p>
    <!-- eccetera -->
</div>
<!-- footer e link per avanzamento -->
due variabili globali (il contatore, inizializzato a zero e il numero di  paragrafi che forse si può evitare)
e il link che punta una funzione javascript che fa qualcosa del tipo:
function goToNext(url)
{
if(i<numparagrafi){ //oppure usare il metodo lenght dell' array: in questo modo
                               //la funzione sarebbe unica x tutte le pagine
    windows.document.content.paragrafo[i].style.visibility="visible"; //impostata inizialmente via css a hidden
    i++;
    }
else
    document.location.href=url;
}
non sono sicuro che sia la soluzione migliore. Suggerimenti?
Grazie in anticipo,
    SantaKlauss

 ha scritto nel messaggio
news:vEwNa.3896$79.6...@tornado.fastwebnet.it...

Con IE per conoscere il numero di paragrafi all'interno di un DIV potresti
utilizzare la collection 'children' (supponendo che nel div ci siano solo
parag.) e la proprietà 'length'. Per creare una soluzione unica potresti
passare questo numero come parametro della funzione ed assegnare un id
numerico ai paragrafi(id="1"...).
Tieni presente che se intendi visualizzare un paragrafo alla volta devi
sempre nascondere quello visualizzato precedentemente e gestirne il relativo
posizionamento.
Se ti interessa ecco il codice per IE:
<html >
<head>
<title>Documento senza titolo</title>
<script type="text/javascript">
var i=1;
function goToNext(url)
{
 if(i<document.all.content.children.length){
  document.all.content.children[i-1].style.visibility="hidden";
  document.all.content.children[i].style.visibility="visible";
    i++;
    }
 else
  document.location.href=url;
}
</script>
</head>
<body>
<div id="content">
    <p name="paragrafo"
style="visibility:visible;position:absolute;left:10px;top:10px;">
        Io sono il primo.
    </p>
    <p name="paragrafo"
style="visibility:hidden;position:absolute;left:10px;top:10px;">
        Io sono il secondo.
    </p>
</div>
<br/>
<input name="bot" type="button" onclick="goToNext(&quot;nuova.html&quot;)"
value="Avanti" />
</body>
</html>
Spero di esserti stato d'aiuto.
Giulio.

Giulio ha scritto:
| Con IE per conoscere il numero di paragrafi all'interno di un DIV potresti
| utilizzare la collection 'children' (supponendo che nel div ci siano solo
| parag.) e la proprietà 'length'. Per creare una soluzione unica potresti
| passare questo numero come parametro della funzione ed assegnare un id
| numerico ai paragrafi(id="1"...).
[..cut...]
Anzittutto grazie  per la risposta Giulio. Siccome la presentazione andrà
su un portatitile e non so ancora di quale browsers disponga, volevo trovare
una soluzione cross-browser. L' idea dell' id numerico non e' male ma si
perderebbe l' informazione sulla quantità di paragrafi.
Nel frattempo ho cercato un po' in rete e ho trovato un tutorial di dom su
www.brainjar.com
 che mi è stato molto utile.
L' idea forse è quella di usare qualcosa del tipo:
<div id="content">
    <p>Primo paragrafo</p>
    <p>Secondo paragrafo</p>
</div>
e accedere ai paragrafi tramite il dom:
* document.getElementById("content").childNodes.length
mi dà il numero di paragrafi contenuti nel div.
* document.getElementById("content").childNodes[i].style
accede allo stile del paragrafo i-esimo.
Credo possa andare così e dovrebbe essere cross-browser, qualcuno può confermarmelo?
Farò due prove nel pomeriggio.
Grazie ancora,
    SantaKlauss

 non sono sicuro che sia la soluzione migliore. Suggerimenti?
Dipende quanto sono grandi i paragrafi.. Io opterei per qualcos'altro, 
forse, cmq sia in (X)HTML / JS (dom w3c):
var currPindex=0,
	pTags=null;
function goToNext(szUrl){
	if (pTags){
		if (currPindex<pTags.length)
			pTags[++currPindex].style.visibility="visible";
		else
			window.location.href=szUrl;
	}
}
onload=function(){
pTags=document.getElementById("content").getElementsByTagName("P");
}
-- 
C'ya,
ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

Zero ha scritto:
| Probabilmente sarebbe preferibile usare "display" al posto di
| "visibility".. Ma se i paragrafi devono essere visualizzati in cascata
| (e non a sostituirsi) va bene cmq anche la prima opzione (solo che si
| vede eventualmente la scrollbar anche se non c'e').
Infatti.. l' idea era quella di farli vedere in cascata.
| Dipende quanto sono grandi i paragrafi.. Io opterei per qualcos'altro...
Si, infatti credo che farò anche un powerpoint. Si tratta di una presentazione
di 15-20 slides circa che dovrà durare, esponendola, circa dieci minuti.
Ci sarà qualche immagine e per ciascuna pagina credo quattro-cinque paragrafi
piccolini (massimo due-tre frasi ciascuno).
Prima della discussione volevo provare a farla anche in javascript e html giusto per
diletto e se viene un bel lavoro..  chissà che non usi la presentazione js se mi è consentito.
| cmq sia in (X)HTML / JS (dom w3c):
|
| var currPindex=0,
| pTags=null;
|
| function goToNext(szUrl){
| if (pTags){
| if (currPindex<pTags.length)
| pTags[++currPindex].style.visibility="visible";
| else
| window.location.href=szUrl;
| }
| }
|
| onload=function(){
| pTags=document.getElementById("content").getElementsByTagName("P");
| }
Una cosa: ma forse non si dovrebbe scrivere:
pTags[currPindex++].style.visibility="visible";
inizializzando currPindex a zero?
Grazie molte! lurko saltuariamente il ng e leggerti è sempre un piacere.
Saluti,
    SantaKlauss

 Grazie molte! lurko saltuariamente il ng e leggerti è sempre un piacere.
Grazie a te :)
