A pedido de Edwin Cano, un scroll para noticias en javascript muy bueno y fácil de configurar, ideal para mostrar novedades y noticias sobre un tema en especial con un enlace de más informacion.
Paso 1: Configurar el codigo 1.
Lo primero que tienes que hacer es configurar el codigo 1 (el de más abajo) y pegarlo antes de </head> en vista HTML de tu pagina web. (No puedo ponerlo en un textarea porque blogger lo desordena todo y lo pongo al final porque es muy largo ^^)
Lo que puedes configurar esta todo descrito a la derecha de las variables.
El codigo tiene para 7 noticias, tu puedes agregarle más de la siguiente forma:
noticias[8]= new noticia("Titulo noticia","","texto...","http://enlace/","_self")
noticias[9]= new noticia("Titulo noticia","","texto...","http://enlace/","_blank")
Como ves simplemente le agregamos otra linea y le ponemos el numero siguiente, recuerda que son 4 "comillas" y separando cada una con una coma ("","","","").
_blank: el enlace se abre en una nueva ventana.
_self: el enlace se abre en la misma ventana.
Si las noticias no tienen enlaces puedes indicarlo aqui:
var masInfo = true cambiando "true" por "false".
Paso 2: Modificar el tag body.
Luego de configurar las noticias buscas el tag <body> en tu pagina web y lo reemplazas por esto:
<body onload="escrolea()">
Paso 3: Llamar al scroll.
Ahora, donde quieras poner el scroll de noticias en tu web, debes poner el siguiente codigo:
<script>escribe()</script>
Eso es todo, espero se entienda, porque esta un poco complicado ^^
Saludos!
------------------------->
Codigo 1:
<!-- Inicio del codigo -->
<script language="JavaScript" type="text/JavaScript">
var ancho = 250 //anchura del cuadro
var alto = 120 //altura del cuadro
var marco = 1 //escribe 0 si no quieres borde
var fondo = '#FFFFFF' //color de fondo del cuadro
var pausilla = 2000 //tiempo de la pausa entre noticia en milisegundos (2000 = 2 segundos)
var destino = "_blank" //_blank para abrir enlaces en nueva ventana, _self en la misma.
var cursor = "default;"
var colTitular = '#006699' //color del texto del titular
var colTexto = '#999999' // color del texto de la noticia
var colFecha = '#3399FF' //color del texto de la fecha
var colEnlace = '#660000' //color del texto del enlace
var fuente = "arial" //fuente para los todos los textos
var tamTitular = '14' //tamaño de la fuente del titular
var tamTexto = '12' //tamaño de la fuente del texto de la noticia
var tamFecha = '10' // tamaño de la fuente de la fecha
var tamEnlace = '11' // tamaño de la fuente del enlace
var masInfo = true //Determina si se usa o no el enlace. true para usarlo. false para omitirlo
var poneFecha = true //true para poner fecha. false para omitirla. Si no se quiere fecha, dejar las comillas vacías ""
function noticia(titular,texto,fecha,enlace,destino){
this.titular = titular
this.texto = texto
this.fecha= fecha
this.enlace = enlace
this.destino = destino
}
var noticias = new Array()
noticias[0]= new noticia("Titulo de la noticia 1","texto de la noticia 1","fecha de la noticia 1","http://creaweb.blogspot.com/","_blank")
noticias[1]= new noticia("Somos la mejor web de todas, la mentira mas grande","texto.. y mas texto...","11/08/07","http://creaweb.blogspot.com/","_blank")
noticias[2]= new noticia("Harry potter and the deathly hallows","Y el final llego :(","21/07/07","#","_blank")
noticias[3]= new noticia("Titulo noticia","texto...","fecha","http://creaweb.blogspot.com/","_blank")
noticias[4]= new noticia ("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[5]= new noticia ("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[6]= new noticia("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
noticias[7]= new noticia("Titulo noticia","","texto...","http://creaweb.blogspot.com/","_blank")
var det = false
function escribe(){
document.write ('<div id="mami" style="width:' + ancho + 'px; height:' + alto + 'px; position:relative; overflow:hidden ">')
document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + 'px" height="100%"><tr><td valign="top">')
document.write ('<div id="uno" style="top:' + alto +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[0].titular)
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[0].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[0].texto)
document.write ('</div>')
if(masInfo == true){
document.write ('<a class="enlace" href="')
document.write (noticias[0].enlace)
document.write ('" target="' + destino + '">Más información</a>')
}
document.write ('</div>')
document.write ('<div id="dos" style="top:' + (alto*2) +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[1].titular)
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[1].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[1].texto)
document.write ('</div>')
if(masInfo == true){
document.write ('<a class="enlace" href="')
document.write (noticias[1].enlace)
document.write ('" target = "' + destino + '">más información...</a>')
}
document.write ('</div>')
document.write('</td></tr></table>')
document.write ('</div>')
if(navigator.appName == "Netscape")
{altoUno = document.getElementById('uno').offsetHeight}
else
{altoUno = document.getElementById('uno').clientHeight}
document.getElementById('uno').onmouseover =function(){
det = true
clearTimeout(tiempo)
}
document.getElementById('uno').onmouseout =function(){
det = false;
clearTimeout(tiempo)
escrolea()
}
document.getElementById('dos').onmouseover =function(){
det = true
clearTimeout(tiempo)
}
document.getElementById('dos').onmouseout =function(){
det = false;
clearTimeout(tiempo)
escrolea()
}
}
desp = 1
var cont = 1
var pos,pos2
function escrolea(){
pos = document.getElementById('uno').style.top
pos = pos.replace(/px/,"");
pos = pos.replace(/pt/,"");
pos = new Number(pos);
pos2 = document.getElementById('dos').style.top
pos2 = pos2.replace(/px/,"");
pos2 = pos2.replace(/pt/,"");
pos2 = new Number(pos2);
pos -= desp
pos2 -= desp
if (pos == desp){
var contenidos = ""
document.getElementById('dos').style.top = alto + "px"
document.getElementById('dos').childNodes[0].firstChild.nodeValue = noticias[cont].titular
if(poneFecha == true){
document.getElementById('dos').childNodes[1].firstChild.nodeValue = noticias[cont].fecha
}
document.getElementById('dos').childNodes[2].firstChild.nodeValue = noticias[cont].texto
if(masInfo == true){
document.getElementById('dos').childNodes[3].href = noticias[cont].enlace
}
document.getElementById('uno').style.top = 0
if(cont == noticias.length-1)
{cont=0}
else{
cont++
}
pausa()
return false
}
else{
if (pos2 == desp){
var contenidos = ""
document.getElementById('uno').style.top = alto + "px"
document.getElementById('uno').childNodes[0].firstChild.nodeValue = noticias[cont].titular
if(poneFecha == true){
document.getElementById('uno').childNodes[1].firstChild.nodeValue = noticias[cont].fecha
}
document.getElementById('uno').childNodes[2].firstChild.nodeValue = noticias[cont].texto
if(masInfo == true){
document.getElementById('uno').childNodes[3].href = noticias[cont].enlace
}
document.getElementById('dos').style.top = 0
if(cont == noticias.length-1)
{cont=0}
else{
cont++
}
pausa()
return false
}
else{
document.getElementById('uno').style.top = pos + "px"
document.getElementById('dos').style.top = pos2 + "px"
}
}
tiempo = window.setTimeout('escrolea()',50)
}
var tiempo
function pausa()
{
clearTimeout(tiempo)
if (det == false){
tiempo = setTimeout ('continuar()',2000)
}
}
function continuar()
{
if(det == false)
{escrolea()}
}
document.write('<style type="text/css">')
document.write ('#uno {')
document.write ('color: #006699;')
if(cursor == "pointer" || cursor == "hand"){
cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
}
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('#dos {')
document.write ('color: #006699;')
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('.titular{')
document.write ('color:' + colTitular +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamTitular + 'px;font-weight:bold}')
document.write ('.texto{')
document.write ('color:' + colTexto + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamTexto + 'px;}')
if(poneFecha == true){
document.write ('.fecha{')
document.write ('color:' + colFecha +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamFecha + 'px;font-weight:bold}')
}
else{
document.write ('.fecha{display: none;}')
}
document.write ('.enlace{')
document.write ('color:' + colEnlace + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamEnlace + 'px;}')
document.write ('</style>')
</script>
<!-- fin del codigo -->
10 agosto 2007
18 comentarios:
muy muy muy pero muy dificil... lo intente pero no pude >:S asi que antes de dejar la mansa ni ke embarrada en mi web... mejor la deje tal cual la eastoy creando aun >:D bueno si puedes porfa agregame a msn y me explicas pofis estoy aciendo la web con dreamwaver >:D AioS! k_no777@hotmail.com
Deberian de publicar un ejemplo ya armado para uno observar bien porq asi esta muy pero muy dificil para armar...
El ejemplo esta aqui: http://inacho.110mb.com/scroll.html
muy bueno saludos a todos
Yo no soy capaz de hacerlo funcionar en blogger. Como puedo solucionarlo?
Me dice que no pueden aparecer etiquetas div dentro del head
Alguien me puede decir como puedo aliniar las noticias ya que me salen sobre el margen derecho de la pantalla
PODRIAN DAR UN EJEMPLO DE COMO SE VE, SERIA MUCHO MEJOR ;)
Buen ejemplo pero me da un conflicto con un carrusel de imagenes que tengo en mi web si coloco esto me detiene las imagenes del carrusel y es por colocar la funcion en el body onload="escrolea()
Alguna idea para no cargarla desde el body.
Muy bueno, Dime si se puede adaptar para imagenes?
¿funciona en todos los navegadores? Otros scrolls que he visto no valen para Firefox por ejemplo. :(
mucho kilombo hermanito...
que jodido que la haces...
en fin, gracias x nada.
HOLA:
para todos aquellos que piensan esta muy dificil de armar o configurar
podrian hacer lo que yo hize al no poderlo armar en mi pagina
entre a el ejemplo y puse ver codigo fuente en mi navegador
revise el codigo y encontre las noticias de ejemplo y las reemplaze con las mias
incluso borre noticias que no ocuparia y modifique el tamaño(codigos de el inicio)
si aun asi no logras hacerlo que funcione quiza por usar un editor web solo elimina el siguiente html de el inicion y el fondo de el codigo
almenos asi funciono para mi espero le ayude a quienes lo adquieran
Muy bueno... Complicado al automatizarlo para usuarios finales con asp (Agregar o quitar noticias desde un panel de administrador con bd sin necesidad de modificar el codigo fuente) pero también funciona, es solo cambiarle algunas cositas. Para que aparezcan tildes y la "ñ" correctamente, solo hay que reemplazar por su respectivo código. Excelente que tuviera la opción de acompañar la noticia con una imagen. ¡Felicitaciones!
El ejemplo no funciona
hola q tal, como puedo poner 2 en una misma pagina, porq lo intente y solo 1 funciona el otro queda en blanco!
Quiero felicitarlos por el scroll vertical ya lo voy a implementar, ya lo probé y funciona perfectamente, gracias. Los invito en un par de días a verlo trabajando en mi web site.
Muchas gracias por tener el código completo. Lo conozco desde el 2008 y no lo tenía completamente, me gustaría saber tu nombre o tu alias para ponerlo de agradecimiento en mi página web.
Publicar un comentario
Gracias por visitar Creando Web, si tienes alguna duda, solo pregunta! ^^
- He activado la moderación de comentarios por el spam :)