Foros del Web » Programando para Internet » PHP »

Noticias Deslizables

Estas en el tema de Noticias Deslizables en el foro de PHP en Foros del Web. 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"> /*********************************************** * ...
  #1 (permalink)  
Antiguo 15/09/2008, 11:34
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Exclamación Noticias Deslizables

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
  #2 (permalink)  
Antiguo 15/09/2008, 11:41
Avatar de Marvin
Colaborador
 
Fecha de Ingreso: febrero-2005
Ubicación: global $Chile->Santiago;
Mensajes: 1.990
Antigüedad: 14 años, 10 meses
Puntos: 80
Respuesta: Noticias Deslizables

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!
__________________
El que dice "Solo sé que nada sé", esta asumiendo que sabe algo.
Lea las FAQ's!
  #3 (permalink)  
Antiguo 15/09/2008, 13:12
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Exclamación Respuesta: Noticias Deslizables

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
  #4 (permalink)  
Antiguo 15/09/2008, 13:41
Avatar de Marvin
Colaborador
 
Fecha de Ingreso: febrero-2005
Ubicación: global $Chile->Santiago;
Mensajes: 1.990
Antigüedad: 14 años, 10 meses
Puntos: 80
Respuesta: Noticias Deslizables

Tienes el primer codigo arriba del segundo o al reves ?
__________________
El que dice "Solo sé que nada sé", esta asumiendo que sabe algo.
Lea las FAQ's!
  #5 (permalink)  
Antiguo 15/09/2008, 13:57
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Noticias Deslizables

Primero el PHP que está antes del <script> despues el codigo en si.
  #6 (permalink)  
Antiguo 15/09/2008, 14:00
Avatar de Marvin
Colaborador
 
Fecha de Ingreso: febrero-2005
Ubicación: global $Chile->Santiago;
Mensajes: 1.990
Antigüedad: 14 años, 10 meses
Puntos: 80
Respuesta: Noticias Deslizables

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!
__________________
El que dice "Solo sé que nada sé", esta asumiendo que sabe algo.
Lea las FAQ's!
  #7 (permalink)  
Antiguo 15/09/2008, 14:20
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Noticias Deslizables

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

fcontent[0] = ' '

No esta jalando nada de mi Base de Datos
  #8 (permalink)  
Antiguo 15/09/2008, 14:45
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Sonrisa Respuesta: Noticias Deslizables

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
  #9 (permalink)  
Antiguo 16/09/2008, 18:57
 
Fecha de Ingreso: julio-2008
Ubicación: Trujillo
Mensajes: 58
Antigüedad: 11 años, 4 meses
Puntos: 1
Exclamación Respuesta: Noticias Deslizables

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
  #10 (permalink)  
Antiguo 17/09/2008, 09:18
Avatar de Marvin
Colaborador
 
Fecha de Ingreso: febrero-2005
Ubicación: global $Chile->Santiago;
Mensajes: 1.990
Antigüedad: 14 años, 10 meses
Puntos: 80
Respuesta: Noticias Deslizables

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

Suerte!
__________________
El que dice "Solo sé que nada sé", esta asumiendo que sabe algo.
Lea las FAQ's!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:24.