Foros del Web - Ver Mensaje Individual

furoya · #10 (**permalink**) 19/08/2008, 14:38

(... viene del mensaje anterior.)

A partir de aquí ya no se estira la caja, sino que se desplaza el contenido.

Con barras de desplazamiento

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>"ESCROLEA".</title>

<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
div.escroleable {font-size:3em; width:80%; height:1.2em; color: #000000; background-color:#ffffff; margin:10px; border: 0.1em #ff0000 solid; overflow: hidden; }
div.escroleable:hover {overflow:auto; height:1.5em; }

</style>
</head>
<body>
<h2>Muestra barras de desplazamiento al pasar el puntero. (Op9.5 / FF3.0 / IE7.0)</h2>

<div class=escroleable>>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<</div>

</body>
</html>

Con la ruedita

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>RUEDA.</title>
<script type="text/javascript">
var T00, T01, ancho00, ancho01;
var arrastra = 0;

function medidas(T00) {
T01 = T00.firstChild;
ancho01 = T01.offsetWidth;
ancho00 = T00.offsetWidth;
var alto = T01.offsetHeight;

T00.style.height = alto +"px";
T00.style.position = "relative";
T01.style.position = "absolute";
}

function ruedaOpIE(T00){
arrastra = parseInt(T01.style.left);

if (event.wheelDelta >= 120){
arrastra = (arrastra < ancho00)? arrastra + 20 : (ancho01*-1);
document.title = arrastra;
}

else if (event.wheelDelta <= -120){
arrastra = (arrastra < (ancho01*-1))? ancho00 : arrastra - 20;
document.title = arrastra;
}

T01.style.left = arrastra +"px";
}

</script>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
tt {font-size: 100%; }
#miDIV00 {font-size: 2em; width: 80%; color: #000000; background-color: #ffffff; border: 0.2em #ff0000 solid; overflow: hidden; }

</style>
</head>
<body>
<h2>Rueda el contenido del <tt>div</tt>. (Op9.5 / IE7)</h2>
<strong>Para <em>mouse</em> (rat&oacute;n) con ruedita.</strong>

<div id="miDIV00" onmouseover="medidas(this)" onmousewheel="ruedaOpIE(this)" ><div id="miDIV01" style="left:0">FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_DESPLAZAR_A_IZQUIERDA_O_DERECHA_CON_LA_RUEDA_DEL_RAT&Oacute;N_Y_VER_TODO_EL_CONTENIDO</div></div>

<strong><u>Nota</u> : en IE7 se cuelga al usar el Zoom.</strong>
</body>
</html>

Arrastrando

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>ARRASTRA.</title>
<script type="text/javascript">
var puntoX, puntoY, despl, coordX, texto, coordXdesp;
var arrastra = 0;

function alturas(T00) {

texto = T00.firstChild;
var alto = texto.offsetHeight;

T00.style.height = alto +"px";
T00.style.position = "relative";
texto.style.position = "absolute";

}

function mueve(e, T00){

puntoX = (document.all) ? e.x : e.pageX; 

coordXdesp = puntoX - (coordX - despl);

if(arrastra == 1)texto.style.left = coordXdesp +"px";

document.title = puntoX + " "+ despl + " "+ coordXdesp;

}

function mide0(T01){
arrastra = 1;
T01.style.cursor = (T01.style.cursor == "-moz-grab")? "-moz-grabbing" : "move";

despl = parseInt(T01.style.left);
coordX = puntoX;

document.title = puntoX + " "+ despl + " "+ coordXdesp +" "+T01.style.cursor;
}

function mide1(T01){
arrastra = 0;

T01.style.cursor = (T01.style.cursor != "move")? "-moz-grab" : "move";

document.title = puntoX + " "+ despl + " "+ coordXdesp +" "+T01.style.cursor;

}

</script>
<style type="text/css">

body {color: #ffffff; background-color: #000000; font-size: 100%; }
tt {font-size: 100%; }
#miDIV00 {font-size: 2em; width: 80%; color: #000080; background-color: #ffffff; border: 0.2em #ff0000 solid; overflow: hidden; }
#miDIV00 #miDIV01 {-moz-user-select: none; cursor: move; }

</style>
</head>
<body>
<h2>Arrastra el contenido del <tt>div</tt>. (Op9.5 / FF3 / IE7)</h2>
<b>Esta versi&oacute;n no permite seleccionar.</b>

<div id="miDIV00" onmouseover="alturas(this)" onmousemove="mueve(event, this)"><div style="cursor:-moz-grab; left:0; " id="miDIV01" onmouseout="mide1(this)" onmouseup="mide1(this)" onmousedown="mide0(this)" unselectable="on" >FRASE_MUY_LARGA_QUE_SIRVE_DE_EJEMPLO_PARA_ARRASTRAR_A_IZQUIERDA_O_DERECHA_Y_VER_TODO_EL_CONTENIDO</div></div>

</body>
</html>

Y uno muy triste

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>INPUT.</title>
<style type="text/css">

body {color: #ffffff; background-color:#000000; font-size:100%; }
#miINP1 {font-size:3em; wi dth:80%; color: #000000; back ground-color:#ffffff; margin:10px; border: 0.1em red solid; }

</style>

</head>
<body>

<h2>Texto en un <tt>input</tt>. (Op9.5 / FF3 / IE7)</h2>
<b><i>Bug</i> IE / Op : para desplazar hay que seleccionar el texto. Si se le quita <tt>readonly</tt> se puede editar.</b>

<input type=text readonly=readonly id="miINP1" value=">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ<">

</body>
</html>

Son todos borradores que actualicé para postear acá. Y son todos perfectibles. Están para destriparlos a gusto.