Foros del Web » Programando para Internet » Javascript »

div movible

Estas en el tema de div movible en el foro de Javascript en Foros del Web. buenas geni@s. tengo el siguiente menú estático es una capa. ------------------------------------------------------------------------ | opcion1 | opcion 2 | opcion 3 | opcion 4 | opcion 5 ...
  #1 (permalink)  
Antiguo 29/05/2003, 08:42
Avatar de davidvamo  
Fecha de Ingreso: diciembre-2001
Ubicación: Barcelona '92
Mensajes: 106
Antigüedad: 23 años
Puntos: 0
Pregunta div movible

buenas geni@s.

tengo el siguiente menú estático es una capa.

------------------------------------------------------------------------
| opcion1 | opcion 2 | opcion 3 | opcion 4 | opcion 5 |
------------------------------------------------------------------------

pero ahora me han dicho que como la página tiene scroll pues que el usuario no sabrá que hacer y quieren que este menu se mueva encima de la página de arriba a abajo en función de si se mueve o no el scroll.

alguien sabe como puedo conseguir este efecto.

gracias.
  #2 (permalink)  
Antiguo 29/05/2003, 17:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Qué tal,

si te he entendido bien, quizás esto te sirva


<script language="JavaScript">
function posicion()
{
if(navigator.appName=="Netscape")
{var scrollarriba=window.pageYOffset;}
else
{var scrollarriba=document.body.scrollTop;}
var posarriba=scrollarriba;
document.getElementById('menu').style.top=posarriba;
pepe=window.setTimeout('posicion()',50)
}
posicion()
</script>

Donde dice menu debes cambiarlo por el id de la capa que contiene a tu menú.

Donde está el 50 indica que cada 50 milisegundos mueva la capa a su posición. Si quieres que haga movimientos más rápidos reduce ese número.

saludos
  #3 (permalink)  
Antiguo 30/05/2003, 02:49
Avatar de davidvamo  
Fecha de Ingreso: diciembre-2001
Ubicación: Barcelona '92
Mensajes: 106
Antigüedad: 23 años
Puntos: 0
no me funciona. me podrias hacer un ejemplo muy básico por favor.

gracias.
  #4 (permalink)  
Antiguo 30/05/2003, 02:54
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Claro, mira aquí tienes el ejemplo
  #5 (permalink)  
Antiguo 30/05/2003, 03:06
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Hola, tunait.

Yo tenía algo parecido, pero no conseguía que funcionara en Nescafé. Hice un montón de pruebas y de combinaciones y ahora vas tú y lo soluciones en unas pocas líneas de código. Estarás contenta ¿no?

Saludos,
  #6 (permalink)  
Antiguo 30/05/2003, 03:13
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
buen día Javier,

caramba, de haberlo sabido....

Pues lo tengo hecho (algo más complejo) hace yá algún tiempo, es más, creo que alguna otra vez lo puse en otro mensaje en donde pedían lo mismo.
Cita:
JavierB Says:
Estarás contenta ¿no?
Po zí

Un saludo
  #7 (permalink)  
Antiguo 30/05/2003, 04:38
Avatar de davidvamo  
Fecha de Ingreso: diciembre-2001
Ubicación: Barcelona '92
Mensajes: 106
Antigüedad: 23 años
Puntos: 0
oooooolé

que soys buen@s. por fin lo he conseguido.

muchisimas gracias a tod@s.

hasta la proxima.

Malditos Combos !!!!

¿porque la capa de titulo se me pone por debajo del combo y por delante de los inputs?

he estado jugando con el valor z-index, pero siguen pasando de mi .

os paso el código haber si encontrais el fallo que no veo yo.
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
title>menu movible</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
style>
        
#cpconductor
        
{
            
position:absolute;
            
color:green;
            
border-colorTeal;
            
border-width1px;
            
border-stylesolid;
            
visibilityvisible;
            
top=60px;
            
width100%;
            
z-index:1;
        }
</
style>
</
head>

<
body>
<!-- 
CAPA DATOS CONDUCTOR -->
<
div id="cpconductor">
    <
form name="frmconductor">
        <
