Scroll de noticias desde base de datos
La idea es la siguiente, he intentado hace un scroll de noticias, de esos que van saliendo las noticias una tras otra y se paran cuando pones encima el ratón, pero no se como hacerlo. Yo quiero que la fuente de las noticias sea un registro de una base de datos, solo de un par de lineas, pero no se y esto se puede hacer.
1 Respuesta
Respuesta de Kike Rodríguez
1
Pues vamos a intentarlo. Pero no se exactamente que es lo que quieres hacer, o como lo quieres hacer. Si es que en un recuadro con la noticia cambiando cada poco y flechsa para anterior y siguiente, si lo que quieres es que se vean 4 o 5 recuadros cada uno con una noticia y vayan pasando, en fin, ni idea Si puedes ponerme una página con algo que hayas visto como lo que quieres hacer me ayudaría.
Tampoco sé si el problema es solo la base de datos o también quieres saber como hacer todo el scroll. Eso lleva mucho javascript y mucho php, y no sé si sabes algo o si lo que quieres es que te lo haga yo, cosa que me llevaría mucho tiempo y no puedo. O si conoces algo ya y con que te oriente a algunas librerías de javascript te serviría.
Tienes que aclarármelo un poco más.
Kike
Tampoco sé si el problema es solo la base de datos o también quieres saber como hacer todo el scroll. Eso lleva mucho javascript y mucho php, y no sé si sabes algo o si lo que quieres es que te lo haga yo, cosa que me llevaría mucho tiempo y no puedo. O si conoces algo ya y con que te oriente a algunas librerías de javascript te serviría.
Tienes que aclarármelo un poco más.
Kike
Hola y gracias por el interés, Si que conozco algo de php pero menos de mysql, la idea es que pasen 5 noticias o 6 y que se paren un momento ellas solas y continúen saliendo. Estas noticias estarían en una tabla de una base de datos. ¿Me puedes ayudar? Utilizo dreamweaver Cs4
Como verás no es una cosa muy sencilla de hacer, requiere código, y mucho tiempo para dejarlo a tu gusto. Te pongo un par de ejemplos, pero me buscaría alguna librería en javascript que se ajuste a tus necesidades y esté probada para los distintos navegadores, como dojo, o prototype, o Jquery, etc. (librerías javascript), hay que saber algo de inglés ya que no suele haber mucha ayuda en castellano. En casi todas puedes ver las demos de para que se pueden utilizar, y ver cual es la que más se ajusta a tus necesidades.
Te pongo un ejemplo haciendo un fadein y un fade out de las noticias. Sólo tendrías que cargar el contenido de la noticia con php en cada div, y crear los que necesites. Usa funciones en las que se especifica el tiempo de los fadein/fadeout y del tiempo que se muestra cada noticia (con el setTimeout) además de crear un bucle cada por tiempo, dependiendo de lo que se tarde en realizar completo.
Está con mucho color para ver el cambio, evidentemente te haces las hojas de estilo correspondientes según tu web. Funciona en todos los navegadores.
<html>
<head>
<style type="text/css">
#noticia1, #noticia2, #noticia3
{
position:absolute;
top:150px;
left:300px;
width:200px;
height:300px;
color:#000;
}
#noticia1
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);}
#noticia2, #noticia3
{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
#noticia1
{
background-color:#00F;
}
#noticia2
{
background-color:#090;
}
#noticia3
{
background-color:#C00;
}
</style>
<script type="text/javascript">
function opacity(id, opacStart, opacEnd, millisec) {
//velocidad de cada frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determinamos la dirección del fundido, si star y end son iguales no hace nada
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//modificamos la opacidad según los distintos navegadores
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//cambiamos en un fadein/fadeout dos div
function intercambiar(muestra, oculta)
{
opacity(muestra,0,100,4000);
opacity(oculta,100,0,4000);
}
//Establacemos los tiempos de ejecución de las alternancias
function alternar()
{
setTimeout("intercambiar('noticia2','noticia1')",8000);
setTimeout("intercambiar('noticia3','noticia2')",16000);
setTimeout("intercambiar('noticia1','noticia3')",24000);
}
</script>
</head>
<body>
<script type="text/javascript">
//hacemos la primera alternancia
alternar();
//y repetimos cada x segundos, según el número de div's y segundos que se tarde
setInterval("alternar()",24000);
</script>
<div id="noticia1">
<h1> Noticia 1</h1>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
</div>
<div id="noticia2">
<h1> Noticia 2</h1>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
</div>
<div id="noticia3">
<h1> Noticia 3</h1>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
</div>
</body>
</html>
Este otro funciona en IE, no lo he modificado para que funcione en todos, que como te digo el trabajo es mucho. Además, modificar cualquiera de los dos para que se detenga al pasar por encima el ratón también lleva su tiempo y complica mucho el código.
<body>
<script language="JavaScript1.2">
// ancho
var marqueewidth=450
// alto
var marqueeheight=200
// velocidad
var speed=1
// contenido del scroll
var marqueecontents='<div id="noticia1"><h1> Noticia 1</h1><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p></div><div id="noticia2"><h1> Noticia 2</h1><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p></div><div id="noticia3"><h1> Noticia 3</h1><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p></div>'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</script>
</body>
Espero que te sirva de ayuda para por lo menos ir avanzando.
Kike
Te pongo un ejemplo haciendo un fadein y un fade out de las noticias. Sólo tendrías que cargar el contenido de la noticia con php en cada div, y crear los que necesites. Usa funciones en las que se especifica el tiempo de los fadein/fadeout y del tiempo que se muestra cada noticia (con el setTimeout) además de crear un bucle cada por tiempo, dependiendo de lo que se tarde en realizar completo.
Está con mucho color para ver el cambio, evidentemente te haces las hojas de estilo correspondientes según tu web. Funciona en todos los navegadores.
<html>
<head>
<style type="text/css">
#noticia1, #noticia2, #noticia3
{
position:absolute;
top:150px;
left:300px;
width:200px;
height:300px;
color:#000;
}
#noticia1
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);}
#noticia2, #noticia3
{
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
#noticia1
{
background-color:#00F;
}
#noticia2
{
background-color:#090;
}
#noticia3
{
background-color:#C00;
}
</style>
<script type="text/javascript">
function opacity(id, opacStart, opacEnd, millisec) {
//velocidad de cada frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determinamos la dirección del fundido, si star y end son iguales no hace nada
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//modificamos la opacidad según los distintos navegadores
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//cambiamos en un fadein/fadeout dos div
function intercambiar(muestra, oculta)
{
opacity(muestra,0,100,4000);
opacity(oculta,100,0,4000);
}
//Establacemos los tiempos de ejecución de las alternancias
function alternar()
{
setTimeout("intercambiar('noticia2','noticia1')",8000);
setTimeout("intercambiar('noticia3','noticia2')",16000);
setTimeout("intercambiar('noticia1','noticia3')",24000);
}
</script>
</head>
<body>
<script type="text/javascript">
//hacemos la primera alternancia
alternar();
//y repetimos cada x segundos, según el número de div's y segundos que se tarde
setInterval("alternar()",24000);
</script>
<div id="noticia1">
<h1> Noticia 1</h1>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 1 cargado con PHP de la base de datos.</p>
</div>
<div id="noticia2">
<h1> Noticia 2</h1>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 2 cargado con PHP de la base de datos.</p>
</div>
<div id="noticia3">
<h1> Noticia 3</h1>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
<p>Texto de la noticia 3 cargado con PHP de la base de datos.</p>
</div>
</body>
</html>
Este otro funciona en IE, no lo he modificado para que funcione en todos, que como te digo el trabajo es mucho. Además, modificar cualquiera de los dos para que se detenga al pasar por encima el ratón también lleva su tiempo y complica mucho el código.
<body>
<script language="JavaScript1.2">
// ancho
var marqueewidth=450
// alto
var marqueeheight=200
// velocidad
var speed=1
// contenido del scroll
var marqueecontents='<div id="noticia1"><h1> Noticia 1</h1><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p><p>Texto de la noticia 1 cargado con PHP de la base de datos.</p></div><div id="noticia2"><h1> Noticia 2</h1><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p><p>Texto de la noticia 2 cargado con PHP de la base de datos.</p></div><div id="noticia3"><h1> Noticia 3</h1><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p><p>Texto de la noticia 3 cargado con PHP de la base de datos.</p></div>'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</script>
</body>
Espero que te sirva de ayuda para por lo menos ir avanzando.
Kike
Gracias de nuevo por la rapidez y la dedicación, si es lo que buscaba, lo que no entiendo es cuando pones texto cargado de la base de datos, se supone que lo cargo con un recorset o directamente con texto dinámico, si puedes me lo acaras y si no ya daremos por cerrada la pregunta. Y gracias de nuevo
Lo cargarías en php antes de cargar la página, los pasos serían más o menos:
- Abrir base de datos
- Seleccionar los registros que quieres presentar y guardar los datos por ejemplo en un array
desde $i=0 hasta numero_noticias -1
array_datos[$i] = datos de la base $i
- Crear los divs de forma dinámica con un código como el que te pongo abajo de ejemplo, de forma que quedaría así:
Función crear noticias()
{
desde $i=0 hasta numero_noticias
{
$id="noticia".$i //Esto crearía noticia1, noticia2, etc, para que puedas aplicar la hoja de estilos
$titulo = array_datos[$i][0] //suponiendo por ejemplo que crees un array de arrays y en el 0 esté el titulo, en el 1 este la fecha y en el 2 este el contenido
$contenido =array_datos[$i][2]
creaDiv($id,$titulo,$fecha,$contenido);
}
}
El código para que lo veas funcionando, asignando valores directamente sería por ejemplo así:
<body>
<?php
$fecha= "01/12/2009";
$titulo= "Noticia 1";
$contenido="Este es el contenido de la noticia";
$id="noticia1";
function creaDiv($id,$fecha,$titulo,$contenido)
{
print("
<div id='$id'>
<h1>$titulo</h1>
<p style='text-align:right'>$fecha</p>
<p>$contenido</p>
</div>
");
}
creaDiv($id,$fecha,$titulo,$contenido);
?>
</body>
Cámbialo para asignar los valores obtenidos de la base de datos, y con los bucles "for" para crear todas de usa sola vez y no una por una, como te puse en los pasos de arriba. El código de la función creaDiv y crear noticias irá en el "head", y la llamas, a crear noticias, antes de cargar la página para que los divs estén creados.
Kike
- Abrir base de datos
- Seleccionar los registros que quieres presentar y guardar los datos por ejemplo en un array
desde $i=0 hasta numero_noticias -1
array_datos[$i] = datos de la base $i
- Crear los divs de forma dinámica con un código como el que te pongo abajo de ejemplo, de forma que quedaría así:
Función crear noticias()
{
desde $i=0 hasta numero_noticias
{
$id="noticia".$i //Esto crearía noticia1, noticia2, etc, para que puedas aplicar la hoja de estilos
$titulo = array_datos[$i][0] //suponiendo por ejemplo que crees un array de arrays y en el 0 esté el titulo, en el 1 este la fecha y en el 2 este el contenido
$contenido =array_datos[$i][2]
creaDiv($id,$titulo,$fecha,$contenido);
}
}
El código para que lo veas funcionando, asignando valores directamente sería por ejemplo así:
<body>
<?php
$fecha= "01/12/2009";
$titulo= "Noticia 1";
$contenido="Este es el contenido de la noticia";
$id="noticia1";
function creaDiv($id,$fecha,$titulo,$contenido)
{
print("
<div id='$id'>
<h1>$titulo</h1>
<p style='text-align:right'>$fecha</p>
<p>$contenido</p>
</div>
");
}
creaDiv($id,$fecha,$titulo,$contenido);
?>
</body>
Cámbialo para asignar los valores obtenidos de la base de datos, y con los bucles "for" para crear todas de usa sola vez y no una por una, como te puse en los pasos de arriba. El código de la función creaDiv y crear noticias irá en el "head", y la llamas, a crear noticias, antes de cargar la página para que los divs estén creados.
Kike
Gracias por tus códigos pero ahora si que me he liado más, pongo la función crear noticias en el head pero no la reconoce, ¿hay qué ponerla de alguna forma especial?
Uyy, no, esa no está hecha, está en pseusocódigo, es para orientarte de como sería más o menos, por eso la puse como "funcion" en vez de "function" y como "crear noticias" en vez de "crearNoticias" o similar, y si te fijas pongo "desde... hasta" en vez de usar el "for" el código depende de como esté la base hecha, de ls campos, etc. como te digo era solo para orientarte.
El código que va a continuación si funciona, era para que vieras como se creaba un div antes de cargar la página a partir de unos datos guardado en variables, donde yo asigno valores a titulo y fecha y contenido, tú los tienes que asignar a través de código con los valores de la base de datos.
Kike
El código que va a continuación si funciona, era para que vieras como se creaba un div antes de cargar la página a partir de unos datos guardado en variables, donde yo asigno valores a titulo y fecha y contenido, tú los tienes que asignar a través de código con los valores de la base de datos.
Kike
