parere sito

deborahdc

perchè non fai una miniguida per spiegare come lo hai fatto?
Sarebbe molto utile per tutto il forum Gt
(me compresa )

gh3

intedi solo sul controllo js attivo o meno?

ps. intanto ho sistemato il problema che dicevo sopra, ora sbatto la testa con i css e margin per mettere le etichette giuste sotto ogni box

deborahdc

Intendevo se puoi esattamente come è stato sviluppato quel sito.

all'interno della cartella lib mettere questo
all'interno della cartella src mettere questo ecc..

gh3

allora dato che mi è stato richiesto ecco un mini how-to per realizzare un sito stile ellequadro.

bene incominciando dicendo che sul web le animazioni oramai non sono più solo una prerogativa di flash, ma da qualche tempo a questa parte si possono ottenere degli ottimi effetti anche con ajax.

fatta questa premessa devo subito farvi scaricare qualcosa, eh si per realizzare un sito tipo ellequadro avremo bisogno di un paio di script di terze parti:

il primo verrà utilizzato in particolar modo per gli effetti , mentre il secondo per i contenuti.

Iniziamo!

Struttura base

[INDENT]E' ncessario esordire dicendo che java non è presente in tutti i browser (ad esempio gli spider di google non hanno java e non possono eseguirne il codice ) oppure non è attivo, con questo cose intendo dire?

Semplice che in primis è necessario realizzare il vostro sito senza js, e renderlo usabile e valido w3c, fatto questo potremo iniziare ad implementare tutto il resto.

Facciamo quindi un semplice esempio:

[HTML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

	<title>Ellequadro</title>

</head>
<body>
<div id="test">test</div>
</body>
</html>
[/HTML][/INDENT]

E' tempo di muoversi!
[INDENT]Fatto il nostro sito base, è giunto il momento di aggiungere gli effetti di prototype.

Per prima cosa scompattiamo l'archivio e andiamo a fare l'upload sul nostro spazio web delle cartelle src e lib.

Fatto questo dovremo editare il contenuto dell' <head></head> aggiungendo:

[HTML]
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>
[/HTML]

A questo punto creiamo la nostra funzione per l'effetto slide, sempre fra i tag <head>:

[HTML]
<script type="text/javascript">
function test()
{
if(document.getElmentyById('test').style == 'none')
Effect.SlideDown('test',{duration:1.5});
else Effect.SlideUp('test',{duration:0.5});
}
</script>
[/HTML]

Questa funzione cosa fa: valuta se l'ggetto con l'id test è visibile, se si effettua lo slideup nascondendolo, se no slidedown mostrandolo.

Ultima cosa da fare è aggiungere un link per il test nel body:

[HTML]
<a href="javascript:void(0);" onclick="test();">test</a>
[/HTML]

[/INDENT]

Per la continuazione, spero di aggiungerla appena ho un po' di tempo libero per scriverla, intanto smanettante un pò e se avete problemi chiedete

deborahdc

noo
Andiamo è perfetto stavo gia cominciando
ok provo. Se rimango a metà ti chiamo

Grazie infinite per la tua collaborazione
Deb

gh3

ma lo faccio apposta, almeno avete tempo per smanettare un po' e imparare ad usarlo bene, così poi potete farne di tutti i colori

deborahdc

neeeeee. Forum Gt informazioni chiare e limpide come un lago di primavera
E' per questo che tutta Italia si riunisce qui

Problemino:
Da prototype ho scaricato da qui http://www.prototypejs.org/download la versione Download the latest stable version—1.5.0 e da qui http://advajax.anakin.us/index-en.htm ho scaricato Download AdvancedAJAX 1.1.

Questi <script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>

dove li trovo?

gh3

hai ragione, mi son menato via :asd:

non è prototype che serve, ma scriptacolous: http://script.aculo.us/downloads

ps. mi modificheresti il riferimento nel post precedente, dato che non mi fa editare?

deborahdc

Eccomi
Allora siamo qui ma mi manca da sapere il file advanceaiax dove lo metto
e come mai adesso mi da errore (ho seguito tutti i procedimenti tuoi)
P.s lo sto guardando in locale lo devo mettere in remoto forse?:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>
<title>Ellequadro</title>
<script type="text/javascript">
function test()
{
if(document.getElmentyById('test').style == 'none')
Effect.SlideDown('test',{duration:1.5});
else Effect.SlideUp('test',{duration:0.5});
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="test();">test</a>
<div id="test">test</div>
</body>
</html>

gianlucamat

Le scritte non sono allineate sotto ai quadratini in homepage: succede solo a me??
Qua c'è lo screenshot:

P.S.: il fondo grigio è un'impostazione del mio browser

gh3

@deborahdc said:

Eccomi
Allora siamo qui ma mi manca da sapere il file advanceaiax dove lo metto
e come mai adesso mi da errore (ho seguito tutti i procedimenti tuoi)
P.s lo sto guardando in locale lo devo mettere in remoto forse?:

allora in locale deve andare, i problemi sono 3

nella fretta è getElementById e non getElmentById, manca una e
manca .style.display = none

e ultimo ma basilare, il link al test va sempre sopra all'oggetto, se no non funge.

@gianlucamat said:

Le scritte non sono allineate sotto ai quadratini in homepage: succede solo a me??
Qua c'è lo screenshot:

P.S.: il fondo grigio è un'impostazione del mio browser

che res usi?

gianlucamat

1024x768