table width="100%" cellspacing=1 cellpadding=2 border=0 align="center">
            <
tr><td height="5"></td></tr>
            <
tr>
                <
td class="txtnavy8b" align="right">Fecha Nacimiento : </td>
                <
td class="txtnavy8">
                        &
nbsp;<input name="FNac_conductor" maxlength="10" size="10" onKeyPress="return acceptNum('F', event, this)" value="<#Tme_DFPNAC>">
                </
td>
                <
td class="txtnavy8b" align="right">Estado Civil : </td>
                <
td class="txtnavy8">
                    &
nbsp;
                    <
select name="estado_civil" size="1">
                        <
option>1</option>
                        <
option>2</option>
                    </
select>
                </
td>
                <
td class="txtnavy8b" align="right">Sexo : </td>
                <
td class="txtnavy8">
                        &
nbsp;
                    <
select name="sexo" size="1">
                        <
option>1</option>
                        <
option>2</option>
                    </
select>
                </
td>
            </
tr>
            <
tr>
                <
td class="txtnavy8b" align="right">Fecha Carnet : </td>
                <
td class="txtnavy8">
                        &
nbsp;<input name="FCarnet_conductor" maxlength="10" size="10" onKeyPress="return acceptNum('F', event, this)" value="<#Tme_DFPPC>">
                </
td>
                <
td class="txtnavy8b" align="right">Código Postal : </td>
                <
td class="txtnavy8">
                        &
nbsp;<input name="cod_postal" maxlength="5" size="5" onKeyPress="return acceptNum('', event, this)" value="<#Tme_NCP>" onblur()="Poblacion();">
                        <
a href="#" onclick="Poblacion()"><img src="images/iconos/buscar.gif" width=15 height=15 alt="Buscar Población" border="0"></a>
                </
td>
                <
td class="txtnavy8b" align="right">Población : </td>
                <
td class="txtnavy8">
                    <
iframe name="ipoblacion" frameborder="0" height="30px" align="middle" scrolling="No" src="../../scripts/autos.exe/escoger_pob"></iframe>
                </
td>
            </
tr>
            <
tr><td height="20"></td></tr>
        </
table>



        <!-- 
Formulario conductor Ocasional -->
        <
table width="100%" border=0 cellspacing=0 cellpadding=0>
            <
tr>
                   <
td class="txtblanco7b" background="images/bordes/cabeceraexpedientes2.gif" height="14" width="150">&nbsp;Conductor Ocasional</td>
                <
td></td>
            </
tr>
            <
tr><td bgcolor="teal" colspan="2" heigth="1"></td></tr>
        </
table>
        <
table width="100%" cellspacing=1 cellpadding=2 border=0>
            <
tr><td height="5"></td></tr>
            <
tr>
                <
td class="txtnavy8b" rowspan="2" align="center" width="300">
                    <
select name="cond_ocasional" size="1" onchange="CbConductorOcasional(document.frmconductor)">
                        <
option>1
                        
<option>2
                    
</select>
                </
td>
                <
td class="txtnavy8b" align="right">Fecha Nacimiento : </td>
                <
td class="txtnavy8">
                        &
nbsp;<input name="FNac_cond_oca" maxlength="10" size="10" onKeyPress="return acceptNum('F', event, this)" value="<#Tme_DFSNAC>">
                </
td>
            </
tr>
            <
tr>
                <
td class="txtnavy8b" align="right">Fecha Carnet : </td>
                <
td class="txtnavy8">
                        &
nbsp;<input name="FCarnet_cond_oca" maxlength="10" size="10" onKeyPress="return acceptNum('F', event, this)" value="<#Tme_DFSPC>">
                </
td>
            </
tr>
            <
tr><td height="20"></td></tr>
        </
table>
    </
form>
</
div>
<
div id="menu" style="position:absolute; width:100%; z-index:5; "
  <
form>
    <
table width="100%" align="center" cellspacing="0" cellpadding="2" border="1" bordercolordark="White" bordercolorlight="White">
      <
tr>
          <
td bordercolor="Teal" bgcolor="Teal" class="txtblanco8b" align="center">DATOS DEL CONDUCTOR</td>
          <
