Caja de contenido con scroll

La cantidad de enlaces que a veces añadimos a nuestro blog nos obliga a buscar la forma de incluirlos sin ocupar demasiado espacio.
Ayer Games me sugería un scroll "con flechitas" este que traigo a continuación lo vi en el blog de César, le hice algunas modificaciones y este es el resultado.
El siguiente código lo añadimos en Diseño/Añadir un gadget/HTML/Javascript


<script language="JavaScript1.2">
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers
if (iens6)
{document.write
('<div id="container" style="position:relative;width:180px;height:240px;overflow:hidden;border:4px ridge #B0171F; ">')
<!--Modificar ancho,largo y borde del contenido-->
document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
}
</script>
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!-- Color de fondo del contenido-->
<!--Enlaces- imágenes- contenido-->
<!--Enlaces- imágenes- contenido-->
</div>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
<!--En movedown escogemos velocidad-->
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
<!--En moveup escogemos velocidad-->
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!--En background añadimos color de fondo a la caja de imágenes -->
<center>
<a href="javascript:movedown()"><img src="url-imagen SUBIR"/></a> <a href="javascript:moveup()"><img src="url-imagen-BAJAR"/></a> <a href="javascript:stopscroll()"><img src="url-imagen-PAUSA"/></a> <a href="javascript:movetop()"><img src="url-imagen INICIO"/></a>
</center>
</div>
<!--Hasta aquí->


Para personalizarlo añadí unas líneas en negrita que sirven como orientación.


Esto es una imagen

La barra de navegación es posible situarla en la parte superior o inferior del contenido,la solución está en "mover" al principio o final el código que se encuentra en el interior de estas dos líneas:

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
código...
código...
código...
<!--Hasta aquí->

0 comentarios:

Publicar un comentario