Scroll manipulado desde afuera

Phobos · #1 (**permalink**) 14/10/2003, 10:13

Hola
Tengo la siguiente inquietud.
en una pagina tengo un Iframe y mi idea es que desde fuera del Iframe osea mi pagina, mediante dos botones manipular el scroll del iframe.

Se podra hacer???

Ademas de ocultar la barra de scroll del iframe.

Saludos

furoya · #2 (**permalink**) 19/10/2003, 04:48

Hola Phobos :

Siempre que la página del iframe esté en tu servidor. No puedes manipular páginas con otro hostname.

Se me ocurre que este código lo puedes encontrar en cualquier "javascriptería", aunque no me parece algo muy práctico para hacer; ¿ por qué no usas las barras del marco ?. Los botones suenan bien; pero sólo 'suenan', en la vida real presentan sus problemas, el más obvio es la velocidad ( ¿ ya probaste desplazar todo un documento con los botones que hay a los extremos del scrollbar ? ); otro puede ser la ubicación relativa. Por ahora nos quedamos con éstos dos.

Hace poco tiempo participé en un tema donde Bravenap y Rafael postearon códigos interesantes, en ese caso para desplazar una imagen ampliada, pero creo que lo puedes adaptar a una página. La idea es crear una especie de pad con la forma y tamaño proporcional de tu página en el iframe, pero reducida; al mover el puntero sobre el pad, el documento real se va a desplazar a las mismas coordenadas, multiplicadas por el factor de ampliación, claro.

Te dejo un enlace al final.

Como un escript así se me hace complicado para escribirlo ( no sé si será la edad, pero me estoy volviendo demasiado vago ) posteo algo más parecido a lo que pides. Reemplacé los botones por mouseovers y mousedowns, y les dí tres velocidades con distintos tamaños de desplazamiento. Tú cámbialos a gusto.

Código:

<HTML>
<HEAD>
<TITLE> DESPLAZAR MARCO INTERNO.</TITLE>
<SCRIPT>
var pasoH=2;
var pasoV=4;
var despl,alto,ancho;

function arriba(vel){
despl=setInterval("marcoInt.scrollBy(0,-pasoV)",vel)
}
function izquierda(vel){
despl=setInterval("marcoInt.scrollBy(-pasoH,0)",vel)
}
function derecha(vel){
despl=setInterval("marcoInt.scrollBy(pasoH,0)",vel)
}
function abajo(vel){
despl=setInterval("marcoInt.scrollBy(0,pasoV)",vel)
}

function salto(a){
pasoH=(a==1) ? 300 : 2;
pasoV=(a==1) ? 240 : 4;
}
</SCRIPT>

<STYLE>
table.#direc TD{width:15px; height:15px; font:900 14px monospace; margin:0; text-align:center}
</STYLE>

</HEAD>

<BODY>
<H2>Desplaza contenido de <tt>iframe</tt> con botones.</H2>
Para IE5x FF1x.

<TABLE align=center cellpadding=0 cellspacing=0>
<TD>
<iframe src="bordescaracteres.htm" scrolling=no 
name=marcoInt id=marcoInt style="width:600px; height:300px; border:4px inset" ></iframe>
</TD>
<TD width=150 align=center>

<TABLE id=direc border=0 cellpadding=0 cellspacing=0><TR>
<TD colspan=3 rowspan=3> </TD>
<TD onmouseout="clearInterval(despl)" onmouseover="arriba(300)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:silver>&#9650;</TD>
<TD colspan=3 rowspan=3> </TD>
</TR><TR>
<TD onmouseout="clearInterval(despl)" onmouseover="arriba(100)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:gray>&#9650;</TD>
</TR><TR>
<TD onmouseout="clearInterval(despl)" onmouseover="arriba(10)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default>&#9650;</TD>
</TR><TR>
<TD onmouseout="clearInterval(despl)" onmouseover="izquierda(300)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:silver>&#9668;</TD>
<TD onmouseout="clearInterval(despl)" onmouseover="izquierda(100)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:gray>&#9668;</TD>
<TD onmouseout="clearInterval(despl)" onmouseover="izquierda(10)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default>&#9668;</TD>
<TD style="cursor:help; font:bold 14px sans-serif; color:blue" title=
"Mueva el puntero sobre las flechas para cambiar velocidad y dirección.
Pulse el botón en las flechas para desplazamientos mayores."> ?</TD>
<TD onmouseout="clearInterval(despl)" onmouseover="derecha(10)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default>&#9658;</TD>
<TD onmouseout="clearInterval(despl)" onmouseover="derecha(100)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:gray>&#9658;</TD>
<TD onmouseout="clearInterval(despl)" onmouseover="derecha(300)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:silver>&#9658;</TD>
</TR><TR>
<TD colspan=3 rowspan=3> </TD>
<TD onmouseout="clearInterval(despl)" onmouseover="abajo(10)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default>&#9660;</TD>
<TD colspan=3 rowspan=3> </TD>
</TR><TR>
<TD onmouseout="clearInterval(despl)" onmouseover="abajo(100)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:gray>&#9660;</TD>
</TR><TR>
<TD onmouseout="clearInterval(despl)" onmouseover="abajo(300)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
onmousedown="salto(1)" onmouseup="salto(0)" 
style=cursor:default;color:silver>&#9660;</TD>
</TR></TABLE>

</TD>
</TABLE>

</BODY>

</HTML>

Asegúrate de que el documento en el iframe sea lo bastante grande como para poder probar el alcance de los "botones". El código se muestra bien en 800×600.

saludos

furoya

http://www.forosdelweb.com/s57c8d849...msg148740.html