algo como RSS Fading Scroller

ThePlague · #1 (**permalink**) 13/09/2008, 10:17

Buenas señores, tengo una consulta haber si es posible y como sería posible.

Lo que quiero es como hacer un Fading Scroller algo así como que aparece una cosa y al rato aparece otra.

Tengo el siguiente código: (funciona pruebenlo dentro del <body> )

Código HTML:

<script type="text/javascript">

/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';

var fwidth='150px'; //set scroller width
var fheight='150px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {	
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);
	
  }   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>

Ahora quiero que en los fcontent[] en vez de ponerlos así como están, necesito sacarlo de mi base de datos.
No se como sería posible hacerlo con base de datos. O si tienen otra mejor forma de hacerlo como sería.
Les agradezco la ayuda.

caricatos · #2 (**permalink**) 13/09/2008, 10:27

Hola:

Dependerá del elnguaje que uses para manipular la base de datos, y como tengas estructurada la tabla donde tienes los contenidos...

var fcontent=new Array();
<? for ($i = 0, $total = count($contenidos); $i < $total; $i ++)
echo "fcontent[$i] = '".$contenidos[$i]."'\n";
?>

El ejemplo es con php y previamente volcando los contenidos desde la base de datos a un array $contenidos...

Si crees que necesitas más ayuda, indícanos el lenguaje que tienes en tu servidor para la base de datos, para mover el mensaje (puedes reportarlo tú mismo)

Saludos

ThePlague · #3 (**permalink**) 13/09/2008, 10:45

Bueno mi Base de Datos es MySQL, y si se como jalar datos desde una base de datos, pero lo que no se es como relacionar la base de datos con JS, porque segun he leido JS no funciona con BD por eso mi consulta. Porque si te das cuenta del codigo que puse los fcontent están dentro del codigo JS. He ahi mi duda

caricatos · #4 (**permalink**) 13/09/2008, 10:54

Hola:

Es cierto que javascript no manipula bases de datos, pero si dispones de mysql, debes también disponer de un lenguaje en el servidor, si te fijas en mi ejemplo, he usado php, pero ese dato deberías conocerlo, ya que tal como puedes agregar esos datos a la base de datos, también puedes leerlos con el mismo lenguaje, y la forma de pasarlos a javascript es tal como puse arriba. Lee mi respuesta con más detenimiento.

Saludos

ThePlague · #5 (**permalink**) 13/09/2008, 12:26

Haber, para entenderte mejor

, tengo esto:

Código PHP:

  $query_rs_obj1 = "select * from tb_noticia "; 
$query_rs_obj1.= " order by fec_alta DESC "; 
$rs_obj1 = mysql_query($query_rs_obj1, $db_conexion) or die(mysql_error()); 
$row_rs_obj1 = mysql_fetch_assoc($rs_obj1); 
$totalRows_rs_obj1 = mysql_num_rows($rs_obj1);

Con eso llamo a mi Base de Datos, entonces segun tu codigo iría algo asi?:

Código:

var fcontent=new Array();
<? for ($i = 0, $totalRows_rs_obj1 = count($row_rs_obj1); $i <$totalRows_rs_obj1; $i ++)
echo "fcontent[$i] = '".$row_rs_obj1[$i]."'\n";
?>

Ahora mi pregunta es (comprenderas que no se casi nada de JS o AJAX), como o donde poner ese codigo para que funcione con el JS porque de ahi lo estoy llamando.

Agradeciendo tu ayuda

ThePlague · #6 (**permalink**) 13/09/2008, 14:53

Cualquier tipo de ayuda se agradeceria basante

caricatos · #7 (**permalink**) 13/09/2008, 17:01

Hola:

Pues la definición del array ya la tenías en tu código... falta las líneas begintag y closetag, y el código php reemplazando al array que ya tienes (todo dentro de la misma sección script de la página...)

Saludos

ThePlague · #8 (**permalink**) 15/09/2008, 12:17

Disculpa el insistir pero soy novatasooo en JS, Algo asi?:

Código PHP:

  mysql_select_db($database_db_conexion, $db_conexion); 
$query_rs_obj1 = "select * from tb_noticia "; 
$query_rs_obj1.= " order by fec_alta DESC "; 
$rs_obj1 = mysql_query($query_rs_obj1, $db_conexion) or die(mysql_error()); 
$row_rs_obj1 = mysql_fetch_assoc($rs_obj1); 
$totalRows_rs_obj1 = mysql_num_rows($rs_obj1);

Código:

begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
<?php for ($i = 0, $totalRows_rs_obj1 = mysql_num_rows($rs_obj1); $i < $totalRows_rs_obj1; $i ++)
  {
  echo $row_rs_obj1[$i]."'\n"; 
  }
?>
closetag='</div>';

ThePlague · #9 (**permalink**) 15/09/2008, 13:46

Terminó el sufrimiento, acá dejo el código para futuras visitas y gente que lo necesite tbm.

Código:

<?php 
mysql_select_db($database_db_conexion, $db_conexion);
$query_rs_obj1 = "select * from tb_noticia ";
$query_rs_obj1.= " order by fec_alta DESC ";
$rs_obj1 = mysql_query($query_rs_obj1, $db_conexion) or die(mysql_error());
$row_rs_obj1 = mysql_fetch_assoc($rs_obj1);
$totalRows_rs_obj1 = mysql_num_rows($rs_obj1);
?>

<script type="text/javascript">

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
<?php 

$i=0;
do{
echo "fcontent[$i] = '".$row_rs_obj1["entrada"]."'\n";
$i++;
}while ($row_rs_obj1 = mysql_fetch_assoc($rs_obj1));
?>
closetag='</div>';

var fwidth='350px'; //set scroller width
var fheight='100px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {	
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);
	
  }   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller" style="solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>