Newsgroup: it.comp.lang.javascript
Titolo: pagine che si muovono

Ciao una volta ho beccato un sito che non appena si cliccava su un
collegamento compariva una pagina ke poi si spostava sullo skermo.
Immaginate una pagina di IE senza nessun menu, ne status bar ecc, ke si
muove sullo skermo... come si potrebbe realizzare? Qualcuno mi sa magari
indicare un link utile???
-- 
--------------------------------------------------------- 
Hope for the best and head for the top.
That's the only way to approach the business!
--------------------------------------------------------- 

 Qualcuno mi sa magari indicare un link utile???
Per quanto riguarda JS:
in 
www.jsdir.com
 c'e' qualcosa con le finestre pop-up...
in 
http://www.walterzorn.com
 e 
http://www.dhtmlcentral.com
 puo' esserci
qualcosa di interessante...

Io purtroppo non ho il tempo, ma posso dieti come fare a grandi linee
Calcoli le dimensioni dello schermo, con screen.width e screen.height.
Poi imposti le dimensioni della tua finestra un poě piů piccole, e la fai
spostare da una posizione di partenza che vuoi, fino ad un'altra che vuoi
tu, oppure la fai ingrandire tremando (+2-1 nel size per un ciclo di volte
pari a quello che serve per arrivare a tutto schermo)
ecc....
Se paciocchi un po'
Io anni fa avevo creato un tremolio fino a schermo intero. Solo che era
terribile per gli inesperti, che uscivano subito dal sito.
Se riesco (cioč se lo trovo) lo pubblico in qualche pagina....

 pari a quello che serve per arrivare a tutto schermo)
Ehm ehm, non so come dirtelo, bè non credo di aver capito molto. Io nn
mastico molto queste cose, quindi mi verrebbe più facile magari un link dove
potrei trovare uno script già pronto... sorry :P


 Se riesco (cioè se lo trovo) lo pubblico in qualche pagina....
Mi hanno risposto questo sul forum di 
html.it
 ke ne dite?
