gestire menu e grafica

[ravint]

Ciao a tutti

e da un po che mi guardo in giro ma non riesco a risolvere il problema....

attualmente ho un menu presente in motissime pagine gestito con 2 file

menu.js
array.js

menu gestisce il codice mentre array racchiude tutti i link, tutto ok fin qui ma il problema è che è solo compatibile con IE e firefox.... con gli altri il sito non si vede....

La soluzione è quindi cercare un altro script che sia compatibile con gli altri browser gestendo i link in con 2 file

Molti script gestiscono i link in ogno pagina e non in un unico file...... :rollo:

qualcuno conosce uno script del genere????

grazie

[artorius]

mmm, ma se non spieghi che fa 'sto script, io come faccio a darti una mano?

[ravint]

ah ok,

ti posso dare un link a caso dove troverai la barra del menu:

http://www.portofinodive.com/html/chisiamo.html

i file che gestiscono i menu sono i seguenti:

menu.js

  if (perCentOver != null) {
	childOverlap = (perCentOver/100) * menuWidth
}
mSecsVis = secondsVisible*1000;

semi = ";";
styleStr = "<STYLE TYPE='text/css'>"
styleStr += ".items {"
styleStr += "width:" + menuWidth + semi
styleStr += "color:"+ fntCol + semi
styleStr += "font-size:"+ fntSiz + semi
styleStr += "font-weight:"+ fntWgh + semi
styleStr += "font-style:"+ fntSty + semi
styleStr += "font-family:"+ fntFam + semi
styleStr += "border-width:" + borWid + semi
styleStr += "border-color:" + borCol + semi
styleStr += "border-style:" + borSty + semi
styleStr += "line-height:" + linHgt + semi
styleStr += "}"
styleStr += "</STYLE>";
 
document.write(styleStr);

imgStr = "[img] + imgSrc + [/img]"

topCount = 1;
areCreated = false;
isOverMenu = false;
currentMenu = null;
allTimer = null;

function menuSetup(hasParent,lastItem,openCont,openItem) {

	this.menuOver = menuOver;
	this.menuOut = menuOut;

	this.onmouseover = this.menuOver;
	this.onmouseout = this.menuOut;

	this.showIt = showIt;
	this.keepInWindow = keepInWindow;

	this.hideTree = hideTree
	this.hideParents = hideParents;
	this.hideChildren = hideChildren;
	this.hideTop = hideTop;
	
	this.hasChildVisible = false;
	this.isOn = false;
	
	this.hideTimer = null;

	if (hasParent) {
		this.hasParent = true;
		this.parentMenu = openCont;
		this.parentItem = openItem;
		this.parentItem.child = this;
	}
	else {
		this.hasParent = false;
		this.hideSelf = hideSelf;
	}

	if (NS4) {
		this.fullHeight = lastItem.top + lastItem.document.height;
		this.clip.bottom = this.fullHeight;
	}
	else {
	    this.fullHeight = lastItem.style.pixelTop + lastItem.offsetHeight;
		this.showIt(false);
		this.onselectstart = cancelSelect;
		this.moveTo = moveTo;
		this.moveTo(0,0);
	}
}

function itemSetup(arrayPointer,whichArray) {

	this.itemOver = itemOver;
	this.itemOut = itemOut;
	this.onmouseover = this.itemOver;
	this.onmouseout = this.itemOut;

	this.dispText = whichArray[arrayPointer];
	this.linkText = whichArray[arrayPointer + 1];
	this.hasMore = whichArray[arrayPointer + 2];

	if (this.linkText.length > 0) {
		this.linkIt = linkIt;
		if (NS4) {
			this.onfocus = this.linkIt;
		}
		else {
			this.onclick = this.linkIt;
			this.style.cursor = "hand";
		}
	}
      
	if (this.hasMore) {
		htmStr = imgStr + this.dispText;
	}
	else {
		htmStr = this.dispText;
	}

	if (NS4) {
		layStr = "<SPAN CLASS=items>" + htmStr+ "</SPAN>";
		this.document.write(layStr);
		this.document.close();

		this.bgColor = backCol;
		this.clip.right = menuWidth;
		this.visibility = "inherit";
		this.container = this.parentLayer;

		if (arrayPointer == 0) {
			this.top = 0;
		}
		else {
			this.top = this.prevItem.top + this.prevItem.document.height - borWid;
		}
		this.left = 0;
	}
	else {
		this.className = "items";
		this.style.padding = 3;
		this.innerHTML = htmStr;

		this.style.backgroundColor = backCol; 
		this.container = this.offsetParent;

		if (arrayPointer == 0) {
			this.style.pixelTop = 0;
		}
		else {
			this.style.pixelTop = this.prevItem.style.pixelTop + this.prevItem.offsetHeight - borWid;
		}
		this.style.pixelLeft = 0;
	}
}

