[mackey pillola 1] Tips&Tricks in DHTML

**Mackey** · 18-03-2003, 03:24

6) Menu a tendina
compatibile con: Internet Explorer, Netscape, Opera
Molto utile se volete fare un menu riassuntivo delle vostre pagine. Niente di nuovo, volevo soltanto proporlo fra gli
script utili.

- Descrizione
Un semplice menu che al click rimanda alla pagina specificata con la possibilità di specificare il target

- Codice
Lo style non è obbligatorio (è solo per vedere come si può formattare una SELECT), basta copiare la SELECT nel punto
della pagina in cui vogliamo che appaia.

codice:

<style>
.menut {
	background: #C0C0C0;
	font-color: #EEEEEE;
	font-family: verdana;
	font-size: 8pt;
	font-weight: bold;
}
</style>
<select onchange="self.location.href=this.value;" class="menut">

<option value="javascript:void(0);"> # MENU #
<option value="bgColorand.htm">BgColor Random
<option value="colori.htm">Colori
<option value="pillola.htm">La pillola
<option value="stringhe.htm">Stringhe
<option value="pagina1.htm">Include

</select>

- Funzionamento
Lasciare invariata la prima OPTION (a limite cambiare la scritta # MENU #), le altre si modificano nel seguente modo:
value indica il percorso della pagina da raggiundere, alla chiusura del tag possiamo mettere la descrizione.
Nella prima riga (..select onchange...), self indica il target da raggiungere... in questo caso indica la stessa finestra.

__________________________________________________ ___________________________

7) Menu su tasto destro del mouse
compatibile con: Internet Explorer, Netscape, Opera

- Descrizione
Un semplice menu sul tasto destro del mouse. È supportato anche da Opera, con la sola differenza che si apre con un doppio click anzichà con il tasto destro.

- Codice
Questo script va copiato e incollato nell'HEAD della pagina, oppure incluso in un file esterno e richiamato dalla pagina.

codice:

<script>
var vocimenu = new Array;
var links = new Array;
var bgc = navigator.appName.indexOf("Opera")==-1 ? "MENU" : "#F7F7F0";
var col = navigator.appName.indexOf("Opera")==-1 ? "MENUTEXT" : "#000000";
var bgc_over = navigator.appName.indexOf("Opera")==-1 ? "HIGHLIGHT" : "#20AF10";
var col_over = navigator.appName.indexOf("Opera")==-1 ? "HIGHLIGHTTEXT" : "#FFFFFF";

vocimenu[vocimenu.length] = "Indietro";
vocimenu[vocimenu.length] = "Avanti";
vocimenu[vocimenu.length] = "Imposta come Homepage";
vocimenu[vocimenu.length] = "Aggiungi a Preferiti";
vocimenu[vocimenu.length] = "HTML";
vocimenu[vocimenu.length] = "Stampa";
vocimenu[vocimenu.length] = "Aggiorna";
vocimenu[vocimenu.length] = "WebMaster";
vocimenu[vocimenu.length] = "@ E-mail";

links[links.length] = "HTML.IT, http://www.html.it/";
links[links.length] = "pagina 2, ../pagina2.htm";
links[links.length] = "GOOGLE.IT, http://www.google.it/";
links[links.length] = "Tiscali, http://www.tiscali.it/";

document.writeln(""
+"<STYLE>"
+"#contextMenu {"
+"	position: absolute;"
+"	visibility: hidden;"
+"	border: double 3px BUTTONFACE;"
+"	background: "+bgc+";"
+"	color: "+col+";"
+"}"
+".menu {"
+"	padding-left: 15px;"
+"	width: 100%;"
+"	height: 25px;"
+"	background: "+bgc+";"
+"	color: "+col+";"
+"	font-family: Verdana, Arial, Tahoma;"
+"	font-size: 11px;"
+"	text-decoration: none;"
+"	cursor: default;"
+"  }"
+"</STYLE>"
+"");
var hcontxt = 20+((vocimenu.length + links.length)*25);
document.write("");
document.write("<table cellpadding=0 cellspacing=0 ID=\"contextMenu\" width=\"180\" height=\""+hcontxt+"\">");
for(j=0; j<vocimenu.length; j++)
	document.write("<tr><td class=\"menu\" onmouseover=\"mover(this);\" onmouseout=\"mout(this);\""+
	"onmouseup=\"opzioni("+(j+1)+");\">"+vocimenu[j]+"</td></tr>");
