Foros del Web » Programando para Internet » Javascript »

De Scroll Vertical a Scroll Horizontal

 Estas en el tema de De Scroll Vertical a Scroll Horizontal en el foro de Javascript en Foros del Web. Mi duda es la siguiente, tengo un codigo que os facilito a continuación (Si os digo la verdad no se donde me lo facilitaron), necesito ...
  #1 (permalink)  
Antiguo 15/09/2004, 19:22
Avatar de Wel
Wel
 
Fecha de Ingreso: marzo-2003
Mensajes: 77
Antigüedad: 21 años, 1 mes
Puntos: 0
De Scroll Vertical a Scroll Horizontal
Mi duda es la siguiente, tengo un codigo que os facilito a continuación (Si os digo la verdad no se donde me lo facilitaron), necesito que se cambie lo que haga falta para que el scroll sea horizontal. Si no me entendeis ejecutar el codigo que os facilito y me comprendereis, GRACIAS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}

bw=new verifyCompatibleBrowser()

var speed=50
var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height: this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.e l.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}

function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}

function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}

var initialised;


function InitialiseScrollableArea (){
objContainer=new ConstructObject('ZonaListados')
objScroller=new ConstructObject('Listado','ZonaListados')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
</SCRIPT>
</HEAD>

<BODY onload="InitialiseScrollableArea();">
<TABLE width=100 height=100% Border=1 Align=Center Valign=Middle>
<TR><!-- BOTON DE SUBIR -->
<TD Width=100 Align=Center Valign=Middle Border=0>
<Div id=divUpControl name=Subir Align=Center Valign=Middle onMouseover="PerformScroll(-7);" onMouseout="CeaseScroll();">SUBIR</DiV>
</TD>
</TR>
<TR><!-- CONTENIDO DEL SCROLL -->
<TD Width=100 Height=100% Align=Center Valign=Middle Border=0>
<DIV id=ZonaListados style=" width: 100%; height: 100%; top: 0; left: 0; POSITION: relative; OVERFLOW: hidden;">
<DIV id=Listado style="width: 100%; POSITION: absolute; Visibility: Visible;">
<!-- CONTENIDO -->
a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>
a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>
a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>a</BR>
<!-- FIN CONTENIDO -->
</DIV>
</DIV>
</TD>
</TR>
<TR><!-- BOTON DE BAJAR -->
<TD Width=100 Align=Center Valign=Middle Border=0>
<Div id=divDownControl name=bajar Align=Center Valign=Middle onMouseover="PerformScroll(7);" onMouseout="CeaseScroll();">BAJAR</Div>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Última edición por Wel; 15/09/2004 a las 19:41
  #2 (permalink)  
Antiguo 03/09/2009, 14:39
 
Fecha de Ingreso: diciembre-2008
Ubicación: FL
Mensajes: 62
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: De Scroll Vertical a Scroll Horizontal
este codigo hace justo lo que quieres, espero que te sirva.
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divUpControl{
position:absolute;
width:46px;
left:16px;
top:254px;
z-index:1;
text-align: right;
height: 19px;
}
#divDownControl{
position:absolute;
width:39px;
left:82px;
top:252px;
z-index:1;
text-align: right;
height: 19px;
}
#divContainer{position:absolute; width:157px; height:200px; overflow:hidden; top:51px; left:10; clip:rect(0,320,240,0); visibility:visible}
#divContent{
position:absolute;
top:-13px;
left:1px;
width: 408px;
height: 283px;
}
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts


function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height: this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.e l.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.y
this.css.top=this.x
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts

</script>
</head>

<body bgcolor="999999" onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="select.gif" border="0" alt="<"></a></div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="select.gif" border="0" alt=">"></a></div>
<div id="divContainer">
<div id="divContent">
<br>
<p> brillanweb.com esto es una prueba bla bla fidsfifi jid jidjf 123 brillanweb.com
</p>
</div>
</div>
<!-- end absolutely positioned scrollable area object -->
</body>
</html>
  #3 (permalink)  
Antiguo 05/09/2009, 12:40
 
Fecha de Ingreso: diciembre-2008
Ubicación: FL
Mensajes: 62
Antigüedad: 15 años, 4 meses
Puntos: 2
Exclamación Respuesta: De Scroll Vertical a Scroll Horizontal
el anmterior tenia un erro este si esta bien.
--------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divUpControl{
position:absolute;
width:50px;
left:24px;
top:99px;
z-index:1;
text-align: right;
height: 70px;
}
#divDownControl{
position:absolute;
width:39px;
left:302px;
top:99px;
z-index:1;
text-align: right;
height: 50px;
}
#divContainer{
position:absolute;
width:304px;
height:130px;
overflow:hidden;
top:51px;
left:10;
/*clip:rect(0,320,240,0);*/
visibility:visible;
margin: 25px;
}
#divContent{
position:absolute;
width: 800px;
height: 127px;
overflow: visible;
bottom: 50px;
}
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts


function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollWidth=bw.ns4?this.css.document.width:th is.el.offsetWidth
this.clipWidth=bw.ns4?this.css.clip.width:this.el. offsetWidth
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.y
this.css.top=this.x
}

function MoveAreaDown(move){
if(this.y>-this.scrollWidth+objContainer.clipWidth){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts

</script>
</head>

<body bgcolor="999999" onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="i.png" border="0" alt="<"></a></div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="d.png" border="0" alt=">"></a></div>
<div id="divContainer">
<p><strong> brillanweb.com</strong>
</p>
<div id="divContent">
<img src="chicas.php_files/01012001042318pm.jpg">
<img src="chicas.php_files/01012001042458pm.jpg">
<img src="chicas.php_files/04092009064707pm.jpg">
<img src="chicas.php_files/21042009060925pm.jpg">
<img src="chicas.php_files/25012009015055am.jpg">
<img src="chicas.php_files/25012009015323am.jpg">
<img src="chicas.php_files/25012009021700am.jpg"> </div>
</div>
<p><strong> brillanweb.com</strong>
</p>
<!-- end absolutely positioned scrollable area object -->
</body>
</html>
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 18:51.