function makeElement(whichEl,whichContainer) {
	if (arguments.length==1)
		whichContainer = (NS4) ? window : document.body;

	if (NS4) {
		eval(whichEl + "= new Layer(menuWidth,whichContainer)");
	}
	else {
		elStr = "<DIV ID=" + whichEl + " STYLE='position:absolute'></DIV>";
		whichContainer.insertAdjacentHTML("BeforeEnd",elStr);
	}

	return eval(whichEl);
}

function makeTop() {
	while(eval("window.arMenu" + topCount)) {
		topArray = eval("arMenu" + topCount);
		topName = "elMenu" + topCount;

		topMenu = makeElement(topName);
    	topMenu.setup = menuSetup;

		topItemCount = 0;
		for (i=0; i<topArray.length; i+=3) {
			topItemCount++;
			status = " - © Copyright 2004 Portofinodive.com - All rights reserved : " + topCount + " / " + topItemCount;
			topItemName = "item" + topCount + "_" + topItemCount;
			topItem = makeElement(topItemName,topMenu);

			if (topItemCount >1)
				topItem.prevItem = eval("item" + topCount + "_" + (topItemCount-1));

			topItem.setup = itemSetup;
			topItem.setup(i,topArray);

			if (topItem.hasMore) makeSecond();
		}
		
		topMenu.setup(false,topItem);
		topCount++
	}

	status = (topCount-1) + " - © Copyright 2004 Portofinodive.com - All rights reserved "
	areCreated = true;
}

function makeSecond() {

	secondCount = topCount + "_" + topItemCount;
	
	secondArray = eval("arMenu" + secondCount);
	secondName = "elChild" + secondCount;
	
	secondMenu = makeElement(secondName);
	secondMenu.setup = menuSetup;

	secondItemCount=0;
	for (j=0; j<secondArray.length; j+=3) {
		secondItemCount++;
		secondItemName = "item" + secondCount +"_" + secondItemCount;

		secondItem = makeElement(secondItemName,secondMenu)		
		
		if (secondItemCount >1)
			secondItem.prevItem = eval("item" + secondCount  + "_" + (secondItemCount-1));

		secondItem.setup = itemSetup;
		secondItem.setup(j,secondArray);

		if (secondItem.hasMore) makeThird();
	}

	secondMenu.setup(true,secondItem,topMenu,topItem);
}

function makeThird() {
	thirdCounter = secondCount + "_" + secondItemCount 
	
	thirdArray = eval("arMenu" + thirdCounter);
	thirdName = "elGrandChild" + thirdCounter;
	thirdMenu = makeElement(thirdName)
	
	thirdMenu.setup = menuSetup;

	thirdItemCount=0;
	for (k=0; k<thirdArray.length; k+=3) {
		thirdItemCount++;
		thirdItemName = "item" + thirdCounter + "_" + thirdItemCount;
		thirdItem = makeElement(thirdItemName,thirdMenu);

		if (thirdItemCount >1)
			thirdItem.prevItem = eval("item" + thirdCounter + "_" +(thirdItemCount-1));

		thirdItem.setup = itemSetup;
		thirdItem.setup(k,thirdArray);

	}

	thirdMenu.setup(true,thirdItem,secondMenu,secondItem);
}

