Modificar Scroll de Noticias

Saulinux · #1 (**permalink**) 25/01/2006, 08:36

El siguiente codigo es de Tunait, por ello mis felicidades.

Mi consulta y problema es el siguiente:
Tengo q mostrar 3 noticias máx (hasta aqui no problem), a lo q me refiero es q tengo limitado a 200 crcteres cada noticia, y mi espacio de celda es muy alto (por diseño), asi q como entenderan cuando sale una noticia tengo mucho espacio en blanco antes de q la siguiente se muestre, quisiera ayuda en esta parte, q si se pueda mostrar una noticia seguida de la otra respetando la pausa de 2 segundos entre ambas. Gracias de antemano...
Si alguien del foro tambien me podria ayudar estare agradecido

El codigo es el siguiente:
En el HEAD:

Cita:

En la etiqueta Body

Cita:

Y dentro del Body:

Cita:

<div align="center">
<p>
<script>escribe()</script>

</p>

</div>

tunait · #2 (**permalink**) 25/01/2006, 12:05

Hola Saulinux

¿y por qué no reduces simplemente la altura del cuadro?

var alto = 300 //altura del cuadro

cambia ese 300 a un valor más bajo que se adapte a la altura de tus 200 caracteres

Saulinux · #3 (**permalink**) 25/01/2006, 12:32

Hola Tunait... Gracias por responder...

El problema es que necesito mostrar por lo menos dos noticias juntas (una seguida de otra) y el alto del cuadro como te lo dije por diseño del sitio no se puede variar; se que hay otros scripts de noticias pero el tuyo me parece mucho mejor y mas manejable :)

Alguna otra sugerencia....? porfa

mauled · #4 (**permalink**) 25/01/2006, 12:34

------------------------------

tunait · #5 (**permalink**) 25/01/2006, 12:39

Ah, creo que ahora te entiendo, tú lo que quieres es que se muestren de dos en dos?

Saulinux · #6 (**permalink**) 25/01/2006, 12:49

Exactamente, pero respetando la pausilla entre cada noticia, es decir va una noticia seguida de la otra, pero cuando la primera llega al tope de la celda, se detienen dos segundos, luego sigue el ciclo normal...

Se puede??

tunait · #7 (**permalink**) 25/01/2006, 13:00

mmmmse tiene que poder. Pero me llevará un rato del que ahora mismo no dispongo. Si puedes esperar un par de días .... podría sacar un ratito. Eso sí, si en un par de días no te he dicho nada, me pegas un grito

Saulinux · #8 (**permalink**) 25/01/2006, 13:11

OK sere paciente y esperaré un par de dias; tambien estoy viendo como sacar las noticias, titulares, fecha de una base de datos MySQL con PHP, no creo que tenga problemas ahí porque las pruebas que voy haciendo me resultan a la perfección gracias a como presentas tu código (muy limpio por cierto).

Entonces hasta pronto

Saulinux · #9 (**permalink**) 30/01/2006, 12:49

Hola, bueno quiero aclarar que no sabía si escribir directamente a Tunait o mandar un mensaje privado, pero pense que talvez a alguien le interesaria mi duda asi que respondi al tema creado anteriormente.....

Mi pregunta es si Tunait pudiste modificar el codigo que te cite anteriormente para que las noticias se muestren de dos en dos?? sobre lo demas que te comente hasta ahora no he tenido problemas...

Gracias de antemano....

tunait · #10 (**permalink**) 30/01/2006, 17:36

Hola de nuevo Saulinux ,

A falta de noticias tuyas no me había puesto en ello (no sería la primera vez que me piden algo y nunca más regresan

) pero tras dar señales de vida de nuevo me puse en ello.

Yá está, de paso le he hecho algunas mejoras imperceptibles al ojo pero notables para el navegador (antes sólo funcionaba si no se le ponía DTD, ahora funciona correcto en cualquier navegador con cualquier dtd).

Te dejo el código fuente en el próximo mensaje (en este no me deja meterlo entero

)

Yá me contarás

Un saludo

tunait · #11 (**permalink**) 30/01/2006, 17:38

Código:

<script language="JavaScript" type="text/JavaScript">
/************************************************** 
Scroll de noticias. Script creado por Tunait! (21/8/2003)
Última modificación 31/1/06 muestra las noticias de a dos. 
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
***************************************************/
var ancho = 120 //anchura del cuadro
var alto = 300 //altura del cuadro
var marco = 1 //0 para que notenga marco (borde)
var colormarco = '#999999'
var fondo = '#FFFFFF' //color de fondo del cuadro
var pausilla = 2000 //tiempo de la pausa en milisegundos (2000 = 2 segundos)
var destino = "_blank" //target en donde se quiera que se carguen los enlaces, en caso de usarlos.
var cursor = "default;" //cursor que se quiera sobre el cuadro
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 textos 
var tamTitular = '12' //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("UNO Perico de los palotes se compra un perro.","blablá bla blablablá blas......","12/5/03","link0","_blank")
noticias[1]= new noticia("DOS Bartolo nunca tuvo una flauta. En realidad era una tuba. ","blablá bla blablablá blas......","15/5/03","#","_blank")
noticias[2]= new noticia("TRES El caballo blanco de Santiago era blanco.","blablá bla blablablá.....","17/5/03","link1","_blank")

tunait · #12 (**permalink**) 30/01/2006, 17:39

..continuación

Código:

