Cómo hacer un scroll
Me gustaría saber como hacer un scroll con dreamweaver en cuyo interior se ponga un texto y que cuando uno sitúe el ratón sobre la flecha de arriba del scroll el texto se desplace hacia arriba, y si uno pone el ratón sobre el scroll flecha de abajo, el texto se desplaza hacia abajo.
1 Respuesta
Respuesta de juanceer
1
Fijate si te sirve el script que esta en la siguiente pagina (no te lo envio por que es muy largo y no puedo pegarlo):
http://www.dhtmlcentral.com/script/script.asp?id=5
Copia el codigo correspondiente en el HEAD y en el BODY de una pagina en blanco, pruebalo y hazle las modificaciones que correspondan. Donde dice Down y Up, podes cambiarlo por imagenes y con el comportamiento onMouseOver lograr el mismo efecto. Ademas te recomiendo recorrer la pagina (no es mia) por q tiene buenos scripts.
http://www.dhtmlcentral.com/script/script.asp?id=5
Copia el codigo correspondiente en el HEAD y en el BODY de una pagina en blanco, pruebalo y hazle las modificaciones que correspondan. Donde dice Down y Up, podes cambiarlo por imagenes y con el comportamiento onMouseOver lograr el mismo efecto. Ademas te recomiendo recorrer la pagina (no es mia) por q tiene buenos scripts.
Ante todo darte las gracias, por la forma de hacer un scroll pero claro, el código que tiene no me entero de nada. Ya que está en Javascript y para mí es nuevo. Entonces no sé como colocar dos triangulitos a la derecha uno apuntando hacia arriba y otro hacia abajo. Con un texto al lado, que al darle a los botones arriba y abajo el texto se desplace.
Gracias de antemano.
Gracias de antemano.
Aca me tome el trabajito de retocar el codigo para que te sea mas sencillo, solo cambia el nombre y ruta de las imagenes para q te quede bien. Saludos y suerte.
Juanceer
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divControl {position:absolute; left:120px; top:190px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divCont {position:absolute; left:120px;top:250px; width:250px; height:150px; clip:rect(0px 250px 150px 0px);}
.clScroll {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/
//The speed of the timeout between each scroll.
timSpeed = 50
//The height of the container (change this when it scrolls to much or to little)
contHeight = 100
/*********************************************************************************
This is the object constructor function, which applies
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(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.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.top=b_gettop
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
//Getting the top for the top method
function b_gettop(){
var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
clearTimeout(scrollTim)
way = speed>0?1:0
if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top = (oScroll[active].top()+speed)+px
scrollTim = setTimeout("scroll("+speed+")",timSpeed)
}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
oScroll[active].css.visibility = "hidden"
active = num
oScroll[active].css.top = 0+px
oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
oScroll = new Array()
// You can add and remove scrollObjects here.
oScroll[0] = new makeScrollObj('divScroll1','divCont')
oScroll[0].css.left = 0+px
oScroll[0].css.top = 0+px
oScroll[0].css.visibility = "visible"
oControl = new makeScrollObj('divControl')
oControl.css.visibility = "visible"
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload = scrollInit;
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:250px; height:150px; z-index:1; left: 130px; top: 35px">
<div id="divControl" style="visibility: visible; left: 235px; top: 0px; background-color: #C8D7E8; layer-background-color: #C8D7E8; border: 1px none #000000; width: 11px; height: 150px">
<table width="11" border="0" cellspacing="0" cellpadding="0" height="150">
<tr valign="top">
<td><a href="#" onMouseOver="scroll(5)" onMouseOut="noScroll()" onClick="return false"><img src="DHTMLCentral_com%20-%20Dynamic%20HTML%20News_archivos/arrow_up.gif" width="11" height="12" border="0"></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr valign="bottom">
<td><a href="#" onMouseOver="scroll(-5)" onMouseOut="noScroll()" onClick="return false"><img src="DHTMLCentral_com%20-%20Dynamic%20HTML%20News_archivos/arrow_down.gif" width="11" height="12" border="0"></a></td>
</tr>
</table>
</div>
<div id="divCont" style="left: 0px; top: 0px">
<div id="divScroll1" class="clScroll" style="width: 235; left: 0; visibility: hidden">
This is "page" 1, here you place some content. You should place more content
then this or it won't scroll..blablablabl<br>
<br>
text text dummy texttext text dummy texttext text dummy text<br>
<br>
text text dummy text text text dummy text text text dummy text <br>
</div>
</div>
</div>
</body>
Juanceer
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divControl {position:absolute; left:120px; top:190px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divCont {position:absolute; left:120px;top:250px; width:250px; height:150px; clip:rect(0px 250px 150px 0px);}
.clScroll {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/
//The speed of the timeout between each scroll.
timSpeed = 50
//The height of the container (change this when it scrolls to much or to little)
contHeight = 100
/*********************************************************************************
This is the object constructor function, which applies
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(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.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.top=b_gettop
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
//Getting the top for the top method
function b_gettop(){
var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
clearTimeout(scrollTim)
way = speed>0?1:0
if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top = (oScroll[active].top()+speed)+px
scrollTim = setTimeout("scroll("+speed+")",timSpeed)
}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
oScroll[active].css.visibility = "hidden"
active = num
oScroll[active].css.top = 0+px
oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
oScroll = new Array()
// You can add and remove scrollObjects here.
oScroll[0] = new makeScrollObj('divScroll1','divCont')
oScroll[0].css.left = 0+px
oScroll[0].css.top = 0+px
oScroll[0].css.visibility = "visible"
oControl = new makeScrollObj('divControl')
oControl.css.visibility = "visible"
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload = scrollInit;
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:250px; height:150px; z-index:1; left: 130px; top: 35px">
<div id="divControl" style="visibility: visible; left: 235px; top: 0px; background-color: #C8D7E8; layer-background-color: #C8D7E8; border: 1px none #000000; width: 11px; height: 150px">
<table width="11" border="0" cellspacing="0" cellpadding="0" height="150">
<tr valign="top">
<td><a href="#" onMouseOver="scroll(5)" onMouseOut="noScroll()" onClick="return false"><img src="DHTMLCentral_com%20-%20Dynamic%20HTML%20News_archivos/arrow_up.gif" width="11" height="12" border="0"></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr valign="bottom">
<td><a href="#" onMouseOver="scroll(-5)" onMouseOut="noScroll()" onClick="return false"><img src="DHTMLCentral_com%20-%20Dynamic%20HTML%20News_archivos/arrow_down.gif" width="11" height="12" border="0"></a></td>
</tr>
</table>
</div>
<div id="divCont" style="left: 0px; top: 0px">
<div id="divScroll1" class="clScroll" style="width: 235; left: 0; visibility: hidden">
This is "page" 1, here you place some content. You should place more content
then this or it won't scroll..blablablabl<br>
<br>
text text dummy texttext text dummy texttext text dummy text<br>
<br>
text text dummy text text text dummy text text text dummy text <br>
</div>
</div>
</div>
</body>
me ha parecido muy bien tu colaboración. Aunque me gustaría saber como se programa en javascript para hacer cositas como estas. Te estoy muy agradecido. Muchísimas gracias.