function linkIt() {
	location.href = this.linkText;
}

function showIt(on) {
	if (NS4) {this.visibility = (on) ? "show" : "hide"}
		else {this.style.visibility = (on) ? "visible" : "hidden"}
}

function keepInWindow() {
	scrBars = 20;

	if (NS4) {
		winRight = (window.pageXOffset + window.innerWidth) - scrBars;
		rightPos = this.left + menuWidth;
   
		if (rightPos > winRight) {
			if (this.hasParent) {
				parentLeft = this.parentMenu.left;
				newLeft = ((parentLeft-menuWidth) + childOverlap);
				this.left = newLeft;
			}
			else {
				dif = rightPos - winRight;
				this.left -= dif;
			}
		}

		winBot = (window.pageYOffset + window.innerHeight) - scrBars;
		botPos = this.top + this.fullHeight;

		if (botPos > winBot) {
			dif = botPos - winBot;
			this.top -= dif;
		}
	}
	else {
    	winRight = (document.body.scrollLeft + document.body.clientWidth) - scrBars;
		rightPos = this.style.pixelLeft + menuWidth;
	
		if (rightPos > winRight) {
			if (this.hasParent) {
				parentLeft = this.parentMenu.style.pixelLeft;
				newLeft = ((parentLeft - menuWidth) + childOverlap);
				this.style.pixelLeft = newLeft;
			}
			else {
				dif = rightPos - winRight;
				this.style.pixelLeft -= dif;
			}
		}

		winBot = (document.body.scrollTop + document.body.clientHeight) - scrBars;
		botPos = this.style.pixelTop + this.fullHeight;

		if (botPos > winBot) {
			dif = botPos - winBot;
			this.style.pixelTop -= dif;
		}
	}
}

function popUp(menuName,e){
	if (!areCreated) return;

	hideAll();

	currentMenu = eval(menuName);
	xPos = (NS4) ? e.pageX : event.x;
	yPos = (NS4) ? e.pageY : event.y;
	currentMenu.moveTo(xPos,yPos);

	currentMenu.keepInWindow()
	currentMenu.isOn = true;
	currentMenu.showIt(true);
}

function popDown(menuName){ 
	if (!areCreated) return;
	whichEl = eval(menuName);
	whichEl.isOn = false;
	whichEl.hideTop();
}

function menuOver() {
	this.isOn = true;
	isOverMenu = true;
	currentMenu = this;
	if (this.hideTimer) clearTimeout(this.hideTimer);
}

function menuOut() {
	if (IE4 && event.srcElement.contains(event.toElement)) return;
	this.isOn = false;
	isOverMenu = false;
	if (IE4) allTimer = setTimeout("currentMenu.hideTree()",10); 
}

function itemOver(){
	if (IE4 && event.srcElement.tagName == "IMG") return;

	if (NS4) {
		this.bgColor = overCol;
	}
	else {
		this.style.backgroundColor = overCol;
		this.style.color = overFnt;
	}
	
	if (this.container.hasChildVisible) {
		this.container.hideChildren(this);
	}            

	if(this.hasMore) {
		if (NS4) {
			this.childX = this.container.left + (menuWidth - childOverlap);
			this.childY = this.pageY + childOffset;
		}
		else {
			this.childX = this.container.style.pixelLeft + (menuWidth - childOverlap);
			this.childY = this.style.pixelTop + this.container.style.pixelTop + childOffset;
		}

		this.child.moveTo(this.childX,this.childY);
		this.child.keepInWindow();
		this.container.hasChildVisible = true;
		this.container.visibleChild = this.child;
		this.child.showIt(true);
	}
}


function itemOut() {
    if (IE4 && (event.srcElement.contains(event.toElement)
     || (event.fromElement.tagName=="IMG" && event.toElement.contains(event.fromElement))))
        return;

	if (NS4) {
		this.bgColor = backCol;
		if (!isOverMenu) {
			allTimer = setTimeout("currentMenu.hideTree()",10);
		}
	}
	else {
		this.style.backgroundColor = backCol;
		this.style.color = fntCol;
	}
}