td bordercolor="Teal" encima="(this)" onmouseout="fuera(this)" bgcolor="#DDEEDD" class="txtverde8" align="center">
            <
a href="#" onclick="ComprobarCapa(2,layers['cptitulo02'].style.visibility=='visible');">
              
DATOS DEL VEHICULO
            
</a>
          </
td>
          <
td bordercolor="Teal" encima="(this)" onmouseout="fuera(this)" bgcolor="#DDEEDD" class="txtverde8" align="center">
            <
a href="#" onclick="ComprobarCapa(3,layers['cptitulo03'].style.visibility=='visible');">
              
BONIFICACIONES
            
</a>
          </
td>
          <
td bordercolor="Teal" encima="(this)" onmouseout="fuera(this)" bgcolor="#DDEEDD" class="txtverde8" align="center">
            <
a href="#" onclick="ComprobarCapa(4,layers['cptitulo04'].style.visibility=='visible');ValidarFormulario();">
              
TARIFAS
            
</a>
          </
td>
          <
td bordercolor="Teal" encima="(this)" onmouseout="fuera(this)" bgcolor="#DDEEDD" class="txtverde8" align="center">
            <
input type="Button" name="btfiguras" class="txtNavy8" disabled value="FIGURAS">
          </
td>
      </
tr>
      <
tr><td height="20"></td></tr>
    </
table>
  </
form>
</
div>
<
p>
  <
script language="JavaScript">
function 
posicion()
{
if(
navigator.appName=="Netscape")
{var 
scrollarriba=window.pageYOffset;}
else
{var 
scrollarriba=document.body.scrollTop;}
var 
posarriba=scrollarriba;
document.getElementById('menu').style.top=posarriba;
pepe=window.setTimeout('posicion()',50)
}
posicion()
</script>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html> 

gracias por mirarlo.
  #8 (permalink)  
Antiguo 31/05/2003, 09:27
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
davidvamo,

es una cruzada perdida lo de las capas bajo los combos, al menos en versiones de Explorer inferiores, no recuerdo si a la 5.5 o a la 6.0.

A partir de cierta versión yá le valen los z-index, pero no antes.

Quédate tranquilo en que, al menos, los que usen últimas versiones lo verán bien

saludos
  #9 (permalink)  
Antiguo 02/06/2003, 01:54
Avatar de davidvamo  
Fecha de Ingreso: diciembre-2001
Ubicación: Barcelona '92
Mensajes: 106
Antigüedad: 23 años
Puntos: 0
uffff menos mal porque mis jefes son unos puñetitas !!!!

gracias por la aclaración tunait.
  #10 (permalink)  
Antiguo 07/05/2006, 20:10
Avatar de wcfenix  
Fecha de Ingreso: agosto-2004
Ubicación: Lima
Mensajes: 168
Antigüedad: 20 años, 3 meses
Puntos: 0
Excelentes lineas! Gracias Tunait
__________________
"No te preocupes si no funciona bien. Si todo estuviera correcto, serías despedido de tu trabajo" - Ley de mosher
Blog [ http://www.tecnoaventuras.com ]
  #11 (permalink)  
Antiguo 12/06/2007, 11:43
 
Fecha de Ingreso: junio-2007
Mensajes: 1
Antigüedad: 17 años, 6 meses
Puntos: 0
Re: div movible

Ese maravilloso bug está arreglado en el IE7...
Para solucionarlo en versiones anteriores la única opción que conozco es agregar un iframe que quede "debajo" del div... donde el mismo tenga el mismo tamaño y posición del div:

<iframe id='frameSoporte' frameborder="0" style="position:absolute">
</iframe>
<div style="position:absolute"></div>

Saludos
  #12 (permalink)  
Antiguo 12/06/2007, 12:26
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1.289
Antigüedad: 19 años, 2 meses
Puntos: 3
Re: div movible

a ver a ver, dicen que el error de que los combos se ponen por encima de otros elementos ya como un DIV ya esta corregido en el IE7?
__________________
Wow! No se que decir...
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




La zona horaria es GMT -6. Ahora son las 17:05.