Autodesplazamiento dentro de <div>

Martin2006 · #1 (**permalink**) 11/04/2009, 14:40

Hola a todos, nuevamente yo con mis dudas, quisiera saber si es posible con un javascript (de lo cual se muy poco por cierto) puedo lograr que en mi div donde tengo 5 menuselect al llegar al 3er select se mueva automaticamente el scroll horizontal y me muestre el 4 selec y cuando este en el 4 el 5 y asi sucesivamente.

Aca les dejo el div q utilizo y los menu select, el tema es eso mismo, que no logro q se desplace cuando llego al 3er select y solo puedo hacerlo corriendo la barra de navegacion, pero no es lo que quiero.

desde ya muchas gracias.

<html>
<body>
<div style="width:540px; height:250px; overflow:auto; clear:both; text align: center; margin :auto; caption-side:right">
<table align="center" width="790" border="0">
<tr>
<td align="center" style="width:185px">
<select name="subcategorias1" size="10" id="subcategorias1">
<option value="0" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="1" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
</select>

</td>
<td align="center" width="182">

<select name="subcategorias1" size="10" id="subcategorias1">
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>

</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias2" id="subcategorias2">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias3" id="subcategorias3">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias4" id="subcategorias4">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

</tr>
</table>

</div>
</body>
</html>

Martin2006 · #2 (**permalink**) 12/04/2009, 09:59

alguien q me de una manito por favor.

Panino5001 · #3 (**permalink**) 12/04/2009, 10:18

Qué significa "al llegar"? cuando el mouse se coloca encima, cuando se selecciona algún valor de ese select? Y qué pasa si habiendo avanzado, quiere retrocederse para ver un select que ya ha quedado oculto?
Quizá te sirva alguna de las respuestas que di en este post: http://www.forosdelweb.com/f13/div-c...zontal-687548/

Martin2006 · #4 (**permalink**) 12/04/2009, 10:44

Hola y gracias por la respuesta, la idea seria centrar el Select, asi podre ver el select siguiente y el anterior.

No se si se entiende? Me gustaria q si llego al 3er select este se centre y si paso al 4to select tambien se centre.

Desde ya muchas gracias

Martin2006 · #5 (**permalink**) 12/04/2009, 10:56

Esta genial tu ejemplo, voy a tratar de ver ahora como meto mi div con los select adentro de tu ejemplo.

Martin2006 · #6 (**permalink**) 13/04/2009, 16:43

Alguna otra idea?. No puedo colocar los selects en tu ejemplo. La idea seria al hacer click con el mouse en el 3er select este se desplace a la izquierda y aparezca el 4to select.

Bueno si alguien me da una manito le voy a agradecer. gracia

Martin2006 · #7 (**permalink**) 08/07/2009, 17:05

Hola de nuevo, reavivo este post para ver si alguien tiene alguna idea de como Solucionar el problema.

El tema es asi, Lo explico Nuevamente.

Tengo 5 Menuselect dependientes, select 1, select 2, select 3 , select 4 y select 5.

Cada select tiene un ancho de 300px y en la pagina al cargarla se ven los 3 primeros y moviendo el scroll HORIZONTAL veo los 2 restantes.

Lo que quiero lograr es que al SELECCIONAR una OPCION del Select 3 éste se desplace al Medio y se vea el 4 select de Opciones y obviamente se ocultaria el 1er select. Luiego al sSELECCIONAR una opcion del 4to select se desplace éste al medio y se vea el 5to Select.

Si alguien me da una manito por favor le agradeceria.

deirdre · #8 (**permalink**) 08/07/2009, 19:18

Hola Martin2006

Creo que sería mejor que pusieras tu código completo (desde <html> hasta </html>), así podríamos hacer un copia-pega rápido y probar tu problema, con la intención de buscar una solución.

Bye

Martin2006 · #9 (**permalink**) 09/07/2009, 10:20

oks ahi la hago, gracias

Martin2006 · #10 (**permalink**) 09/07/2009, 10:35

Fijate q aca se ve claramente, Quedan los 5 Menuselect y se ven 3, lo que quiero es q el scroll horizontal se desplace automaticamente cuando seleccione el 3er Selec.

Es como si Tubiese 5 select anidados de Pais, Provincia, Ciudad, Barrio y Calle. Yo voy seleccionando y no quiero q el usuario corra la barra, sino que se corra sola.