var det = false
function escribe(){
	document.writeln ('<div id="mami">')
	document.write ('<div id="uno" style="top: ' + alto + 'px;">')
	document.write ('<h3 class="titular">')
	document.write (noticias[0].titular)
	document.write ('</h3>')
	document.write ('<span class="fecha">')
	document.write (noticias[0].fecha)
	document.write ('</span>')
	document.write ('<p class="texto">')
	document.write (noticias[0].texto)
	document.write ('</p>')
	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 + (alto/2)) + 'px;">')
	document.write ('<h3 class="titular">')
	document.write (noticias[1].titular)
	document.write ('</h3>')
	document.write ('<span class="fecha">')
	document.write (noticias[1].fecha)
	document.write ('</span>')
	document.write ('<p class="texto">')
	document.write (noticias[1].texto)
	document.write ('</p>')
	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 ('<div id="tres" style="top: ' + alto*2 + 'px;">')
	document.write ('<h3 class="titular">')
	document.write (noticias[2].titular)
	document.write ('</h3>')
	document.write ('<span class="fecha">')
	document.write (noticias[2].fecha)
	document.write ('</span>')
	document.write ('<p class="texto">')
	document.write (noticias[2].texto)
	document.write ('</p>')
	if(masInfo == true){
	document.write ('<a class="enlace" href="')
	document.write (noticias[2].enlace)
	document.write ('" target = "' + destino + '">más información...</a>')
	}
	document.write ('</div>')
	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()
	}
	document.getElementById('tres').onmouseover =function(){
	det = true
	clearTimeout(tiempo)
	}
	document.getElementById('tres').onmouseout =function(){
	det = false;
	clearTimeout(tiempo)
	escrolea()
	}
}
desp = 1
var cont = 2
var pos,pos2,pos3
pepe = 0
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);
	pos3 = document.getElementById('tres').style.top
	pos3 = pos3.replace(/px/,"");
	pos3 = pos3.replace(/pt/,"");
	pos3 = new Number(pos3);
	pos -= desp
	pos2 -= desp
	pos3 -= desp

	if (pos == desp){
		var contenidos = ""
		document.getElementById('tres').style.top = alto + "px"
		document.getElementById('tres').childNodes[0].firstChild.nodeValue = noticias[cont].titular
		if(poneFecha == true){
			document.getElementById('tres').childNodes[1].firstChild.nodeValue = noticias[cont].fecha
		}
		document.getElementById('tres').childNodes[2].firstChild.nodeValue = noticias[cont].texto
		if(masInfo == true){
			document.getElementById('tres').childNodes[3].href = noticias[cont].enlace 
		}
		document.getElementById('uno').style.top = 0 + "px"
		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 + "px"
			if(cont == noticias.length-1){
				cont=0
			}
			else{
				cont++
			}
			pausa()
			return false
		}
	else{
			if (pos3 == 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('tres').style.top = 0 + "px"
				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"
			document.getElementById('tres').style.top = pos3 + "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.writeln('<style type="text/css">')
document.writeln ('#mami {')
document.writeln ('position: relative;')
document.writeln ('border: ' + marco + 'px solid ' + colormarco + ';')
document.writeln ('text-align: left;')
document.writeln ('padding: 0px 2px 0px 2px;')
document.writeln ('height: ' + alto + 'px;')
document.writeln ('width: ' + ancho + 'px;')
document.writeln ('overflow: hidden;')
document.writeln ('}')
document.writeln ('#uno {')
document.writeln ('color: #006699;')
document.writeln ('height: ' + (alto/2) + 'px;')
document.writeln ('top: ' + alto + 'px;')
if(cursor == "pointer" || cursor == "hand"){
cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
}
document.writeln ('cursor:' + cursor + ";")
document.writeln ('position:absolute;}')
document.writeln ('#dos {')
document.writeln ('color: #006699;')
document.writeln ('height: ' + (alto/2) + 'px;')
document.writeln ('top: ' + (alto + (alto/2)) + 'px;')
document.writeln ('cursor:' + cursor + ";")
document.writeln ('position:absolute;}')
document.writeln ('#tres {')
document.writeln ('color: #006699;')
document.writeln ('height: ' + (alto/2) + 'px;')
document.writeln ('top: ' + (alto*2) + 'px;')
document.writeln ('cursor:' + cursor + ";")
document.writeln ('position:absolute;}')
document.writeln ('.titular{')
document.writeln ('margin-bottom: 1px;')
document.writeln ('color:' + colTitular +'; ')
document.writeln ('font-family:' + fuente + ';')
document.writeln ('font-size :' + tamTitular + 'px;font-weight:bold}')
document.writeln ('.texto{')
document.writeln ('margin: 1px;')
document.writeln ('color:' + colTexto + ';')
document.writeln ('font-family:' + fuente + ';')
document.writeln ('font-size:' + tamTexto + 'px;}')
if(poneFecha == true){
document.writeln ('.fecha{')
document.writeln ('margin: 1px;')
document.writeln ('color:' + colFecha +';')
document.writeln ('font-family:' + fuente + ';')
document.writeln ('font-size :' + tamFecha + 'px;font-weight:bold}')
}
else{
document.writeln ('.fecha{display: none;}')
}
document.writeln ('.enlace{')
document.writeln ('margin: 1px;')
document.writeln ('color:' + colEnlace + ';')
document.writeln ('font-family:' + fuente + ';')
document.writeln ('display: block;')
document.writeln ('text-align: right;')
document.writeln ('font-size:' + tamEnlace + 'px;}')
document.writeln ('</style>')
</script>

Saulinux · #13 (**permalink**) 31/01/2006, 08:45

PERFECTO!!! Muchas gracias Tunait

Me funciona de maravilla, era justamente lo que necesitaba, gracias nuevamente por responder y la ayuda brindada, en verdad me animas a meterme mucho mas en esto del Javascript : (prometo estudiarlo mas a fondo

). Y Ojala este script les sirva a muchos (casi estoy seguro).....

Un cordial saludo y hasta pronto.