ago 6 2011

CSS: Centrare un div o un’altro componente all’interno della pagina

Luca Bartoli

Per centrare un componente nela pagina si dovranno impostare questi stili:

height:300px;
width:600px;
margin-top:-150px;
margin-left: -300px;
left:50%;
top:50%;
position:absolute;

Come si può vedre i margini devono essere la metà delle rispettive dimensioni.
Naturalmente il componente deve essere posizionato in maniera assoluta e le dimensioni devono rimanere fisse.

Leggi tutto...

mar 10 2010

JavaScript: cattuare la posizione del mouse per Internet Explorer e Mozilla

Luca Bartoli

Questo script permette di catturare la posizione del mouse per tutti i browser più famosi:

var pos = {x: 0, y: 0}; ;

function getMousePosition(e)
{
	var IE = document.all?true:false;		;

	if ( IE )
	{ // cattura la posizione di x e di y per Internet Explore
		pos.x = event.clientX + document.body.scrollLeft;
		pos.y = event.clientY + document.body.scrollTop;
	}
	else
	{  // Cattura la posizione di x e di y per tutti gli altri browser
		pos.x = e.pageX;
		pos.y = e.pageY;
	}
}
// mi ero dimenticato di postare il codice per fare in modo che la posizione venga catturata continuamente
document.onmousemove = getMousePosition;


Leggi tutto...

mar 9 2010

Javascript: Sapere le coordinate di un componente html nella pagina

Luca Bartoli

Per sapere la posizione di un componente all’interno di una pagina html anche se questo non utilizza il posizionamento assoluto si dovrà utilizzare lo script riportato di seguito

function getPageCoords(element)
{// Le coordinate da ritornare
	var coords = {x: 0, y: 0};
	// se esiste un contenitore per il nostro elemento
	if( typeof( element.offsetParent ) != 'undefined' )
	{
		while (element)
		{
			coords.x += element.offsetLeft;
			coords.y += element.offsetTop;
			element = element.offsetParent;
		}
	}
	else
	{
		coords.x = element.x;
		coords.y = element.y;
	};

	return coords;
}

Leggi tutto...

mar 9 2010

Javascript: Sapere le dimensioni di tutti i componenti HTML in Javascript

Luca Bartoli

Per poter avere le dimensioni di un componente html è sufficiente assegnare un id univico al componente e utilizzare il seguente metodo:

function getElementSize(nomeComponente)
{
   // si riprende l'oggetto html di cui si vuole sapere le dimensioni
   var element = document.getElementById(nomeComponente);
   // si crea un oggetto attraverso la notazione json
   var size = {w: 0, h: 0};
   // si ricavano le coordinate
   size.w = element.offsetWidth;
   size.h = element.offsetHeight;
   // si ritornano le coordinate
   return size;
};

// per utilizzare l'oggetto si dovrà
var size = getElementSize('idHTML');
document.write('width=' + size.w);
document.write('height=' + size.h);
Leggi tutto...