<html>
<body>
<div style="width:540px; height:250px; overflow:auto; clear:both; text align: center; margin :auto; caption-side:right">
<table align="center" width="790" border="0">
<tr>
<td align="center" style="width:185px">
<select name="subcategorias1" size="10" id="subcategorias1">
<option value="0" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="1" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
</select>

</td>
<td align="center" width="182">

<select name="subcategorias1" size="10" id="subcategorias1">
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>
<option value="2" selected="Selecciona Subcategoria">Selecciona Subcategoria</option>

</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias2" id="subcategorias2">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias3" id="subcategorias3">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

<td align="center" style="width:185px">

<select size="10" name="subcategorias4" id="subcategorias4">
<option value="0" selected>Selecciona Subcategoria</option>
</select>

</td>

</tr>
</table>

</div>
</body>
</html>

Martin2006 · #11 (**permalink**) 09/07/2009, 14:10

Bueno chicos, a alguien se le ocurre algo ?

deirdre · #12 (**permalink**) 09/07/2009, 18:46

Hola Martin2006

Creo que con esto puedes resolver el salto automático que necesitas:

Código HTML:

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

<head>
<meta http-equiv="Content-Language" content="es" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Para Martin2006 (forosdelweb.com)</title>
<style type="text/css">
td {
	width: 175px;
}
.ancho {
	width: 175px;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center
}
select {
	border: 1px solid #484848;
}
</style>
</head>

<body>
<p>Selección con scroll por marcadores</p>
<p>Probado en ie6, ie7, ie8, ff2, ff3 y opera 9.6</p>
<div style="width:532px; height:280px; overflow:auto; clear:both; text-align: center; margin: auto;">
<table border="0" style="border-collapse: collapse;">
	<tr>

		<td>
			<a name="cero"></a>
			<select name="subcategorias1" size="10" id="subcategorias1" class="ancho">
			<option value="0">Selección 1</option>
			<option value="1">Otra selección</option>
			<option value="2">Otra selección</option>
			</select>
		</td>

		<td>
			<a name="uno"></a>
			<select name="subcategorias2" size="10" id="subcategorias2" class="ancho">
			<option value="0">Selección 2</option>
			<option value="1">Otra selección</option>
			<option value="2">Otra selección</option>
			</select>
		</td>


		<td>
			<a name="dos"></a>
			<div onclick="location.href='#cuatro';" style="display: block;">
			<select size="10" name="subcategorias3" id="subcategorias3" class="ancho">
			<option value="0">Selección 3</option>
			<option value="1">Otra selección</option>
			<option value="2">Otra selección</option>
			</select>
			</div>
		</td>

		<td>
			<a name="tres"></a>
			<div onclick="location.href='#cinco';" style="display: block;">
			<select size="10" name="subcategorias4" id="subcategorias4" class="ancho">
			<option value="0">Selección 4</option>
			<option value="1">Otra selección</option>
			<option value="2">Otra selección</option>
			</select>
			</div>
		</td>

		<td>
			<a name="cuatro"></a>
			<select size="10" name="subcategorias5" id="subcategorias5" class="ancho">
			<option value="0">Selección 5</option>
			<option value="1">Otra selección</option>
			<option value="2">Otra selección</option>
			</select>
		</td>

		<td><p>&nbsp;</p><!--esta celda vacía es necesaria para albergar el marcador 5 -->
			<a name="cinco"></a>
		</td>

</tr>
</table>


</div>
</body>
</html>

Comenta si es lo que buscas.

Bye

Martin2006 · #13 (**permalink**) 10/07/2009, 04:19

Hola deirdre desde ya muchisimas Gracias, hace varios meses veni buscando algo asi, estube probando con todo, hasta l a funcion Scroointoviwe y mas o menos me habia funcionado pero no en FF ni Opera, esta solucion Tuya FUNCIONO de 10 en TODOS.

Te agradezco Nuevamente a vos y a toda la comunidad que me dio una manito. Muchisimas Gracias. Saludos y espero no molestarlos mas :)

deirdre · #14 (**permalink**) 10/07/2009, 09:28

De nada Martin2006

Si se puede, se ayuda. Lo hacemos por el gusto de resolver un problema y ofrecer ayuda, nada más.

Bye