Div Flutuante

Bom existem 2 metodos q eu utilizo o 1º eh o por CSS e o 2º por javascript
o 1º :

no style da div deve ser por

position:fixed;
top:[color="#FF0000"]50px[/color];
left:[color="#FF0000"]150px[/color];
// mude soh onde esta em vermelho para o valor em px ou em %(prefira em %)
estude CSS

para q ele funcione na pagina em q vc utilizar ele deve ter o tipo de documento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

pois esse metodo naum eh reconhecido pelo IE sem esse DOCTYPE ou outro DOCTYPE(naum testei)

o 2º metodo(javascript)

<script language="JavaScript">
		Microsoft = (document.all)? true:false
		function CalcularPosicao(){
			if(Microsoft){
				LarguraSite=760;
				document.body.onresize = function(){start();}
				document.body.onload = function(){start();}
				windowwidth = document.body.clientWidth;
				EspacoLivre=document.body.clientWidth-LarguraSite;
				posicaoCamada = EspacoLivre/2;
				Altura=screen.availHeight;
				Largura=screen.availWidth;
			}
			else{
				LarguraSite=780;
				window.onresize = function(){start();}
				window.onload = function(){start();}
				windowwidth = window.innerWidth;
				EspacoLivre=window.innerWidth-LarguraSite;
				posicaoCamada = EspacoLivre/2;
				Altura=window.innerHeight;
				Largura=screen.availWidth;
			}
		}
		
		
		var ns6 = (!document.all && document.getElementById);
		var ie4 = (document.all);
		var ns4 = (document.layers);
		
		function getValuesByBrowser() {
			if (ns6) {
				this.vobj = new Object();
				this.vobj.topMargin = 150;
				this.vobj.slideTime = 1200;
				return this.vobj;
			} else if(ie4) {
				this.vobj = new Object();
				this.vobj.topMargin = 100;
				this.vobj.slideTime = 1200;
				return this.vobj;
			} else if(ns4) {
				this.vobj = new Object();
				this.vobj.topMargin = 150;
				this.vobj.slideTime = 1200;
				return this.vobj;
	   	}
		}
		
		window.onerror = null;
		var topMargin = getValuesByBrowser().topMargin;
		var slideTime = getValuesByBrowser().slideTime;
		
		function layerObject(id,left) {
			if (ns6) {
				this.obj = document.getElementById(id).style;
				this.obj.left = 200;
				this.obj.width = 163;
				return this.obj;
			} else if(ie4) {
				this.obj = document.all[id].style;
				this.obj.left = 200;
				this.obj.width = 169;
				return this.obj;
			} else if(ns4) {
				this.obj = document.layers[id];
				this.obj.left = 200;
				this.obj.width = 163;
				return this.obj;
	   	}
		}
		function layerSetup() {
			floatLyr = new layerObject('divflutuante', posicaoCamada);
			window.setInterval("main()", 10)
		}
		function floatObject() {
			if (ns4 || ns6) {
				findHt = window.innerHeight;
			} 
			else if(ie4) {
				findHt = document.body.clientHeight;
	   			}
		} 
		function main() {
			if (ns4) {
				this.currentY = document.layers["divflutuante"].top;
				this.scrollTop = window.pageYOffset;
				mainTrigger();
			}
			else if(ns6) {
				this.currentY = parseInt(document.getElementById('divflutuante').style.top);
				this.scrollTop = scrollY;
				mainTrigger();
			} else if(ie4) {
				this.currentY = divflutuante.style.pixelTop;
				this.scrollTop = document.body.scrollTop;
				mainTrigger();
			   }
		}
		function mainTrigger() {
			var newTargetY = this.scrollTop + this.topMargin;
			if ( this.currentY != newTargetY ) {
				if ( newTargetY != this.targetY ) {
					this.targetY = newTargetY;
					floatStart();
				}
				animator();
	   		}
		}
		function floatStart() {
			var now = new Date();
			this.A = this.targetY - this.currentY;
			this.B = Math.PI / ( 2 * this.slideTime );
			this.C = now.getTime();
			if (Math.abs(this.A) > this.findHt) {
				this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
				this.A = this.A > 0 ? this.findHt : -this.findHt;
			}
			else {
				this.D = this.currentY;
	   		}
		}
		function animator() {
			var now = new Date();
			var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
			newY = Math.round(newY);
			if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
				if ( ie4 )document.all.divflutuante.style.pixelTop = newY;
				if ( ns4 )document.layers["divflutuante"].top = newY;
				if ( ns6 )document.getElementById('divflutuante').style.top = newY + "px";
			 }
		}
		function start() {
			CalcularPosicao();
			if(ns6||ns4) {
				pageWidth = innerWidth;
				pageHeight = innerHeight;
				layerSetup();
				floatObject();
			}
			else if(ie4) {
				pageWidth = document.body.clientWidth;
				pageHeight = document.body.clientHeight;
				layerSetup();
				floatObject();
		   }
		}
		start();
	</script>

Sua div deve ter id =

divflutuante"

e o z-index dela ser maior do q d todos os elementos da pagina

para mudar as posiçoes da div como left,top edite essa parte do codigo:

function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = 200;
this.obj.width = 163;
return this.obj;
} else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = 200;
this.obj.width = 169;
return this.obj;
} else if(ns4) {
this.obj = document.layers[id];
this.obj.left = 200;
this.obj.width = 163;
return this.obj;
}

observe q tem 3 posiçoes sendo uma para internet explorer outra pra netscape 4 e mozilla e outra para netscape 6
verifique q c vc coloca as msm posiçoes para os 3 e visualizar nos 3 ver a diferenças

#1 kamuswar

#2 zerocool

1 user(s) are reading this topic

Div Flutuante

#1 kamuswar

#2 zerocool

1 user(s) are reading this topic

Entrar