pix83
18-04-2007, 12:02
Come posso creare un "loading" sia per una pagina html che per un DIV???
C'è qualcuno pratico di Ajax che può darmi una mano??? :confused:
C'è qualcuno pratico di Ajax che può darmi una mano??? :confused:
View Full Version : [Java - Ajax] Create un loading di pagina
MEMon
19-04-2007, 13:58
Per loading esattamente cosa intendi?
Io ho visto usare questo termine in ambito flash, esattamente quando si cerca di far vedere qualcosa all'utente durante il caricamento di un'applicazione flash.
E' questo che intendi per caso?
Io ho visto usare questo termine in ambito flash, esattamente quando si cerca di far vedere qualcosa all'utente durante il caricamento di un'applicazione flash.
E' questo che intendi per caso?
pix83
23-04-2007, 16:06
Hai presente JavaScript e Ajax??? volevo creare un loading per quando mi venga caricata ho una pagina html o un DIV...
MEMon
23-04-2007, 16:22
Ho presente ajax e javascript, ma non mi è mai capitato di dover fare una cosa come quella che chiedi...
Comunque, il problema è che te crei il DIV con dei dati presenti in un database e ci metti un po' a recuperarli?
Fai quelche esempio...
Comunque, il problema è che te crei il DIV con dei dati presenti in un database e ci metti un po' a recuperarli?
Fai quelche esempio...
pix83
23-04-2007, 18:24
Peta peta, che ti faccio un esempio...
Per le immagini, come in questo sito:
www.ernestomeda.it (http://www.ernestomeda.it/index_html.asp)
Qui utilizza il loading sia per quando carica la pagina, sia per quando clicchi sulle varie immagini (quelle in basso che poi le ricarica nel riquadro).
Per il DIV intendo questi due casi:
www.pixel2life.com (http://www.pixel2life.com/)
Se clicchi sulle sezioni a sinistra nel menu, quando si apre il DIV sottostante da "please wait...".
altro esempio è questo...
www.dynamicdrive.com (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm)
Quando utilizzo i TAB, e passo da uno all'altro, che da l'immagine di caricamento mentre carica il contenuto.
Spero di essere stato chiaro :( ...
Se ci sono domande chiedi pure, volevo capire come crearli.
Per le immagini, come in questo sito:
www.ernestomeda.it (http://www.ernestomeda.it/index_html.asp)
Qui utilizza il loading sia per quando carica la pagina, sia per quando clicchi sulle varie immagini (quelle in basso che poi le ricarica nel riquadro).
Per il DIV intendo questi due casi:
www.pixel2life.com (http://www.pixel2life.com/)
Se clicchi sulle sezioni a sinistra nel menu, quando si apre il DIV sottostante da "please wait...".
altro esempio è questo...
www.dynamicdrive.com (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm)
Quando utilizzo i TAB, e passo da uno all'altro, che da l'immagine di caricamento mentre carica il contenuto.
Spero di essere stato chiaro :( ...
Se ci sono domande chiedi pure, volevo capire come crearli.
MEMon
23-04-2007, 20:55
Dei tre link vedo solo il please wait del secondo.
Comunque ho fatto un paio di prove, è una cosa del genere che ti interessa?
http://allejp.altervista.org/testPreload.html
Comunque ho fatto un paio di prove, è una cosa del genere che ti interessa?
http://allejp.altervista.org/testPreload.html
pix83
24-04-2007, 10:23
Si MEMon!!! così, che poi riesca a utilizzare anche nei Tab (ti lascio il link di un Tab che ho creato per rendere l'idea LINK (http://www.pix.netsons.org/tab/kikitab.html))...è possibile inserire anche immagini nel loading??? cioè a posto del "Please wait...".
pix83
24-04-2007, 12:14
Ma davvero in questo esempio non vedi l'immagine di loading???
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
viene fuori quando carica l'immagine degli animali...
Ho trovato un'altro esempio, questo:
http://www.ajaxlessons.com/demo/workshop2.html
Il fatto vorrei capire come si possono creare, per poi applicarli in vari siti...sempre se hai tempo, no problem!!!
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
viene fuori quando carica l'immagine degli animali...
Ho trovato un'altro esempio, questo:
http://www.ajaxlessons.com/demo/workshop2.html
Il fatto vorrei capire come si possono creare, per poi applicarli in vari siti...sempre se hai tempo, no problem!!!
MEMon
24-04-2007, 18:48
Certo allora, se te devi caricare una immagine molto "sostanziosa" puoi utilizzare l'evento onload lanciato da una immagine quando ha finito di caricarsi.
Ti ho fatto un piccolo esempio di caricamento di un'immagine con preload formato da una gif.
http://allejp.netsons.org/varie/preload_image.html
qui il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preload immagine</title>
<script type="text/javascript">
//Esegue tutto il procedimento per caricare un'immagine.
function loadImage(){
var cnt=document.getElementById("image_box");
cnt.innerHTML="";
//Crea l'immagine da caricare, MA NON L'AGGIUNGE SUBITO!
var image=new Image(); //Image è un OGGETTO immagine.
image.setAttribute("id","img");
image.src="http://allejp.netsons.org/varie/image/AdrianaLima.png?rand="+Math.round(Math.random()*1000);
image.onload=function(){imageLoaded(image);};
//Crea la gif di caricamento.
var loading=new Image();
loading.style.margin="255px 200px 255px 200px";
loading.src="http://allejp.netsons.org/varie/image/loading.gif";
//Crea un box per contenere l'immagine da visualizzare
//nel quale viene inserita prima la gif che mostra il
//caricamento.
var box=document.createElement("div");
box.setAttribute("id","box");
box.appendChild(loading);
//Il box viene aggiunto al contenitore principale
cnt.appendChild(box);
}
//Viene chiamata quando l'immagine è pronta, in questo caso
//viene eliminata la gif di caricamento, sostituita dall'immagine
//ormai pronta per essere mostrata.
function imageLoaded(img){
var box=document.getElementById("box");
box.innerHTML="";
box.appendChild(img);
}
</script>
</head>
<body>
<form>
<input type="button" value="load" onclick="loadImage();"/>
</form>
<div id="image_box">
</div>
</body>
</html>
Ti ho fatto un piccolo esempio di caricamento di un'immagine con preload formato da una gif.
http://allejp.netsons.org/varie/preload_image.html
qui il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preload immagine</title>
<script type="text/javascript">
//Esegue tutto il procedimento per caricare un'immagine.
function loadImage(){
var cnt=document.getElementById("image_box");
cnt.innerHTML="";
//Crea l'immagine da caricare, MA NON L'AGGIUNGE SUBITO!
var image=new Image(); //Image è un OGGETTO immagine.
image.setAttribute("id","img");
image.src="http://allejp.netsons.org/varie/image/AdrianaLima.png?rand="+Math.round(Math.random()*1000);
image.onload=function(){imageLoaded(image);};
//Crea la gif di caricamento.
var loading=new Image();
loading.style.margin="255px 200px 255px 200px";
loading.src="http://allejp.netsons.org/varie/image/loading.gif";
//Crea un box per contenere l'immagine da visualizzare
//nel quale viene inserita prima la gif che mostra il
//caricamento.
var box=document.createElement("div");
box.setAttribute("id","box");
box.appendChild(loading);
//Il box viene aggiunto al contenitore principale
cnt.appendChild(box);
}
//Viene chiamata quando l'immagine è pronta, in questo caso
//viene eliminata la gif di caricamento, sostituita dall'immagine
//ormai pronta per essere mostrata.
function imageLoaded(img){
var box=document.getElementById("box");
box.innerHTML="";
box.appendChild(img);
}
</script>
</head>
<body>
<form>
<input type="button" value="load" onclick="loadImage();"/>
</form>
<div id="image_box">
</div>
</body>
</html>
pix83
24-04-2007, 19:10
Si può anche applicare per file da includere???
MEMon
24-04-2007, 19:11
uhmmm file di che tipo? Comunque sinceramente non saprei... come gli aggiungi i file tu?
pix83
24-04-2007, 19:29
Ti faccio un esempio pratico:
Sto facendo questo sito per la mia contrada del paese. Anche se lo sto facendo come volontariato, lo voglio fare bene!!! ti do il link: http://www.pix.netsons.org/sg/.
A sinistra c'è un menu, se clicchi su "chi siamo" si aprirà un menu sottostante con le voci:
Dove trovarci
Quando trovarci
Un pò di storia
Le altre Contrade
Vorrei che quando clicco su una di queste voci mi carichi a destra il testo, e mentre lo carica mi dia il loading. Ho visto vari esempi in rete, ma non riesco a combinarci nulla. Spero di essermi spiegato.
Sto facendo questo sito per la mia contrada del paese. Anche se lo sto facendo come volontariato, lo voglio fare bene!!! ti do il link: http://www.pix.netsons.org/sg/.
A sinistra c'è un menu, se clicchi su "chi siamo" si aprirà un menu sottostante con le voci:
Dove trovarci
Quando trovarci
Un pò di storia
Le altre Contrade
Vorrei che quando clicco su una di queste voci mi carichi a destra il testo, e mentre lo carica mi dia il loading. Ho visto vari esempi in rete, ma non riesco a combinarci nulla. Spero di essermi spiegato.
MEMon
24-04-2007, 19:39
Innanzitutto complimenti, mi piace molto!
Vediamo, immagino tu non abbia intenzione di utilizzare i frame vero?
In tal caso userai o javascript, o ajax giusto?
Se utilizzi javascript, e metti tutto il testo già pronto, che aspetta solo di essere visualizzato, allora il caricamento sarà praticamente ISTANTANEO e non ti servirà nessun loading stanne certo.
Se usi ajax, e quindi il testo proviene da una sorgente esterna quale potrebbe essere un database, allora potrebbe esserci qualche millisecondo di attesa, in questo caso ti basterà visualizzare un'immagine che avverte del caricamento, come una gif animata, oppure una semplice scritta, e non appena ti arrivano le informazioni da aggiungere la togli e metti il testo.
Un po' come ho fatto io con le immagini insomma.
Te che intenzioni avevi?
Vediamo, immagino tu non abbia intenzione di utilizzare i frame vero?
In tal caso userai o javascript, o ajax giusto?
Se utilizzi javascript, e metti tutto il testo già pronto, che aspetta solo di essere visualizzato, allora il caricamento sarà praticamente ISTANTANEO e non ti servirà nessun loading stanne certo.
Se usi ajax, e quindi il testo proviene da una sorgente esterna quale potrebbe essere un database, allora potrebbe esserci qualche millisecondo di attesa, in questo caso ti basterà visualizzare un'immagine che avverte del caricamento, come una gif animata, oppure una semplice scritta, e non appena ti arrivano le informazioni da aggiungere la togli e metti il testo.
Un po' come ho fatto io con le immagini insomma.
Te che intenzioni avevi?
pix83
24-04-2007, 20:06
Grazie! sono fiero che ti piaccia! :)
Avevo in mente qualcosa di "bello da vedere". In rete ho visto molti esempi (ma haimè porca paletta non li ho salvati in preferiti!), del tipo:
Se clicco su "Dove trovarci", nel DIV contenente il testo a destra compariva l'immagine di loading, nel frattempo il DIV si adattava in lunghezza al testo e compariva il testo. Se poi cliccavo su "Quando trovarci" succedeva la stessa cosa, riadattando il DIV al testo nuovo. Dici che è troppo incasinato fare una cosa del genere???...
Ps. Ho la linea adsl che da i numeri, se non riesco a risponderti subito è perchè va e viene il segnale :muro:
Avevo in mente qualcosa di "bello da vedere". In rete ho visto molti esempi (ma haimè porca paletta non li ho salvati in preferiti!), del tipo:
Se clicco su "Dove trovarci", nel DIV contenente il testo a destra compariva l'immagine di loading, nel frattempo il DIV si adattava in lunghezza al testo e compariva il testo. Se poi cliccavo su "Quando trovarci" succedeva la stessa cosa, riadattando il DIV al testo nuovo. Dici che è troppo incasinato fare una cosa del genere???...
Ps. Ho la linea adsl che da i numeri, se non riesco a risponderti subito è perchè va e viene il segnale :muro:
MEMon
24-04-2007, 21:32
No non è troppo complesso, ma sei sicuro fosse html e css e noin flash?
pix83
26-04-2007, 09:09
Ti giuro MEMon, era in Ajax, caxxo, è che non trovo più il link :(
In mattinata se ho poco lavoro ti posto un'esempio...
In mattinata se ho poco lavoro ti posto un'esempio...
MEMon
26-04-2007, 10:35
Bhe ok, in ajax allora puoi fare come ti ho detto, in pratica quando fai la chiamata(prima che ti arrivano i dati) fai vedere una cosa, e quando ti arrivano ci metti i dati.
pix83
26-04-2007, 18:32
Ho fatto un nuovo esempio di Tab Menu...qui carica delle foto un po pesanti, quindi si può applicare anche su questo: TAB (http://www.pix.netsons.org/tab/)???
MEMon
26-04-2007, 18:34
certo
pix83
27-04-2007, 16:15
L'ultimo esempio che hai fatto per caricare l'immagine devo cliccare il pulsante, per far si che mi esca il loading senza cliccare nulla??? cioè che appaia subito e poi visualizzi l'immagine. La devo applicare all'ultimo esempio TAB che ho fatto.
P.s.:
Sbaglio o ti piace Adriana Lima :D ???
P.s.:
Sbaglio o ti piace Adriana Lima :D ???
MEMon
27-04-2007, 16:22
La funziona che parte quendo clicco il pulsante nel mio esempio mettila che parte quando cliccki i tab nel tuo :D
ps.gran bella ragazza o no? :D
ps.gran bella ragazza o no? :D
MEMon
27-04-2007, 16:43
Prova questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link type="text/css" media="all" href="tabtastic.css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Tabtastic</title>
<style type="text/css">
.tabset_tabs { margin:0; padding:0; list-style-type:none; position:relative; z-index:2; white-space:nowrap }
.tabset_tabs li { margin:0; padding:0; display:inline }
.tabset_tabs a { color:#339 ! important; background-color:#def ! important; border:1px solid #99c; text-decoration:none; padding:0 0.6em; border-left-width:0; border-bottom:none }
.tabset_tabs a:hover { color:#00c ! important; background-color:#eff ! important }
.tabset_tabs a.active { color:black ! important; background-color:white ! important; border-color:black; border-left-width:1px; cursor:default; border-bottom:white; padding-top:1px; padding-bottom:1px }
.tabset_tabs li.firstchild a { border-left-width:1px }
.tabset_content { border:1px solid black; background-color:white; position:relative; z-index:1; padding:0.5em 1em; display:none }
.tabset_label { display:none }
.tabset_content_active { display:block }
@media aural{
.tabset_content,
.tabset_label { display:block }
}
/* These styles are for the documentation only */
body { font-family:'Trebuchet MS',serif; background-color:#eee }
#ver { color:#999; font-size:70%; padding-left:2em }
p { margin:0.7em 0 }
code { white-space:nowrap }
pre code { white-space:pre }
.tabset_content a:link,
.tabset_content a:visited { background-color:white }
.tabset_content a:link { color:#039 }
.tabset_content a:visited { text-decoration:none; color:#026 }
.tabset_content a:hover { background-color:#ffc }
body { margin:0 }
h1,h2,h3,h4 { font-family:Verdana,sans-serif; border-bottom:1px solid black; margin:0; margin-bottom:0.5em }
a:link,a:visited { background-color:#ff9; color:black }
a:visited { background-color:#ffd; color:#333 }
a:hover,a:active { background-color:#ff3 }
a[target=external] { border:1px dotted #cc3 }
p { margin-top:0; margin-bottom:1.2em }
h1 { font-size:120%; padding:0.2em 0.5em; background-color:#666; color:#ccc }
h1 code { color:#ccc }
h2,h3,h4 { font-size:110%; border-bottom-color:#999; margin-top:2em }
h3,h4 { font-size:100%; color:#333 }
#pagecontent { margin:2em }
ul { margin-top:0 }
li { margin-bottom:0.6em }
p.overview { font-size:larger; font-style:italic }
.contentfollows { margin-bottom:0 }
.contentbefore { margin-top:0 }
code { font-size:100%; font-family:Courier,'Courier New',monospace; color:#060 }
h2 code { font-size:110% }
pre code { font-size:100% }
pre { margin:0 0 1em 2em }
code .keyword { color:#00c }
code .paren { color:#900; font-weight:bold }
code .number { color:black }
code .string,
code .string .keyword,
code .string .paren,
code .string .string,
code .string .number { color:#949; font-weight:normal }
code .comment,
code .comment .keyword,
code .comment .paren,
code .comment .string,
code .comment .number { color:#999; font-weight:normal }
code.block { display:block; white-space:pre; margin:1em }
p.byline { font-size:80%; padding:0.2em 0; margin:1em 2.4em; font-style:italic; border-top:1px solid #ccc; color:#666 }
.ancillary { color:#666; font-size:90%; font-style:italic }
button { display:inline }
#overview { font-style:italic }
</style>
<script type="text/javascript">
//*** This code is copyright 2002-2003 by Gavin Kistner and Refinery; www.refinery.com
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
//***Adds a new class to an object, preserving existing classes
function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName);
}
//***Removes a particular class from an object, preserving other existing classes.
function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),''));
}
//***Returns true if the object has the class assigned, false otherwise.
function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) }
//*** This code is copyright 2003 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted
//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
//The following are for browsers like NS4 or IE5Mac which don't support either
//attachEvent or addEventListener
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
//*** This code is copyright 2002-2003 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
// Add a new stylesheet to the document;
// url [optional] A url to an external stylesheet to use
// idx [optional] The index in document.styleSheets to insert the new sheet before
function AddStyleSheet(url,idx){
var css,before=null,head=document.getElementsByTagName("head")[0];
if (document.createElement){
if (url){
css = document.createElement('link');
css.rel = 'stylesheet';
css.href = url;
} else css = document.createElement('style');
css.media = 'all';
css.type = 'text/css';
if (idx>=0){
for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){
var el = head.childNodes[i];
if (!el.tagName) continue;
var tagName = el.tagName.toLowerCase();
if (ct==idx){
before = el;
break;
}
if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++;
}
}
head.insertBefore(css,before);
return document.styleSheets[before?idx:document.styleSheets.length-1];
} else return alert("I can't create a new stylesheet for you. Sorry.");
}
// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet();
// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0);
// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css');
// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0);
// Cross-browser method for inserting a new rule into an existing stylesheet.
// ss - The stylesheet to stick the new rule in
// selector - The string value to use for the rule selector
// styles - The string styles to use with the rule
function AddRule(ss,selector,styles){
if (!ss) return false;
if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length);
if (ss.addRule){
ss.addRule(selector,styles);
return true;
}
return false;
}
// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' );
// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' );
//*** This library is copyright 2004 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code mostly satisfies the conditions.)
//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
//*** Version 1.0 20040430 Initial release.
//*** 1.0.2 20040501 IE5Mac, IE6Win compat.
//*** 1.0.3 20040501 Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
//*** 1.0.4 20040521 Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :)
AttachEvent(window,'load',function(){
var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content';
function FindEl(tagName,evt){
if (!evt && window.event) evt=event;
if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0);
var el=evt.currentTarget || evt.srcElement;
while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
return el;
}
function SetTabActive(tab){
if (tab.tabTOC.activeTab){
if (tab.tabTOC.activeTab==tab) return;
KillClass(tab.tabTOC.activeTab,'active');
if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
}
AddClass(tab.tabTOC.activeTab=tab,'active');
if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');
//if (tab.tabContent) tab.tabContent.style.display='block';
if (tab.prevTab) AddClass(tab.prevTab,'preActive');
if (tab.nextTab) AddClass(tab.nextTab,'postActive');
}
function SetTabFromAnchor(evt){
//setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
SetTabActive(FindEl('a',evt).semanticTab);
}
function Init(){
window.everyTabThereIsById = {};
var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
var activeTabs = [];
var tocs = document.getElementsByTagName(tocTag);
for (var i=0,len=tocs.length;i<len;i++){
var toc = tocs[i];
if (!HasClass(toc,tocClass)) continue;
var lastTab;
var tabs = toc.getElementsByTagName(tabTag);
for (var j=0,len2=tabs.length;j<len2;j++){
var tab = tabs[j];
if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
if (lastTab){
tab.prevTab=lastTab;
lastTab.nextTab=tab;
}
tab.tabTOC=toc;
everyTabThereIsById[tab.tabID=match[1]]=tab;
tab.tabContent = document.getElementById(tab.tabID);
if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;
lastTab=tab;
}
AddClass(toc.getElementsByTagName('li')[0],'firstchild');
}
for (var i=0,len=activeTabs.length;i<len;i++){
SetTabActive(activeTabs[i]);
}
for (var i=0,len=document.links.length;i<len;i++){
var a = document.links[i];
if (!(match=anchorMatch.exec(a.href))) continue;
if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
}
if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);
//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
AddStyleSheet('tabtastic.css',0);
}
Init();
},false);
function loadImage(n){
var cnt=null;
var image=new Image(); //Image è un OGGETTO immagine.
image.setAttribute("width","238");
image.setAttribute("height","340");
if(n==0){
image.setAttribute("id","img_1");
image.src="http://212.239.39.34/newsmem/corsport/prima/prima.jpg?rand="+Math.round(Math.random()*1000);
cnt=document.getElementById("box_1");
}
else{
image.setAttribute("id","img_2");
image.src="http://212.239.39.34/newsmem/tuttosport/prima/prima.jpg?rand="+Math.round(Math.random()*1000);
cnt=document.getElementById("box_2");
}
cnt.innerHTML="";
image.setAttribute("onload","imageLoaded(this);");
var loading=new Image();
loading.style.margin="255px 200px 255px 200px";
loading.src="http://allejp.netsons.org/varie/image/loading.gif";
cnt.appendChild(loading);
}
function imageLoaded(img){
var boxId="box_"+img.id.split("_")[1];
var box=document.getElementById(boxId);
box.innerHTML="";
box.appendChild(img);
}
</script>
</head>
<body>
<div id="pagecontent">
<h2 class="tabset_label">Table of Contents</h2>
<ul class="tabset_tabs">
<li class="firstchild"><a href="#overview" class="preActive active" onclick="loadImage(0);">Overview</a></li><li><a class="preActive postActive" href="#requirements" onclick="loadImage(1);">Requirements</a></li><li><a class="preActive" href="#stepbystep" onclick="loadImage(2);">Step By Step</a></li>
</ul>
<div id="overview" class="tabset_content tabset_content_active">
<h2 class="tabset_label">PROVA IMG 1</h2>
<p id="box_1"></p>
</div>
<div id="requirements" class="tabset_content">
<h2 class="tabset_label">PROVA IMG 2</h2>
<p id="box_2"></p>
</div>
<div id="stepbystep" class="tabset_content">
<h2 class="tabset_label">TESTO</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
</p>
</div>
</div>
</body>
</html>
Va con firefox, con ie no non ci ho perso tempo per renderlo compatibile con tutti i browser come puoi immaginare :D
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link type="text/css" media="all" href="tabtastic.css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Tabtastic</title>
<style type="text/css">
.tabset_tabs { margin:0; padding:0; list-style-type:none; position:relative; z-index:2; white-space:nowrap }
.tabset_tabs li { margin:0; padding:0; display:inline }
.tabset_tabs a { color:#339 ! important; background-color:#def ! important; border:1px solid #99c; text-decoration:none; padding:0 0.6em; border-left-width:0; border-bottom:none }
.tabset_tabs a:hover { color:#00c ! important; background-color:#eff ! important }
.tabset_tabs a.active { color:black ! important; background-color:white ! important; border-color:black; border-left-width:1px; cursor:default; border-bottom:white; padding-top:1px; padding-bottom:1px }
.tabset_tabs li.firstchild a { border-left-width:1px }
.tabset_content { border:1px solid black; background-color:white; position:relative; z-index:1; padding:0.5em 1em; display:none }
.tabset_label { display:none }
.tabset_content_active { display:block }
@media aural{
.tabset_content,
.tabset_label { display:block }
}
/* These styles are for the documentation only */
body { font-family:'Trebuchet MS',serif; background-color:#eee }
#ver { color:#999; font-size:70%; padding-left:2em }
p { margin:0.7em 0 }
code { white-space:nowrap }
pre code { white-space:pre }
.tabset_content a:link,
.tabset_content a:visited { background-color:white }
.tabset_content a:link { color:#039 }
.tabset_content a:visited { text-decoration:none; color:#026 }
.tabset_content a:hover { background-color:#ffc }
body { margin:0 }
h1,h2,h3,h4 { font-family:Verdana,sans-serif; border-bottom:1px solid black; margin:0; margin-bottom:0.5em }
a:link,a:visited { background-color:#ff9; color:black }
a:visited { background-color:#ffd; color:#333 }
a:hover,a:active { background-color:#ff3 }
a[target=external] { border:1px dotted #cc3 }
p { margin-top:0; margin-bottom:1.2em }
h1 { font-size:120%; padding:0.2em 0.5em; background-color:#666; color:#ccc }
h1 code { color:#ccc }
h2,h3,h4 { font-size:110%; border-bottom-color:#999; margin-top:2em }
h3,h4 { font-size:100%; color:#333 }
#pagecontent { margin:2em }
ul { margin-top:0 }
li { margin-bottom:0.6em }
p.overview { font-size:larger; font-style:italic }
.contentfollows { margin-bottom:0 }
.contentbefore { margin-top:0 }
code { font-size:100%; font-family:Courier,'Courier New',monospace; color:#060 }
h2 code { font-size:110% }
pre code { font-size:100% }
pre { margin:0 0 1em 2em }
code .keyword { color:#00c }
code .paren { color:#900; font-weight:bold }
code .number { color:black }
code .string,
code .string .keyword,
code .string .paren,
code .string .string,
code .string .number { color:#949; font-weight:normal }
code .comment,
code .comment .keyword,
code .comment .paren,
code .comment .string,
code .comment .number { color:#999; font-weight:normal }
code.block { display:block; white-space:pre; margin:1em }
p.byline { font-size:80%; padding:0.2em 0; margin:1em 2.4em; font-style:italic; border-top:1px solid #ccc; color:#666 }
.ancillary { color:#666; font-size:90%; font-style:italic }
button { display:inline }
#overview { font-style:italic }
</style>
<script type="text/javascript">
//*** This code is copyright 2002-2003 by Gavin Kistner and Refinery; www.refinery.com
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
//***Adds a new class to an object, preserving existing classes
function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName);
}
//***Removes a particular class from an object, preserving other existing classes.
function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),''));
}
//***Returns true if the object has the class assigned, false otherwise.
function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) }
//*** This code is copyright 2003 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted
//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
//The following are for browsers like NS4 or IE5Mac which don't support either
//attachEvent or addEventListener
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts[i]();
}
//*** This code is copyright 2002-2003 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)
// Add a new stylesheet to the document;
// url [optional] A url to an external stylesheet to use
// idx [optional] The index in document.styleSheets to insert the new sheet before
function AddStyleSheet(url,idx){
var css,before=null,head=document.getElementsByTagName("head")[0];
if (document.createElement){
if (url){
css = document.createElement('link');
css.rel = 'stylesheet';
css.href = url;
} else css = document.createElement('style');
css.media = 'all';
css.type = 'text/css';
if (idx>=0){
for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){
var el = head.childNodes[i];
if (!el.tagName) continue;
var tagName = el.tagName.toLowerCase();
if (ct==idx){
before = el;
break;
}
if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++;
}
}
head.insertBefore(css,before);
return document.styleSheets[before?idx:document.styleSheets.length-1];
} else return alert("I can't create a new stylesheet for you. Sorry.");
}
// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet();
// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0);
// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css');
// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0);
// Cross-browser method for inserting a new rule into an existing stylesheet.
// ss - The stylesheet to stick the new rule in
// selector - The string value to use for the rule selector
// styles - The string styles to use with the rule
function AddRule(ss,selector,styles){
if (!ss) return false;
if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length);
if (ss.addRule){
ss.addRule(selector,styles);
return true;
}
return false;
}
// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' );
// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' );
//*** This library is copyright 2004 by Gavin Kistner, [email protected]
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code mostly satisfies the conditions.)
//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
//*** Version 1.0 20040430 Initial release.
//*** 1.0.2 20040501 IE5Mac, IE6Win compat.
//*** 1.0.3 20040501 Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
//*** 1.0.4 20040521 Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :)
AttachEvent(window,'load',function(){
var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content';
function FindEl(tagName,evt){
if (!evt && window.event) evt=event;
if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0);
var el=evt.currentTarget || evt.srcElement;
while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
return el;
}
function SetTabActive(tab){
if (tab.tabTOC.activeTab){
if (tab.tabTOC.activeTab==tab) return;
KillClass(tab.tabTOC.activeTab,'active');
if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
}
AddClass(tab.tabTOC.activeTab=tab,'active');
if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');
//if (tab.tabContent) tab.tabContent.style.display='block';
if (tab.prevTab) AddClass(tab.prevTab,'preActive');
if (tab.nextTab) AddClass(tab.nextTab,'postActive');
}
function SetTabFromAnchor(evt){
//setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
SetTabActive(FindEl('a',evt).semanticTab);
}
function Init(){
window.everyTabThereIsById = {};
var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
var activeTabs = [];
var tocs = document.getElementsByTagName(tocTag);
for (var i=0,len=tocs.length;i<len;i++){
var toc = tocs[i];
if (!HasClass(toc,tocClass)) continue;
var lastTab;
var tabs = toc.getElementsByTagName(tabTag);
for (var j=0,len2=tabs.length;j<len2;j++){
var tab = tabs[j];
if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
if (lastTab){
tab.prevTab=lastTab;
lastTab.nextTab=tab;
}
tab.tabTOC=toc;
everyTabThereIsById[tab.tabID=match[1]]=tab;
tab.tabContent = document.getElementById(tab.tabID);
if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;
lastTab=tab;
}
AddClass(toc.getElementsByTagName('li')[0],'firstchild');
}
for (var i=0,len=activeTabs.length;i<len;i++){
SetTabActive(activeTabs[i]);
}
for (var i=0,len=document.links.length;i<len;i++){
var a = document.links[i];
if (!(match=anchorMatch.exec(a.href))) continue;
if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
}
if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);
//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
AddStyleSheet('tabtastic.css',0);
}
Init();
},false);
function loadImage(n){
var cnt=null;
var image=new Image(); //Image è un OGGETTO immagine.
image.setAttribute("width","238");
image.setAttribute("height","340");
if(n==0){
image.setAttribute("id","img_1");
image.src="http://212.239.39.34/newsmem/corsport/prima/prima.jpg?rand="+Math.round(Math.random()*1000);
cnt=document.getElementById("box_1");
}
else{
image.setAttribute("id","img_2");
image.src="http://212.239.39.34/newsmem/tuttosport/prima/prima.jpg?rand="+Math.round(Math.random()*1000);
cnt=document.getElementById("box_2");
}
cnt.innerHTML="";
image.setAttribute("onload","imageLoaded(this);");
var loading=new Image();
loading.style.margin="255px 200px 255px 200px";
loading.src="http://allejp.netsons.org/varie/image/loading.gif";
cnt.appendChild(loading);
}
function imageLoaded(img){
var boxId="box_"+img.id.split("_")[1];
var box=document.getElementById(boxId);
box.innerHTML="";
box.appendChild(img);
}
</script>
</head>
<body>
<div id="pagecontent">
<h2 class="tabset_label">Table of Contents</h2>
<ul class="tabset_tabs">
<li class="firstchild"><a href="#overview" class="preActive active" onclick="loadImage(0);">Overview</a></li><li><a class="preActive postActive" href="#requirements" onclick="loadImage(1);">Requirements</a></li><li><a class="preActive" href="#stepbystep" onclick="loadImage(2);">Step By Step</a></li>
</ul>
<div id="overview" class="tabset_content tabset_content_active">
<h2 class="tabset_label">PROVA IMG 1</h2>
<p id="box_1"></p>
</div>
<div id="requirements" class="tabset_content">
<h2 class="tabset_label">PROVA IMG 2</h2>
<p id="box_2"></p>
</div>
<div id="stepbystep" class="tabset_content">
<h2 class="tabset_label">TESTO</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et est quis risus ornare interdum. Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci porta dictum
</p>
</div>
</div>
</body>
</html>
Va con firefox, con ie no non ci ho perso tempo per renderlo compatibile con tutti i browser come puoi immaginare :D
pix83
30-04-2007, 18:10
Grazie MEMon!!! anche perchè ti sbatti molto a farmi esempi pratici...curiosità, tu usi il framework MOOTOOLS???
MEMon
30-04-2007, 18:27
Prego, no uso dreamweaver
pix83
30-04-2007, 18:29
no nulla, chiedevo se usavi la libreria java MOOTOOLS, nulla nulla
MEMon
30-04-2007, 18:31
ah no, non conosco nemmeno, ma una libreria java per javascript?
pix83
30-04-2007, 22:13
prova a guardare qui... è davvero stupenda:
http://mootools.net/
http://mootools.net/
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.