Forse vuoi usare i metodi
window.moveTo(X,Y);
window.moveBy(dX,dY);
vedi
http://www.devguru.com/technologies/ecmascript/quickref/javascript_index.html
per la sintassi.
Ti consiglio di usarli su una popup.
la X varia tra 0 e screen.width - larghezza fienstra, la Y tra 0 e
screen.height -
Io ho dato un okkiata, ma siamo sempre al punto di partenza, vorrei ke mi
venisse indicato uno script, magari già fatto. Io so modificare qualcosina,
ma nn so crearli da 0 =(((


 ma nn so crearli da 0 =(((
Spero ti serva da traccia:
<script type="text/javascript">
	var w=320,h=200,t=(screen.height-h)>>1,l=(screen.width-w)>>1,
 
wn=window.open("about:blank","","width="+w+",height="+h+",top="+t+",left="+
l);
	function moveUpDown(y,incy){
		y+=incy;
		if (y>(t+30) || y<t-30) incy=-incy;
 
		wn.moveBy(0,incy);
		setTimeout("moveUpDown("+y+","+incy+")",50);
	}
 
	moveUpDown(t,3);
 
</script>
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Deformazione professionale è:
Quando in ascensore senti la ragazza accanto che tira fuori il cellulare,
e ti volti per capire se e' un modello sul quale puoi sviluppare in J2ME.

ma nn so crearli da 0 =(((
Vuoi spostare in giro per lo schermo una finestra o spostare una
"pseudo" finestra all'interno della pagina?
Un esempio di entrambe con due files "collegati" tra loro:
====
<html>
<head>
<style type="text/css">
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	background-color:green;
}
.fubar{
	position:absolute;
	left:51px;
	top:51px;
	width: 2em;
	height: auto;
        border: 3px solid yellow;
	background-color:blue;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight:bold;
	color:white;
	z-index:3;
}
.fu{
	position:absolute;
	left:251px;
	top:80px;
	width: 2em;
	height: 6em;
        border: 3px solid blue;
	background-color:yellow;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight:bold;
	color:white;
	z-index:1;
}
.bar{
	position:absolute;
	left:451px;
	top:150px;
	width: 1.3em;
	height: 4em;
        border: 3px solid red;
	background-color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight:bold;
	color:white;
	z-index:5;
}
.eek{
	position:absolute;
	left:100px;
	top:150px;
	width: 1.1em;
	height: 3.5em;
        border: 3px solid red;
	background-color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight:bold;
	color:white;
	z-index:5;
}
</style>
<script type="text/javascript">
var dir=45; // direzione mov.
var speed=10; // vel. mov.
var ds=1; // variazione vel.
var fsize=1; //  dim. font
var dfs=0.1; // variazione dim. fond
var w,h=0;  // limiti max posizione
var ob=null; // ogg. da spostare
var curx=51; // pos. correnti
var cury=51; // x e y
var tio=null; // timeout
var wi=null; // window aperta
function movethis(mx,my,cx,cy){
// calcola nuova posizione in base a direzione e
// velocita'
 var newx=parseInt(parseInt(cx)+speed*Math.cos(dir));
 var newy=parseInt(parseInt(cy)+speed*Math.sin(dir));
 if((newx<50)||(newx>mx)||(newy<50)||(newy>my)){
	//se esce dai limiti definiti modifica
	// la direzione di un valore random
	dir=dir+Math.random(30);
	// ritorna posizione non calcolata
	return({x:-1,y:-1});
 }
 // ritorna la nuova posizione
 return({x:newx,y:newy});
}
function moveit(){
 ret={x:-1,y:-1};
 while(ret.x==-1){
	// fino a quando non ha 
	// calcolato la nuova pos.
	ret=movethis(w,h,curx,cury);
 }
 // varia la vel. entro certi limiti
 speed+=ds;
// varia la dim. del font  entro certi limiti
 fsize+=dfs;
 if(speed>20){
	ds=-1;
 }
 if(speed<5){
	ds=1;
 }
 if(fsize>2.5){
	dfs=-0.1;
 }
 if(fsize<0.6){
	dfs=0.1;
 } 
 // setta nuova posizione alla div
 ob.style.left=ret.x+"px";
 ob.style.top=ret.y+"px";
// setta nuova dim. font
 ob.style.fontSize=fsize+"em";
 curx=ret.x;
 cury=ret.y;
// ripete dopo timeout
 tio=setTimeout(moveit,10);
}
function start(){
 // popup da aprire
 var filedaaprire="lafinestra.html";
// ogg. da spostare
 ob=document.getElementById("argh");
 // dim. max posizione
 w=document.body.clientWidth-120;
 h=document.body.clientHeight-120;
 try{
	// apre popup
wi=window.open(filedaaprire,"XXX","menubar=no,scrollbars=no,toolbar=no,personalbar=no,directories=no,resizable=yes,height=101,width=101,screenY=51,screenX=51");
 } catch(e){alert(e.message);}
// inizia a spostare dopo timeout
 tio=setTimeout(moveit,100);
}
function stop(){
 //ferma tutto!!!
 clearTimeout(tio);
 wi.close();
}
</script>
</head>
<body>
<!--
Questa e' la div che viene spostata
-->
<div id="argh" class="fubar">};-></div><br>
<div class="fu"></div>
<div class="bar"></div>
<div class="eek"></div>
<a href="#" onclick="start();return false;">Start</a>
<a href="#" onclick="stop();return false;">Stop</a>
</body>
</html>
====
Se cambi nome del secondo file cambialo anche all'interno del primo,
qui:
function start(){
 var filedaaprire="lafinestra.html";
[...]
====lafinestra.html==== 
<html>
<head>
<style type="text/css">
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	background-color:green;
}
</style>
<script type="text/javascript">
var dir=45; // vedi commenti primo file
var speed=10;
var ds=1;
var fsize=1;
var dfs=0.1;
var w,h=0;
var curx=51;
var cury=51;
var tio=null;
function movethis(mx,my,cx,cy){
 var newx=parseInt(parseInt(cx)+speed*Math.cos(dir));
 var newy=parseInt(parseInt(cy)+speed*Math.sin(dir));
 if((newx<50)||(newx>mx)||(newy<50)||(newy>my)){
	dir=dir+Math.random(30);
	return({x:-1,y:-1});
 }
 return({x:newx,y:newy});
}
function moveit(){
 ret={x:-1,y:-1};
 while(ret.x==-1){
	ret=movethis(w,h,curx,cury);
 }
 speed+=ds;
 fsize+=dfs;
 if(speed>20){
	ds=-1;
 }
 if(speed<5){
	ds=1;
 }
 if(fsize>2.5){
	dfs=-0.1;
 }
 if(fsize<0.6){
	dfs=0.1;
 } 
 try{
	// sposta la finestra che visualizza questo file
	moveTo(ret.x, ret.y);
 } catch(e){
	// segnala eventuale errore
	document.getElementById("a").innerHTML="Errore :"+e.message;
 }
 curx=ret.x;
 cury=ret.y;
 tio=setTimeout(moveit,10);
}
function start(){
 // estremi spostamento
 w=screen.width-120;
 h=screen.height-120;
 // inizia a muovere dopo timeout
 tio=setTimeout(moveit,100);
}
</script>
</head>
<body onload="start();">
 HELLO!
<pre id="a"></pre>
</body>
</html>
====
Per entrambe:
La funzione movethis(mx,my,cx,cy) calcola la nuova posizione
dell'oggetto da spostare. 
Il tutto e' gestito dalla funzione moveit() richiamata tramite
timeout:
 tio=setTimeout(moveit,10);
Per la div la sposti, ad esempio, settando i valori di top e left:
 ob.style.left=ret.x+"px";
 ob.style.top=ret.y+"px";
Per la finestra usi moveTo
	moveTo(ret.x, ret.y);
Dal primo file si apre il popup con il secondo con dimensioni e
posizione:
wi=window.open(filedaaprire,"XXX","[...]height=101,width=101,screenY=51,screenX=51");
Caricare il primo file nel browser e fare click su start per iniziare,
su stop per fermare il tutto.
NB:
Questo si limita a spostare in giro per lo schermo una finestra, e una
div all'interno della pagina. Non si ferma se non lo fa l'utente. Non
si spostano da un punto definito ad un altro sempre definito da te.
Se devi spostare dal punto A al punto B la tua finestra/div devi
definire come spostarla tramite dei delta X e delta Y riferiti al
numero di passi che vuoi fargli fare che ne modifichino la posizione
corrente. Ovviamente, raggiunto il punto B, si deve fermare.
Ricordarsi, nel caso di finestra in movimento, che, ad esempio
Mozilla, vuole che lo script abbia l'autorizzazione a modificarne la
posizione.
'bye

Io vorrei spostare la finestra da un punto ad un altro. Ti ringrazio molto
ora provo a fare come dici tu =)
ciao
