[Aporte] Simple boton flotante a la izquierda

[Vun]

Tras un rato buscando entre varios scripts, encontre uno, lo simplifique al maximo y asi queda el tipico boton a la izquierda que permanece aunque movamos la barra de scroll, sirve para IE+FF+CHROME. Pega en el body y listo:

Código HTML:

<script type="text/javascript">
<!--

var timer = null;
var floatHeight  = 80 + 3; //added margin
var floatWidth   = 50 + 3; //added margin

var obj = null;
var IE=0, NS=0;

	// Initializing function, must be called on onLoad event in BODY tag

function init()
{
    	 // get the object as per the browser
    obj = document.layers ? document.layers["float"] :		 
    document.getElementById ?  document.getElementById("float").style :
    document.all["float"].style;
								
         // Detect the browser
    IE  = (-1 != navigator.appVersion.indexOf("MSIE")) ? 1 : 0;
    NS  = ("Netscape" == navigator.appName) ? 1 : 0;

    positionFloat(1); 	 // position initially
    
         // repositioning the layer	
    if(IE)
    { 
         self.onscroll = function(){ positionFloat(1); }
         self.onresize = function(){ positionFloat(1); }   //when window is resized
    }
    else if(NS)
    { timer = setInterval("positionFloat(4)",10);}
}
 
	// Function which actually positions the layer 	

function positionFloat(iPos)
{
   if(IE)          // IE specific code
   {
		obj.left = document.body.scrollLeft;
		obj.top =  document.body.scrollTop+200;

   }
   else if(NS)     // Netscape specific code
   {
		obj.left = self.pageXOffset;
		obj.top =  self.pageYOffset+200;
   }
}
// -->
</script>


<div style="position:absolute; height:70px; width:40px; top:1; visibility:visible; z-index:999;" ID="float">
   <a href="http://www.facebook.com"><img src="http://triplew.rincondelmardc.com/facebook_button.png" border="0" height="40" width="40"></a>		
</div>
<script type="text/javascript">
init();
</script> 

Si lo quieren mas arriba o abajo cambien ese +200 por otra cantidad, ala, taulego!

[Osdiwe]

Una pregunta.

¿Este código realiza lo mismo que la propiedad "position:fixed;" de CSS pero lo aceptan todos los navegadores independientemente de la versión? ¿O realiza algo direfente?

[Vun]

Que yo sepa con CSS puedes posicionar una capa, pero no hacer que al mover la barra de scroll dicha capa permanezca en el mismo sitio, si alguien sabe hacerlo mas sencillo se lo agradeceria!

[Osdiwe]

Por lo que tengo entendido si en una capa u otro elemento de bloque le pones position:fixed; en el CSS y indicas la posición con left y top, puedes posicionarla donde quieras respecto al navegador y que permanezca en esa posición aún cuando haces scroll.

Lo único que dudaba era en qué versiones de navegador era aceptado, por eso preguntaba si con el código javascript funcionaba en todas las versiones.

Prueba a usar un código como el siguiente a ver si nos referimos al mismo efecto:

CSS:

Código:

#fijado {
    position:fixed;
    right:0px;
    bottom:0px;
}

HTML

Código:

<div id="fijado">Contenido</div>

El div debería aparecer siempre abajo a la derecha del navegador independientemente del height total de la página.

Con un poco de imaginación podríamos crear una barra inferior a la web (tipo facebook).

[Vun]

Pues si, ese era el efecto que queria, ¿se nota que soy un inutil del CSS no? jejeje.

Aunque ahora que lo pruebo tu codigo no funciona para IE8, aunque fijo que es cuestion de buscar alguna propiedad distinta, saludos

[Osdiwe]

Precisamente hay otro post del mismo tema en el que he participado y Panino5001 ha aportado una solución para los navegadores que no interpreten correctamente el position:fixed;

Te dejo el enlace:

[URL="http://www.forosdelweb.com/f13/barra-flotante-762993/"]http://www.forosdelweb.com/f13/barra-flotante-762993/[/URL]

Estoy a punto de llegar al mensaje 100, a ver si alguien me deja algo de karma