if(links.length) {
	document.write("<tr><td class=\"menu\" valign=\"top\" style=\"padding:0px;height:1px;\"><div style=\"padding:0px;overflow:hidden;height:9px;display:inline;\"><hr width=\"100%\" color=\"BUTTONFACE\" size=\"2\"></div></td></tr>");	
	for(j=0; j<links.length; j++) {
		linkmenu = links[j].split(", ");
		document.write("<tr><td class=\"menu\" onmouseover=\"mover(this);\" onmouseout=\"mout(this);\""+
		"onmouseup=\"opzioni('"+linkmenu[1]+"');\">"+linkmenu[0]+"</td></tr>");
	}
}
document.write("</table>");

if(!document.all) contextMenu = document.getElementById("contextMenu");

/* eventi */
contextMenu.onselectstart	= function (){ return false; }
contextMenu.onmouseover		= function (){ mousein=1; }
contextMenu.onmouseout		= function (){ mousein=0; }
window.onscroll				= hide;
window.onresize				= hide;

if (document.all) { document.onclick = function (){ if(mousein==0) hide(); }
	document.oncontextmenu =  showMenu; }
else { document.captureEvents(Event.MOUSEUP);
	document.onmouseup = showMenu;
	document.oncontextmenu = function() { showMenu; return false; } 
} 


/* funzioni */
mousein=0;
var mclick=0;

function showMenu (evt) {
if(!mousein) {
	hide();
	mclick++;
	setTimeout("mclick=0",1000);
	if(document.all) {
		var Xmenu = event.clientX + document.body.scrollLeft;
		var Ymenu = event.clientY + document.body.scrollTop;
		if(event.clientX > (document.body.offsetWidth - contextMenu.width -20)) Xmenu -= contextMenu.width; 
		if(event.clientY > (document.body.offsetHeight - contextMenu.height -10)) Ymenu -= contextMenu.height; 
	}
	else if(evt.which==2 || evt.which==3 || mclick>1) {
		contextMenu.height = hcontxt;
		var Xmenu = evt.clientX + window.pageXOffset;
		var Ymenu = evt.clientY + window.pageYOffset;
		if(evt.clientX > (window.innerWidth - contextMenu.width -20)) Xmenu -= contextMenu.width; 
		if(evt.clientY > (window.innerHeight - contextMenu.height -10)) Ymenu -= contextMenu.height; 
		mclick=0;
	}
	contextMenu.style.pixelLeft = Xmenu; 
	contextMenu.style.pixelTop = Ymenu; 
	show();
	return false;
  }
}

function mover(ogg) {
	ogg.style.backgroundColor = bgc_over;
	ogg.style.color = col_over;
}
function mout(ogg) {
	ogg.style.backgroundColor = bgc;
	ogg.style.color = col;
}
function hide() {
	contextMenu.style.visibility = "hidden";
	contextMenu.style.left = 0; 
	contextMenu.style.top = 0; 
	mousein=0;
}
function show() {
	contextMenu.style.visibility = "visible";
}

function opzioni(scelta) {
hide();
switch(scelta) {
	case 1: history.back();
			
	break;
	case 2: history.forward();
			
	break;
	case 3: document.body.style.behavior='url(#default#homepage)'; document.body.setHomePage(this.location);
			
	break;
	case 4: var tit=document.title;
			if(tit=="") window.external.AddFavorite(this.location);
			else  window.external.AddFavorite(this.location,tit);
	
	break;
	case 5: location.href="view-source:"+location.href;
			
	break;
	case 6: parent.print();
			
	break;
	case 7: location.reload();
			
	break;
	case 8: confirm("Nome Cognome - Abitazione (XX)\n\nCompetenze tecniche: HTML, Javascript, CSS, PHP, C & C++\n\nSito Internet: http://www.miosito.it/\n");
			
	break;
	case 9: location.href="mailto:email@provider.it?Subject=Informazioni&body=Indicare Nome Cognome e Indirizzo";
			
	break;
	default: location.href=scelta; 
	break;
	}
}

