Foros del Web » Programando para Internet » Javascript »

Como poner un DIV siempre visible aunque bajes la barra de desplazamiento??

 Estas en el tema de Como poner un DIV siempre visible aunque bajes la barra de desplazamiento?? en el foro de Javascript en Foros del Web. para que entendais lo que os digo simplemente entrar en www.elmundodeportivo.es si bajais la barra de desplazamiento vereis como el Menú de la web baja ...
  #1 (permalink)  
Antiguo 25/09/2006, 12:40
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Como poner un DIV siempre visible aunque bajes la barra de desplazamiento??
para que entendais lo que os digo simplemente entrar en

www.elmundodeportivo.es

si bajais la barra de desplazamiento vereis como el Menú de la web baja a la misma velocidad siempre situándose en la parte alta de la página.

Tuve estudiando el código y así todo me lío bastante.

¿Cómo podrá hacerse??

Muchas gracias por adelantado
  #2 (permalink)  
Antiguo 25/09/2006, 17:16
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Complicado,eh????
  #3 (permalink)  
Antiguo 26/09/2006, 00:20
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 20 años
Puntos: 10
hola! q tal? yo uso algo parecido. a ver si te sirve.
Código: 
<script language="JavaScript">
function setVariables(){
if (navigator.appName == "Netscape") {
  v=".top=";
  dS="document.";
  sD="";
  y="window.pageYOffset";
}else{
  v=".pixelTop=";
  dS="";
  sD=".style";
  y="document.body.scrollTop";
}
}
function movimiento() {
  object="menu";
  yy=eval(y);
  eval(dS+object+sD+v+yy);
  setTimeout("moviment()",10);
}
</script>
en el evento onload del doby tienes q arrancar las funciones.:
Código HTML:
<body OnLoad="setVariables();movimiento();">
y dentro del body tienes q crear un Div
Código HTML:
<div id="menu" style="position:absolute; visibility:show;left:3px; top:70px; z-index:2;">
Con todo lo q tu quieras poner dentro.
</div>
prueba y dime q tal te ha ido...

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #4 (permalink)  
Antiguo 26/09/2006, 08:31
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Pues nose.... no me va. Yo pongo en Head lo primero, completo el body a la hora de llamar a las funciones, y luego en body pongo mismamente eso.

Y si bajo la barra de navegación el DIV se pierde para arriba y no se desplaza según bajo...
  #5 (permalink)  
Antiguo 27/09/2006, 12:52
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Bueno ahora quiero hacer algo como esto.

http://www.dynamicdrive.com/dynamici...staticmenu.htm

pero a mi no me sale. Os pongo a continuación el código con el q no me funciona.

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

</head>
<body>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">


<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>

</layer>
<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
<!-- pongo unos cuantos <p> para que se pueda bajar hacia abajo la web -->

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</body>
</html>
Última edición por roylugones; 27/09/2006 a las 13:00
  #6 (permalink)  
Antiguo 27/09/2006, 13:21
Avatar de deet  
Fecha de Ingreso: mayo-2005
Ubicación: Córdoba - Argentina
Mensajes: 269
Antigüedad: 19 años, 8 meses
Puntos: 1
Cita:
Iniciado por roylugones Ver Mensaje
Bueno ahora quiero hacer algo como esto.

http://www.dynamicdrive.com/dynamici...staticmenu.htm

pero a mi no me sale. Os pongo a continuación el código con el q no me funciona.

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

</head>
<body>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">


<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>

</layer>
<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
<!-- pongo unos cuantos <p> para que se pueda bajar hacia abajo la web -->

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
</body>
</html>
yo también estaba buscando algo parecido a lo que citaste en este mensaje, y por curiosidad entré al enlace que pusiste, copié el código en el dreamweaver lo publiqué y nada.

El problema es que dreamweaver y tal vez todos los programas, te agregan la etiqueta
Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
esto hace que no funcione el script, ya que en alguna parte del código no debe cumplir con el estandar w3c, pero si le quitas la primera etiqueta, todo funciona a la perfección.
Última edición por deet; 27/09/2006 a las 13:24 Razón: extender la respuesta
  #7 (permalink)  
Antiguo 27/09/2006, 13:25
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Anda pues si :D:D:D lo q pasa q eso es un problema, porque mi pagina la tengo q valide en 1.1 strict y es necesario q esté esa línea ahí.

Es todo un lio, nada sale a la perfección jeje
  #8 (permalink)  
Antiguo 27/09/2006, 14:13
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
Bueno jaja y ahora despues de todo esto.... ¿alguien sabe algun truquillo para que, sin tener que quitar el DOCTYPE del principio, funcione este script?
  #9 (permalink)  
Antiguo 29/09/2006, 02:14
 
Fecha de Ingreso: enero-2005
Mensajes: 150
Antigüedad: 20 años
Puntos: 1
me estoy matando a discurrir y nada
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:13.