Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 26
  1. #1

    Menų a tendina dentro tabella

    Sto realizzando il sito per la mia scuola e ho trovato un bel menų a tendina facilemnte personalizzabile in javascript. L'unico problema che ho č che se lo inserisco dentro una cella di una tabella lo visualizza malissimo.

    Ecco la pagina in questione:
    http://sirfridrick.altervista.org/pr.../provahome.htm

    Il menų a tendina sarebbe quel coso blu che vedete nella cella allungata in basso a sinistra (spero che riusciate a vederlo perchč č irriconoscibile). Non so come mai ma non lo visualizza per intero.

    L'originale sarebbe questo

    Grazie ciao

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    i menų a tendina sono nel 90% dei casi costituiti da livelli in posizionamento assoluto, questo vuol dire che appaiono a coordinate fisse dal bordo superiore e sinistro del documento e non nel punto in cui sono ubicati nel codice.
    Per sovrapporsi ad una cella di tabella la posizione del menų dev' essere dipendente dalla posizione di un elemento normalmente inserito nella tabella,
    quindi il menų dev' essere generato invisibile o in posizione non visibile e successivamente reso visibile/spostato oppure generato una volta chiusa la tabella (prima non č possibile conoscere la posizione precisa dell' immagine)

    Il tuo menų, cosė com č, si presta solo a quest' ultimo caso
    se vuoi un esempio di come č stato sistemato un menų simile vedi qui,
    ciao

  3. #3
    Purtroppo di javascript ne capisco ancora troppo poco per fare quaste cose ma a fare questo menų ci devo assolutamente riuscire!

    Io sinceramente i livelli non so manco cosa siano quidni per me diventa difficile riuscire a spostarli. Comunque diciamo che guardando il codice che gentilmente mi hai segnalato ho visto che il posizionamento assoluto lo usa nei CSS. Se non sbaglio e adesso vi posto il codice direi che invece nel mio menų la posizione č definita all'interno del codice. Guardate (posto solo il pezzo che dovrebbe interessarci):

    if (nn)
    {
    document.writeln("<LAYER NAME=mtop. position=absolute left="+leftmargin+" top="+topmargin+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=visible onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')>Home</LAYER>");
    for (i=0;i<voci.length;i++)
    {
    var n=i;
    document.writeln("<LAYER NAME=mtop"+n+". position=absolute left="+leftmargin+" top="+eval(alto+topmargin+alto*i)+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=visible onMouseOver=MostraMenu("+i+");mroll('mtop"+i+".'); conta++ onMouseOut=last="+i+";unmroll('mtop"+i+".');conta--><A HREF=javascript:mroll('mtop"+i+".') CLASS=menuNNb>[I]"+voci[0]+" </A></LAYER>");
    for (l=1;l<voci[i].length;l++)
    document.writeln("<LAYER NAME=mdep"+i+"."+l+" position=absolute left="+eval(leftmargin+largo)+" top="+eval(topmargin+alto*i+alto*l)+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=hidden onMouseOver=mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta--><A HREF=javascript:mroll('mdep"+n+"."+l+"') onClick=vai('"+links[i][l]+"',"+i+","+l+") CLASS=menuNN>"+voci[i][l]+"</A></LAYER>");
    }
    }
    else
    {
    document.writeln("<DIV ID=mtop. STYLE=\"position:absolute;left:"+leftmargin+";top: "+topmargin+";width:"+largo+";height:"+alto+";back ground:"+roff+";visibility:visible;cursor:hand\" onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')>Home</DIV>");
    for (i=0;i<voci.length;i++)
    {
    var n=i;
    document.writeln("<DIV ID=mtop"+n+". STYLE=\"position:absolute;left:"+leftmargin+";top: "+eval(alto+topmargin+alto*i)+";width:"+largo+";he ight:"+alto+";background:"+roff+";visibility:visib le;cursor:hand\" onMouseOver=MostraMenu("+n+");mroll('mtop"+n+".'); conta++ onMouseOut=last="+n+";unmroll('mtop"+n+".');conta--><DIV CLASS=menuIEb>[I]"+voci[0]+"</DIV></DIV>");
    for (l=1;l<voci[i].length;l++)
    document.writeln("<DIV ID=mdep"+i+"."+l+" STYLE=\"position:absolute;left:"+eval(leftmargin+l argo)+";top:"+eval(topmargin+alto*i+alto*l)+";widt h:"+largo+";height:"+alto+";background:"+roff+";vi sibility:hidden;cursor:hand\" onMouseOver=;mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta-- CLASS=menuIE onClick=vai('"+links[i][l]+"',"+i+","+l+")>"+voci[i][l]+"</DIV>");
    }
    }


    Sto dicendo vaccate o ho ragione?
    In entrambi i casi vi sarei infinitamente grato se poteste darmi questo ulteriore aiuto.

    Grazie ciao

  4. #4
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    vaccate
    guarda da solo quante volte appare nel pezzo di codice da te postato position=absolute o position:absolute

    ti posto una possibile soluzione appena ho qualche minuto

  5. #5
    Originariamente inviato da Xinod
    vaccate
    guarda da solo quante volte appare nel pezzo di codice da te postato position=absolute o position:absolute

    ti posto una possibile soluzione appena ho qualche minuto
    Scusa ma non capisco, percč mi dici quante volte appare? ho scelto quel pezzo di codice proprio perchč appare tante volte! (un'altra vaccata ?)

    Aspetto impaziente la tua soluzione

    Grazie ciao

  6. #6
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    ti posto una pagina base, in neretto le modifiche,
    ho racchiuso il codice che scriveva il menų in una funzione da richiamare una volta chiusa la tabella
    codice:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script>
    
    var ron="#c00000"; // Colore al MouseOver
    var roff="#0066FF"; // Colore di default
    var largo=125; // Larghezza dei layers, quindi dei bottoni del menu
    var alto=40; // Altezza dei layers, quindi distanza (verticale) fra le voci del menu
    
    var voci=new Array();
    	voci[0]=new Array("JavaScript","StaffScripts","UserScripts","FlyScripts","P.O.J.","Newsgroup icly")
    	voci[1]=new Array("Documenti","F.A.Q & Answers","Tutorials","Lezioni","Risorse e Downloads","Biblioteca","Links");
    	voci[2]=new Array("About us","Staff","Collaboratori","Contatti","Credits");
    	voci[3]=new Array("Varie","Servizi Gratuiti","Sondaggi","Hanno detto di noi","Banner","Advertising","Questo menu...");
    
    var links=new Array();
    	links[0]=new Array("","#","#","#","#")
    	links[1]=new Array("","#","#","#","#","#","#")
    	links[2]=new Array("","#","#","#","#")
    	links[3]=new Array("","#","#","#","#","#","http://www.jsdir.com")
    
    var wst=new Array();
    	wst[0]=new Array("Risorse JavaScript nel sito","Gli script dello Staff di JsDir - Le schede ti insegnano anche a personalizzarli ed a capirne il funzionamento","Gli Script pubblicati dai nostri visitatori. Contribuisci anche tu alla raccolta, puoi farlo on-line inviando i tuoi lavori che saranno *immediatamente* visibili al nostro pubblico!","Una serie di Wizards per programmare on-line gli scripts per il tuo sito!","Chi l\'ha detto che JavaScript serve solo per far girare delle immagini o controllare i form? Scopri in questa pagina applicazioni inedite (ed insospettabili) di JavaScript","Finalmente un NG che da\' riposte serie a chi ha bisogno di aiuto!!! (-=Gigio 2K=-)");
    	wst[1]=new Array("Imparare JavaScript","Le Faq di JsDir - Sono piu\' di 400 ed aumentano in continuazione! In quale altro sito trovi tante FAQ?","I tutorials sono dei micro manuali che volta per volta affrontano argomenti di interesse generale","Le lezioni di JavaScript ed un corso introduttivo all\'HTML","Un grande archivio (quasi 35 MegaBytes) di documentazione su JavaScript - Dal sito di Netscape","Una panoramica di libri dedicati a JavaScript","Sono innumerevoli i siti presenti in rete dedicati a JavaScript. Questa raccolta, lungi dall\'essere esaustiva, comprende gia\' molti links, aiutaci nella raccolta segnalandoli allo staff");
    	wst[2]=new Array("Chi lavora a JsDir","Le persone che lavorano (giorno e notte!) a JsDir","Alcuni amici che saltuariamente (ma non tanto...) contribuiscono alla crescita di JsDir","Per scrivere al WebMaster ed agli altri autori del sito","Amici e siti che ci hanno aiutato nel setup del sito");
    	wst[3]=new Array("Altri link e servizi","I servizi gratuiti di JsDir, una valida alternativa offerta da JsDir ai WebMasters italiani","Vogliamo conoscere meglio il nostro pubblico. Vota in HomePage il sondaggio del mese, i risultati sono pubblici ed accessibili da questo link","Consentite anche a noi un po\' di autocelebrazione! In questa pagina raccogliamo le recensioni ed i pareri su qeusto sito","Vuoi scambiare un banner con JsDir?","Fra un po' sara' possibile fare promozione tramite JsDir","Il sito in cui &egrave; reperibile lo script di questo menu...");
    
    var nn=(document.layers)?true:false
    var conta=0,last=0; 
    
    function init(){
    var x,y
    
    if(nn){
    	x = document.layers['gancio_nn'].pageX
    	y = document.layers['gancio_nn'].pageY
    } 
    else{ 
    	x=0;y=0;var el,temp
    	el = (document.all)?document.all['gancio_ie']:document.getElementById('gancio_ie')
    	if(el.offsetParent){
    		temp = el
    		while(temp.offsetParent){
    			temp=temp.offsetParent; 
    			x+=temp.offsetLeft
    			y+=temp.offsetTop;
    		}
    	}
    	x+=el.offsetLeft
    	y+=el.offsetTop
     }
    
    leftmargin=x;
    topmargin=y;
    
    if (nn)
    	{
    	document.writeln("<LAYER NAME=mtop. position=absolute left="+leftmargin+" top="+topmargin+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=visible onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')>Home</LAYER>");
    	for (i=0;i<voci.length;i++)
    		{
    		var n=i;
    		document.writeln("<LAYER NAME=mtop"+n+". position=absolute left="+leftmargin+" top="+eval(alto+topmargin+alto*i)+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=visible onMouseOver=MostraMenu("+i+");mroll('mtop"+i+".');conta++ onMouseOut=last="+i+";unmroll('mtop"+i+".');conta--><A HREF=javascript:mroll('mtop"+i+".') CLASS=menuNNb>[I]"+voci[0]+" </A></LAYER>");
    		for (l=1;l<voci[i].length;l++)
    			document.writeln("<LAYER NAME=mdep"+i+"."+l+" position=absolute left="+eval(leftmargin+largo)+" top="+eval(topmargin+alto*i+alto*l)+" width="+largo+" height="+alto+" clip=0,0,"+largo+","+alto+" bgColor="+roff+" visibility=hidden onMouseOver=mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta--><A HREF=javascript:mroll('mdep"+n+"."+l+"') onClick=vai('"+links[i][l]+"',"+i+","+l+") CLASS=menuNN>"+voci[i][l]+"</A></LAYER>");
    		}
    	}
    	else
    	{
    	document.writeln("<DIV ID=mtop. STYLE=\"position:absolute;left:"+leftmargin+";top:"+topmargin+";width:"+largo+";height:"+alto+";background:"+roff+";visibility:visible;cursor:hand\" onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')>Home</DIV>");
    	for (i=0;i<voci.length;i++)
    		{
    		var n=i;
    		document.writeln("<DIV ID=mtop"+n+". STYLE=\"position:absolute;left:"+leftmargin+";top:"+eval(alto+topmargin+alto*i)+";width:"+largo+";height:"+alto+";background:"+roff+";visibility:visible;cursor:hand\" onMouseOver=MostraMenu("+n+");mroll('mtop"+n+".');conta++ onMouseOut=last="+n+";unmroll('mtop"+n+".');conta--><DIV CLASS=menuIEb>[I]"+voci[0]+"</DIV></DIV>");
    		for (l=1;l<voci[i].length;l++)
    			document.writeln("<DIV ID=mdep"+i+"."+l+" STYLE=\"position:absolute;left:"+eval(leftmargin+largo)+";top:"+eval(topmargin+alto*i+alto*l)+";width:"+largo+";height:"+alto+";background:"+roff+";visibility:hidden;cursor:hand\" onMouseOver=;mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta-- CLASS=menuIE onClick=vai('"+links[i][l]+"',"+i+","+l+")>"+voci[i][l]+"</DIV>");
    		}
    	}
    
    timer=setInterval("NascondiMenu()",1000)
    }
    
    function NascondiMenu()
    	{
    	if (conta==0)
    		{
    		coloratutti(true)
    		timer=setTimeout("coloratutti(false)",200);
    		timer=setTimeout("showdeps(last,false)",250);
    		}
    	}
    
    function coloratutti(col)
    	{
    	colore=col?ron:roff;
    	for (i=0;i<voci.length;i++)
    		for (j=1;j<voci[i].length;j++)
    			{
    		if (nn)
    			document.layers["mdep"+i+"."+j].bgColor=colore;
    		else
    			if(document.all)
    				document.all["mdep"+i+"."+j].style.background=colore;
    				else
    				document.getElementById('mdep'+i+"."+j).style.background=colore;
    			}
    	}
    
    function MostraMenu(n)
    	{
    	showdeps(last,false);
    	showdeps(n,true);
    	last=n;
    	}
    
    function showdeps(n,act)
    	{
    	if (conta==0)
    		{
    		act?stat="visible":stat="hidden";
    	if (nn)
    		for (i=1;i<voci[n].length;i++)
    			document.layers["mdep"+n+"."+i].visibility=stat;
    	else
    		for (i=1;i<voci[n].length;i++)
    			if(document.all)
    				document.all["mdep"+n+"."+i].style.visibility=stat;
    				else
    				document.getElementById('mdep'+n+"."+i).style.visibility=stat;
    		}
    	}
    
    
    function vai(dove,r,c)
    	{
    	lev=nn?document.layers["mdep"+r+"."+c]:(document.all)?document.all["mdep"+r+"."+c].style:document.getElementById("mdep"+r+"."+c).style;
    	if (nn)
    		{
    		lev.bgColor=roff;
    		timer=setTimeout("lev.bgColor=ron",50)
    		timer=setTimeout("lev.bgColor=roff",100)
    		timer=setTimeout("lev.bgColor=ron",150)
    		timer=setTimeout("lev.bgColor=roff",200)
    		timer=setTimeout("lev.bgColor=ron",250)
    		}
    		else
    		{
    		lev.background=roff;
    		timer=setTimeout("lev.background=ron",50)
    		timer=setTimeout("lev.background=roff",100)
    		timer=setTimeout("lev.background=ron",150)
    		timer=setTimeout("lev.background=roff",200)
    		timer=setTimeout("lev.background=ron",250)
    		}
    	timer=setTimeout("self.location.href='"+dove+"'",350)
    	}
    
    function mroll(l)
    	{
    	toplayer="mtop"+l.substring(4,l.indexOf(".")+1);
    	nn?document.layers[l].bgColor=ron:(document.all)?document.all[l].style.background=ron:document.getElementById(l).style.background=ron;
    	nn?document.layers[toplayer].bgColor=ron:(document.all)?document.all[toplayer].style.background=ron:document.getElementById(toplayer).style.background=ron;
    	document.getElementById?document.getElementById(l).style.cursor=document.all?'hand':'pointer':'void(0)';
    	if (l.substr(0,4)=="mdep")
    		stringa=wst[l.substr(4,l.indexOf(".")-4)][l.substring(l.indexOf(".")+1,l.length)];
    			else if (l.length>5)
    			stringa=wst[l.substr(4,l.indexOf(".")-4)][0];
    				else stringa="Home Page";		
    	window.status=stringa;
    	timer=setTimeout("window.status=stringa",20);
    	}
    
    function unmroll(l)
    	{
    	toplayer="mtop"+l.substring(4,l.indexOf(".")+1);
    	nn?document.layers[l].bgColor=roff:(document.all)?document.all[l].style.background=roff:document.getElementById(l).style.background=roff;
    	nn?document.layers[toplayer].bgColor=roff:(document.all)?document.all[toplayer].style.background=roff:document.getElementById(toplayer).style.background=roff;
    	window.status="";
    	}
    </script>
    <table border="1" width="500" cellspacing="5" cellpadding="3">
    <tr><td width="300"></td><td><ilayer name="gancio_nn"><div id="gancio_ie"></div></ilayer></td></tr></table>
    <script type="text/javascript">init()</script>
    </body>
    </html>
    prendi il codice premendo il tastino quote in basso a destra
    (altrimenti il forum potrebbe averlo strapazzato)
    ciao

  7. #7
    Ho riguardato pių volte il tuo codice e non capisco se sono io che ometto qualche cosa o no ma mi sembra che il codice non funziona.
    Nel file viene visualizzata la tabella con le due celle ma nella seconda (dove dovrebbe apparire il menu, giusto?) non appare niente.

    Coreggimi se ho sbagiato qualcosa, ciao

  8. #8
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    strano, ti ho postato l' html della prova che ho fatto
    ti segnala qualche errore?

  9. #9
    Non mi segnala nessun errore semplicemente non me lo visualizza.
    Eccolo QUI

    Ciao

  10. #10
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    ti ho consigliato di prendere il codice col tastino quote
    dimenticandomi che ci sono in mezzo i vbtag x formattare il testo in grassetto [ b ] [ /b ]
    se li rimuovi dovrebbe funzionare correttamente...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.