function hideAll() {
	for(i=1; i<topCount; i++) {
		temp = eval("elMenu" + i);
		temp.isOn = false;
		if (temp.hasChildVisible) temp.hideChildren();
		temp.showIt(false);
	}	
}

function hideTree() { 
	allTimer = null;
	if (isOverMenu) return;
	if (this.hasChildVisible) {
		this.hideChildren();
	}
	this.hideParents();
}

function hideChildren(item) {
	if (this.visibleChild.hasChildVisible) {
		this.visibleChild.visibleChild.showIt(false);
		this.visibleChild.hasChildVisible = false;
	}

	if (!this.isOn || !item.hasMore || this.visibleChild != this.child) {
		this.visibleChild.showIt(false);
		this.hasChildVisible = false;
	}
}

function hideParents() {     

	if (this.hasParent) {
		this.showIt(false);
		if (this.parentMenu.hasParent) {
			this.parentMenu.isOn = false;		
			this.parentMenu.showIt(false);
			this.parentMenu.parentMenu.isOn = false;
			whichEl = this.parentMenu.parentMenu
		}
		else {
			this.parentMenu.isOn = false;
			whichEl = this.parentMenu;
		}
	}
	else {
		whichEl = this;
	}

	whichEl.hideTop();
}

function hideTop() {
	whichEl = this;
	this.hideTimer = setTimeout("whichEl.hideSelf()",mSecsVis);
}

function hideSelf() {
	this.hideTimer = null;
	if (!this.isOn && !isOverMenu) { 
		this.showIt(false);
	}
}

function cancelSelect(){return false}

function moveTo(xPos,yPos) {
	this.style.pixelLeft = xPos;
	this.style.pixelTop = yPos;
}

window.onload = makeTop;

segue il secondo file.........

[ravint]

e questo è il file array.js:

  arMenu1 = new Array(
"Home","http://www.portofinodive.com",0,
"Disclaimer","http://www.portofinodive.com/html/disclaimer.html",0,
"Privacy","http://www.portofinodive.com/html/privacy.html",0,
"Mappa del Sito","http://www.portofinodive.com/html/mappa.html",0,
"Link","http://www.portofinodive.com/html/link.html",0,
"Download","http://www.portofinodive.com/html/download.html",0

)

arMenu2 = new Array(
"Chi Siamo","http://www.portofinodive.com/html/chisiamo.html",0,
"Le Nostre Proposte","http://www.portofinodive.com/html/nostreproposte.html",0,
"Dove Siamo","http://www.portofinodive.com/html/dovesiamo.html",0,
"Il Diving","http://www.portofinodive.com/html/diving.html",0,
"La Barca","",5,
"I Corsi","",6,
"Meteo","",7,
"Partners","",8,
"Lo Staff","http://www.portofinodive.com/html/staff.html",0,
"Gadget","http://www.portofinodive.com/html/abbigliamento.html",0

)

arMenu2_5 = new Array(
"Caratteristiche tecniche","http://www.portofinodive.com/html/labarca.html",0,
"Il layout","http://www.portofinodive.com/html/layout_barca.html",0,
"Foto","http://www.portofinodive.com/html/foto_barca.html",0

)

arMenu2_6 = new Array(
"Corsi PADI","http://www.portofinodive.com/html/corsi_padi.html",0,
"Corsi TDI","http://www.portofinodive.com/html/corsi_tdi.html",0,
"Corsi SDI","http://www.portofinodive.com/html/corsi_sdi.html",0,
"Corsi NAUI","http://www.portofinodive.com/html/corsi_naui.html",0,
"E.F.R.","http://www.portofinodive.com/html/corsi_efr.html",0,
"E.F.R. BLS 626/94","http://www.portofinodive.com/html/corsi_efr_626.html",0

)

arMenu2_7 = new Array(
"Meteo Liguria","http://www.portofinodive.com/html/meteo_lig.html",0,
"Meteo Mare","http://www.portofinodive.com/html/meteo_mar.html",0,
"Meteo Sat","http://www.portofinodive.com/html/meteo_sat.html",0

)