</script>

- Funzionamento
Dopo aver copiato il codice nell'HEAD della pagina... o opportunamente incluso in un js esterno si possono aggiungere dei collegamenti aggiungendo una voce all'array links[] con la seguente sintassi:
links[links.length] = "Titolo sito, http://www.sito.it/";

Attenzione alla virgola che separa il titolo dall'indirizzo.. la sintassi deve essere esatta per il buon funzionamento dello script.

__________________________________________________ ___________________________

8. Form Target su Popup
compatibile con: Internet Explorer, Netscape, Opera

- Descrizione
Script per inviare un form utilizzando una finestra di popup

- Codice
Da incollare nell'HEAD della pagina

codice:

<script>

function tgtpop(formname) {
	window.open("","tpopup","");
	formname.target = "tpopup";
	return true;
}

</script>

- Funzionamento
Basta aggiungere la riga seguente al tag del FORM: onsubmit="return tgtpop(this);"

__________________________________________________ ___________________________

9. Suggerisci sito ad un amico
compatibile con: Internet Explorer, Netscape, Opera

- Descrizione
Script per la segnalazione del sito ad una amico

- Codice

codice:

<script>

document.write("<div style=\"position:absolute;top:0px;left:0px;visibility:hidden;\"><form name=\"sendamico\" method=\"post\" enctype=\"text/plain\">"+
	"<textarea name=\"testo\">\n\nCiao!\nVorrei segnalarti questa pagina: "+location.href+"\n\n"+
	(location.href.substring(0,location.href.lastIndexOf("/")))+"/</textarea></form></div>");

function mailtofriend() {
	var email = prompt("Digita l'email del tuo amico","");
	if(email!=null) {
		
		for (var i = 0; i < email.indexOf("@"); i++) {
			var ch = email.charAt(i);
			if((ch < "a" || "z" < ch) && !(ch == "." || ch == "_" || ((ch >= "1" && "9" >= ch) || ch == '0'))) {
				alert("Indirizzo di e-mail errato o digitato non correttamente");
				return mailtofriend();
			}
		}
		for (var i = email.indexOf("@")+1; i < email.length; i++) {
			var ch = email.charAt(i);
			if((ch < "a" || "z" < ch) && !(ch == "." || ((ch >= "1" && "9" >= ch) || ch == '0'))) {
				alert("Indirizzo di e-mail errato o digitato non correttamente");
				return mailtofriend();
			}
		}
	
		if (email.indexOf("@") < 1 || (email.substring(email.indexOf("@")+1,email.length)).indexOf(".") < 1  ||
		(email.substring(email.length-4,email.length)).indexOf(".") < 0 ||
		(email.substring(email.length-4,email.length)).indexOf(".") > 1 ) {
			alert("Indirizzo di e-mail errato o digitato non correttamente");
			return mailtofriend();
		}
	
		var azione = "mailto:"+email+"?Subject=Sito%20Interessante";
		if(document.all) {
			document.sendamico.action=azione;
			document.sendamico.submit();
		}
		else {
			var bodyazione = "Ciao! Vorrei segnalarti questa pagina: "+this.location+" .";
			bodyazione = escape(bodyazione);
			azione = azione + "&body=" + bodyazione;
			location.href=azione;
		}

	}
	return false;
}

</script>

- Funzionamento
Mettere questo collegamento dove si vuole:
segnala ad un amico

__________________________________________________ ___________________________

10. Chiusura graduale del sito
compatibile con: Internet Explorer

- Descrizione
Quando si clicca sulla X di chiusura della pagina la finestra si stringe al centro fino a chiudersi.

- Codice
Copiare questo codice nell'HEAD della pagina

codice:

<script>
function chiudi() {
	var lar=screen.width;
	var alt=screen.height;

	while(lar>40 && alt>30) {
		posx = (screen.width-lar)/2;
		posy = (screen.height-alt)/2;
		window.resizeTo(lar,alt);
		window.moveTo(posx,posy);
		lar-=8;
		alt-=6;
	}
}
  window.onbeforeunload = chiudi;
  onunload = chiudi;
</script>

__________________________________________________ ___________________________

Discussione: [mackey pillola 1] Tips&Tricks in DHTML

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio