Zibaldone.it - Rubriche \ Corso di HTML

How To a cura di: www.wmportal.it

Popup senza bordi

Attenti webmasters: la popupfobia dilaga!

Finestrelle appena aperte vengono crocettate ancor prima di mostrare il loro contenuto, e la mano veloce del nostro ospite non ci pensa due volte a sparare un ALT F4 al "fuoco!" comandato della coda dell'occhio all'apparire di un nuovo elemento nella barra delle applicazioni.

Ormai è quasi un riflesso condizionato che probabilmente verrà tramandato ai nostri figli...

Che fare, quindi, per costringere il visitatore a sorbirsi i nostri sponsors o i nostri banners? Addolciamo la pillola con un bell'effetto speciale...un pop up privo dei bordi del browser!

Subito tre esempi:

Senza barre di scorrimento

Con barre di scorrimento

Con barre di scorrimento Colorate

...ed ora il codice: gli scripts sono due ed entrambi devono essere inseriti nella pagina dalla quale vengono avviati i popups.

Il primo ha la seguente sintassi:

/*
	CHROMELESS WINDOWS v.31.0 [ 4.50K ]
	(c) Gabriel Suchowolski,2000 | www.microbians.com
	Licensed under GNU LGPL (www.gnu.org)
*/

function chromeless(u,n,W,H,X,Y,cD,cU,cO,cL,tH,tW,wB,wBs,wBG,wBGs,wNS,fSO){
	var c=(document.all&&navigator.userAgent.indexOf("Win")!=-1)?1:0
	var w=window.screen.width; var h=window.screen.height
	var W=W||w; W=(typeof(W)=='string'?Math.ceil(parseInt(W)*w/100):W); W+=2*c
	var H=H||h; H=(typeof(H)=='string'?Math.ceil(parseInt(H)*h/100):H); H+=23*c
	var X=X||Math.ceil((w-W)/2)
	var Y=Y||Math.ceil((h-H)/2)
	var s=",width="+W+",height="+H

if(c){
		var cTIT='\n'+
		'<html><head><META HTTP-EQUIV="imagetoolbar" CONTENT="no">\n'+
		'<script>\n'+
		'var iclod=new Image();iclod.src="'+cD+'";var iclou=new Image();iclou.src="'+cU+'";var icloo=new Image();icloo.src="'+cO+'";var iload=new Image();iload.src="'+cL+'";\n'+
		'document.onselectstart=new Function("return false;");document.ondragstart=new Function("mWIN();return false;");document.oncontextmenu=new Function("return false;");document.onmousemove=mWIN\n'+
		'b=-1;\n'+
		'function wLoa(){if(top.loaded){bloa.style.visibility="hidden";sRes()}else setTimeout("wLoa()",500)}\n'+
		'function sRes(){bclo.style.pixelLeft=document.body.clientWidth-18;bloa.style.pixelLeft=document.body.clientWidth-38}\n'+
		'function mWIN(){\n'+
		'if(b==0){document.body.bgColor="'+wBG+'";parent.bM.document.body.bgColor="'+wB+'";parent.bT.document.body.bgColor="'+wB+'";parent.bB.document.body.bgColor="'+wB+'";parent.bL.document.body.bgColor="'+wB+'";parent.bR.document.body.bgColor="'+wB+'";b=-1}\n'+
		'if(b==2){px=event.screenX-ofx-1;py=event.screenY-ofy-1;top.window.moveTo(px,py);}\n'+
		'if(b==1){document.body.bgColor="'+wBGs+'";parent.bM.document.body.bgColor="'+wBs+'";parent.bT.document.body.bgColor="'+wBs+'";parent.bB.document.body.bgColor="'+wBs+'";parent.bL.document.body.bgColor="'+wBs+'";parent.bR.document.body.bgColor="'+wBs+'";ofx=event.x;ofy=event.y;b=2}\n'+
		'}</script></head>\n'+
		'<body onresize="sRes()" bgcolor='+wBG+'>\n'+
		'<div style="position:absolute;left:0px;top:4px">'+tH+'</div>\n'+
		'<img id=bmov style="position:absolute;left:-50px;top:-50px" onmousedown="b=1;mWIN()" onmouseup="b=0;mWIN()" border=0 src="" width=150% height=500>\n'+
		'<img id=bclo style="position:absolute;top:4px;left:'+(W-20)+'px;" src="'+cU+'" border=0 width=11 height=11 onmouseover="this.src=icloo.src" onmouseout="this.src=iclou.src" onmouseup="this.src=iclou.src" onmousedown="this.src=iclod.src" onclick="top.window.close()">\n'+
		'<img id=bloa style="position:absolute;top:4px;left:'+(W-40)+'px;" src="'+cL+'" border=0 width=11 height=11>\n'+
		'<script>wLoa()</script>\n'+
		'</body>\n'+
		'</html>'
		
		cTIT=cTIT.replace(/\//g,"\\\/").replace(/\"/g,"\\\"").replace(/\n/g,"\\n")
		
		var cFRM='<TITLE>'+tW+'</TITLE>\n'+
		'<script>\n'+
		'top.loaded=false\n'+
		'function mTIT(){\n'+
		'	if(frames.length>6){\n'+
		'		fT.document.bgColor="'+wBG+'";fT.document.write("'+cTIT+'");fT.document.close()\n'+
		'		bM.document.bgColor="'+wB+'";bL.document.bgColor="'+wB+'";bR.document.bgColor="'+wB+'";bB.document.bgColor="'+wB+'";bT.document.bgColor="'+wB+'"\n'+
		'	} else setTimeout("mTIT()",20)\n'+
		'}\n'+
		'mTIT()\n'+
		'</script>\n'+
		'<frameset onselectstart="return false" onload="top.loaded=true" border=0 framespacing=0 frameborder=0 cols="1,100%,1">\n'+
		'	<frame name=bL src="about:blank" scrolling=no noresize>\n'+
		'	<frameset border=0 framespacing=0 frameborder=0 rows="1,20,1,100%,1">\n'+
		'		<frame name=bT src="about:blank" scrolling=no noresize>\n'+
		'		<frame name=fT src="about:blank" scrolling=no noresize>\n'+
		'		<frame name=bM src="about:blank" scrolling=no noresize>\n'+
		'		<frame name=main src="'+u+'" '+fSO+'>\n'+
		'		<frame name=bB src="about:blank" scrolling=no noresize>\n'+
		'	</frameset>\n'+
		'<frame name=bR src="about:blank" scrolling=no noresize>\n'+
		'</frameset>\n'+
		'</HTML>'
	
		var CWIN=window.open("",n,"fullscreen=1"+s)
		CWIN.moveTo(5000,0)
		CWIN.resizeTo(W,H)
		CWIN.document.write(cFRM)
		CWIN.document.close()
		CWIN.moveTo(X,Y)
	} else {
		var CWIN=window.open(u,n,wNS+s,true)
		CWIN.moveTo(X,Y)
	}
	CWIN.focus()
	CWIN.setURL=function(u) { if (this && !this.closed) { if (this.frames.main) this.frames.main.location.href=u; else this.location.href=u } }
	CWIN.closeIT=function() { if (this && !this.closed) this.close() }
	return CWIN
}

...e deve essere salvato come file esterno e incorporato nel documento come segue:

<script src="chromeless.js"></script>

Il secondo va, invece, inserito in linea, subito dopo quello incorporato, e presenta la seguente sintassi:
Per richiamarlo basta far puntare il link allo script:

javascript:openIT('test.html',450,250,null,null,'popup')

Indicando, rispettivamente, il nome e l'estensione del file da visualizzare, e le dimensioni della finestra che lo andrà a contenere (larghezza ed altezza).

Negli esempi di questa pagina, infine, sono state utilizzate le immagini:

up.gif

over.gif

down.gif

...che emulano la "x" di chiusura della finestra durante gli omonimi eventi del mouse. Potete salvarle ed utilizzarle, oppure sostituirle con altre create ad hoc, l'importante è che siano grandi 11x11 pixels.

CorsoHTML
di Francesco Ricca