arMenu2_8 = new Array(
"Cressi Sub","http://www.portofinodive.com/html/cressi_it.html",0,
"Fa & MI","http://www.portofinodive.com/html/fa-mi.html",0,
"Acquario di Genova","http://www.portofinodive.com/html/convenzione_acquario.html",0,
"Hotel Colombo","http://www.portofinodive.com/html/convenzione_hotelcolombo.html",0,
"Itinera","http://www.portofinodive.com/html/itinera.html",0,
"Columbus Village","http://www.portofinodive.com/html/columbusv.html",0,
"Il Paguro","http://www.portofinodive.com/html/ilpaguro.html",0,
"Icethec","http://www.portofinodive.com/html/icethec.html",0,
"CFS","http://www.portofinodive.com/html/CFS.html",0,
"Easydive","http://www.portofinodive.com/html/easydive.html",0,
"Zena Sail","http://www.portofinodive.com/html/zenasail.html",0,
"Albergo Fieramare","http://www.portofinodive.com/html/fieramare.html",0

)

arMenu2_9 = new Array(
"Lo Staff","http://www.portofinodive.com/html/staff.html",0

)

arMenu3 = new Array(
"AMP Portofino","",1,
"Relitti","",2,
"Riviera Levante","http://www.portofinodive.com/immersioni/mappa_levante.html",0


)

arMenu3_1 = new Array(
"Mappa","http://www.portofinodive.com/immersioni/mappa_dives.html",0,
"Grotta dei Gamberi","http://www.portofinodive.com/immersioni/gamberi.html",0,
"Secca dell'Isoela","http://www.portofinodive.com/immersioni/secca_isoela.html",0,
"Punta Targhetta","http://www.portofinodive.com/immersioni/targhetta.html",0,
"Eremita","http://www.portofinodive.com/immersioni/eremita.html",0,
"Torretta","http://www.portofinodive.com/immersioni/torretta.html",0,
"Volpe","http://www.portofinodive.com/immersioni/volpe_indiano.html",0,
"Cristo degli Abissi","http://www.portofinodive.com/immersioni/cristo_abissi.html",0,
"Dragone","http://www.portofinodive.com/immersioni/dragone.html",0,
"Colombara","http://www.portofinodive.com/immersioni/colombara.html",0,
"Secca Carega","http://www.portofinodive.com/immersioni/secca_gonzatti.html",0,
"Raviolo","http://www.portofinodive.com/immersioni/raviolo.html",0,
"Testa del Leone","http://www.portofinodive.com/immersioni/testa_leone.html",0,
"Scoglio del Diamante","http://www.portofinodive.com/immersioni/diamante.html",0,
"Punta Vessinaro","http://www.portofinodive.com/immersioni/vessinaro.html",0,
"Altare","http://www.portofinodive.com/immersioni/altare.html",0,
"Casa del Sindaco","http://www.portofinodive.com/immersioni/casasindaco.html",0,
"Chiesa S.Giorgio","http://www.portofinodive.com/immersioni/sangiorgio.html",0,
"Faro","http://www.portofinodive.com/immersioni/faro.html",0,
"Bigo","http://www.portofinodive.com/immersioni/bigo.html",0

)

arMenu3_2 = new Array(
"Mappa Relitti","http://www.portofinodive.com/immersioni/mappa_relitti.html",0,				  
"Haven","http://www.portofinodive.com/immersioni/haven.html",0,
"Mohawk Deer","http://www.portofinodive.com/immersioni/mohawkdeer.html",0,
"Bettolina","http://www.portofinodive.com/immersioni/bettolina.html",0,
"Cargo Armato","http://www.portofinodive.com/immersioni/cargoarmato.html",0,
"Pelagosa","http://www.portofinodive.com/immersioni/pelagosa.html",0,
"Chiatta","http://www.portofinodive.com/immersioni/chiatta.html",0,
"Vaporetto","http://www.portofinodive.com/immersioni/vaporetto.html",0
)

