Noticias Deslizables

ThePlague · #1 (**permalink**) 15/09/2008, 10:34

Buenas señores, necesito una ayudita en hacer una noticia autodeslizable, como los Fading Scrollers:

El Código que tengo es este:

Código:

<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 segun este codigo necesito que el array fcontent contenga datos de mi Base de Datos, por eso hago lo siguiente:

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);

Y después tengo:

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";
?>

He ahí mi problema, que no se como relacionar el codigo php en el javascript de arriba, porque según ese código sería lo que necesito pero no se como aplicarlo.

Gracias por su ayuda

Marvin · #2 (**permalink**) 15/09/2008, 10:41

Reemplaza fcontent del javascript con lo que tienes abajo, pero tendras que poner el javascript como .php y eso llamarlo desde el script tag del html.

Tambien puedes ponerlo directamente en la pag.

Suerte!

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

Quiero que se vea mas o menos como la parte DEMO de este link: http://www.dynamicdrive.com/dynamici...fadescroll.htm

Haber para resumir lo que hemos conversado tengo esto:

Código PHP:

 
    <?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:

<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 for ($i = 0, $totalRows_rs_obj1 = mysql_num_rows($rs_obj1); $i < $totalRows_rs_obj1; $i ++)
echo "fcontent[$i] = '".$row_rs_obj1[$i]."'\n"; ?>

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>

Que estaría necesitando para que funcione, porque no me está mostrando nada

Sigo agradeciendo su ayuda gente

Marvin · #4 (**permalink**) 15/09/2008, 12:41

Tienes el primer codigo arriba del segundo o al reves ?

ThePlague · #5 (**permalink**) 15/09/2008, 12:57

Primero el PHP que está antes del <script> despues el codigo en si.

Marvin · #6 (**permalink**) 15/09/2008, 13:00

Y en el codigo javascript estan con datos los arreglos?

Revisa eso con click derecho en la pagina ya cargada y "ver codigo fuente"... una de las prestaciones que da trabajar con php en javascript es que puedes ir viendo los resultados en la pagina cargada

Suerte!

ThePlague · #7 (**permalink**) 15/09/2008, 13:20

Efectivamente no muestra nada, cual sería el error:

fcontent[0] = ' '

No esta jalando nada de mi Base de Datos

ThePlague · #8 (**permalink**) 15/09/2008, 13:45

Termino el sufrimiento, todo por el $i, ya funciona aca dejo el código para futuras visitas:

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>

Agradecido de tu ayuda

ThePlague · #9 (**permalink**) 16/09/2008, 17:57

Ahora tengo otro problemilla con este codigo... necesito sacar 2 datos de la BD. Estoy intentando hacer esto:

Código:

var fcontent=new Array();
var fcontent2=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
<?php 
$i=0;
$j=0;
do{
echo "fcontent[$i] = '".$row_rs_obj1["titular"]."'\n";
echo "fcontent2[$j] = '".$row_rs_obj1["entrada"]."'\n";
$i++;
}while ($row_rs_obj1 = mysql_fetch_assoc($rs_obj1));
?>
closetag='</div>';

Ahora con eso no me muestra nada pero en el codigo de fuente de la pagina que muestra, si tienen datos los arrays, que puedo estar haciendo mal.

La idea es que se muestre:

Titular
Entrada

Osea el titulo con su contenido. Algo debo de estar haciendo mal... una ayudita porfa

Marvin · #10 (**permalink**) 17/09/2008, 08:18

Revisaste la pagina con algun programa para verificar javascript?... (te recomiendo el firebug de firefox)

Suerte!