Scroll window
Hola expertos,
estoy haciendo paginas y me salta un problema y no he sabido responderlo.
quiero hacer una pagina que esta enmarcada por tablas y en una de las celdas, que es la que lleva el texto de descripcion del producto, tiene mucho texto y quiero hacerle un scroll. Creo que es un javascript`pero aun no he dado con el. Alguien me puede echar una mano?
Muchas gracias.
Un saludo
estoy haciendo paginas y me salta un problema y no he sabido responderlo.
quiero hacer una pagina que esta enmarcada por tablas y en una de las celdas, que es la que lleva el texto de descripcion del producto, tiene mucho texto y quiero hacerle un scroll. Creo que es un javascript`pero aun no he dado con el. Alguien me puede echar una mano?
Muchas gracias.
Un saludo
1 Respuesta
Respuesta de juanceer
1
Te recomedaria que en esa celda, pongas una capa (layer) y en la opcion Desboradmiento (Desb.) Selecciona Scroll, asi tendras podras poner tu texto.
Muchas gracias por la solucion, pero busco una cosa que quede un poco mas profesional para la pagina, ya que esa barra es la standar del navegador, y queda un poco grande.
Conoces algun script que me haga este scroll? o alguna pagina donde pueda echarle un vistazo?
Un saludo
Conoces algun script que me haga este scroll? o alguna pagina donde pueda echarle un vistazo?
Un saludo
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), no tiene una barra, pero imagino te servirá igual:
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, probalo y hacele 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.
Otra forma de lograr un scroll interesante no encontre, salvo los scripts que te permiten cambiar los colores de la barra.
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, probalo y hacele 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.
Otra forma de lograr un scroll interesante no encontre, salvo los scripts que te permiten cambiar los colores de la barra.
Ya que otro usuario tambien me pidio lo mismo, me tome el trabajo de retocar el codigo de la pagina q te pase. Aca te lo envio, cualquier duda avisame.
<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>
</html>
<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>
</html>