arMenu4 = new Array(
"Tech Dive","http://www.portofinodive.com/html/imm_tecniche.html",0,
"Immersioni tecniche","",2

)
arMenu4_2 = new Array(
"KT","http://www.portofinodive.com/immersioni/kt.html",0,
"Washington","http://www.portofinodive.com/immersioni/washington.html",0,
"Senigallia","http://www.portofinodive.com/immersioni/senigallia.html",0,
"Vas","http://www.portofinodive.com/immersioni/vas.html",0,
"Nino Padre","http://www.portofinodive.com/immersioni/nino_padre.html",0,
"Calabria","http://www.portofinodive.com/immersioni/calabria.html",0,
"Haven","http://www.portofinodive.com/immersioni/haven.html",0,
"Genova","http://www.portofinodive.com/immersioni/genova.html",0

)

arMenu5 = new Array(
"Il Mediterraneo","http://www.portofinodive.com/html_biologia/mediterraneo.html",0,
"Alghe e Piante","http://www.portofinodive.com/html_biologia/alghepiante.html",0,
"Anellidi","http://www.portofinodive.com/html_biologia/anellidi.html",0,
"Briozoi","http://www.portofinodive.com/html_biologia/briozoi.html",0,
"Cnidari","http://www.portofinodive.com/html_biologia/cnidari.html",0,
"Crostacei","http://www.portofinodive.com/html_biologia/crostacei.html",0,
"Echinodermi","http://www.portofinodive.com/html_biologia/echinodermi.html",0,
"Molluschi","http://www.portofinodive.com/html_biologia/molluschi.html",0,
"Pesci","http://www.portofinodive.com/html_biologia/pesci.html",0,
"Poriferi","http://www.portofinodive.com/html_biologia/poriferi.html",0,
"Tunicati","http://www.portofinodive.com/html_biologia/tunicati.html",0

)

arMenu6 = new Array(
"Foto Gallery","http://www.portofinodive.com/expose/expose.html",0


)

arMenu7 = new Array(
"Contatto","http://www.portofinodive.com/email/mailform.php",0,
"Call Center","http://www.portofinodive.com/html/call_center.html",0

)

se devo cambiare un link oppure aggiungere o eliminare una pagina basta che apro solo un file e non tutte le pagine del sito....

grazie

[artorius]

Scusa la domanda, ma gestire così i link non è un casino?

Comunque uno script così particolare non l'ho mai visto e comunque sarebbe un problema modificare questo script, dato che è impostato per Explorer e Firefox 2 (infatti con FF 3 non funziona).

Se hai problemi a replicare i link potresti usare un linguaggio di scripting, tipo PHP, che ti permetta di importare altri file in un altro, così dovresti solo modificarne uno e tutte le pagine ne avrebbero effetto (molto più semplice che gestire uno script simile). Facendo così ti basterebbe creare in HTML le parti che il tuo script crea con JS e indicargli display:none;

A questo punto fai uno script JS che mostri le parti nascoste e sei a posto.

Mi spiace se non ti posso aiutare in altro modo, ma un lavoro come quello che tu dici, potrebbe prendere anche un paio di giorni di lavoro, non è una cosa da poco...

[ravint]

ho scoperto chi ha fatto questo script:

http://www.webreference.com/dhtml/co...menuArray.html

e guarda caso hanno fatto un aggiornamento anzi a dire la verita ne hanno fatto parecchi:

http://www.webreference.com/dhtml/

quale di questi????

[artorius]

mmm, mi pare che non ci sia ancora una versione cross-browser disponibile. Mi sa che funziona solo in Explorer (e per puro caso in FF 2).

[ravint]

c'e' c'e', dalla versione 4 in poi......

attualmente sto analizzando e testando questa:

http://www.webreference.com/dhtml/column66/6.html

qui una demo che ho testato con vari brovser del tipo google, safari.....

http://www.webreference.com/dhtml/co...-3/LoadMe.html

[artorius]

beh, mi sembri funzioni, dov'è il problema?