alguna idea para hacer el siguiente codigo

azaz · #1 (**permalink**) 16/06/2011, 05:36

Hola amigos estado mirando en google y en varias tutoriales pero no encontre lo que busco es simple pero no consigo encontrar la manera de hacerlo. Hos cuento en mi db tengo un campo llamado nombre_empresas y quiero mostrar en pantalla los tres primeros y que se cambien por los tres siguientes si pulsar ningun boton solo en un periodo de tiempo y asin sucesivamente hasta recorrer la db y volver a empezar
alguna idea?

_cronos2 · #2 (**permalink**) 16/06/2011, 08:01

Puedes hacerlo con AJAX, mandando peticiones constantemente al servidor; o también puedes enviar todos los valores a un array en JS e ir mostrándolos de 3 en 3.
Saludos (:

azaz · #3 (**permalink**) 16/06/2011, 08:45

_cronos2 me gustaria hacerlo con javascript enviando los valores a un array de javascript pero no tengo ni idea de como hacer el codigo javascript para lograr eso alguna orientacion o algun pequeño ejemplo porfavor

azaz · #4 (**permalink**) 16/06/2011, 10:41

mas o menos quiero algo asin pero no se adaptarlo a mis necesidades es un codigo que muestra una imagen de mi db y la cambia por la siguiente hasta recorrer todo el campo de mi db

Código Javascript:

Ver originalvar pos = 0;
var imagenes 
var int = setInterval(function(){  
if(pos>=imagenes.length){pos = 0}
document.getElementById("lugar1").src ='tienda_online/'+ imagenes[pos++]
},1000)

y muestro los resultados asin

Código PHP:

Ver originalecho "<img src='tienda_online/'$imagenes[0] id='lugar1'>";

como tendria que hacer si en vez de mostrar esta imagen alternandose quiero mostrar una capa div por ejemplo esta con los siguientes resultados

Código PHP:

Ver originalecho "<div class='prueba'>
    articulos del dia ".$fecha."<br>
     ".$articulos."
  </div>";

espero sugerencias y ayudas saludos

_cronos2 · #5 (**permalink**) 16/06/2011, 10:47

Tienes que cargar en el array el código HTML que vas a usar para cada registro. Es decir, algo como esto:

Código PHP:

Ver original<script type='text/javascript'>
var registros = ["<b><?php
 echo implode('</b>", "<b>', $registros);
?></b>"];

La variable registros contiene toda la información de la base de datos. Una vez esto, simplemente tiene que ir modificando el innerHTML de un div contenedor.
Saludos (:

azaz · #6 (**permalink**) 16/06/2011, 11:05

no acabo de entender como tendria que hacer para modificar el innerHTML si me pudieras poner algun ejemplo.
ya que yo se hacerlo como algo asin

Código Javascript:

Ver original<script>
 
datos= document.getElementById('contenedor');
datos.innerHTML = '<b>aqui iria el siguiente registro</b>';
</script>

este seria un uso basico pero claro como tendria que hacer para cambie de forma dinamica por la siguiente capa div que tendria que ser los siguientes registros de mi db

inieva · #7 (**permalink**) 16/06/2011, 12:57

Solo un ejemplo:

Código:

<html>
<head>
	<title>Ejemplo</title>
	<script type='text/javascript'>
	
		var registros = [
			"Empresa 1",
			"Empresa 2",
			"Empresa 3",
			"Empresa 4",
			"Empresa 5",
			"Empresa 6",
			"Empresa 7",
			"Empresa 8"
		];
				
		
		var pos = 0;
		
		
		function MostrarRegistos(){  

			for (i=1;i<=3;i++){
			
				var div = document.createElement("div");
				div.setAttribute("id","registro"+i);
				document.getElementById("contenedor").appendChild(div);	
				
				valor = registros[pos];
			
				document.getElementById("registro"+i).innerHTML = '<p>'+valor+'</p>';
				
				pos++;
				if(pos>=(registros.length)){pos = 0}
			}
		}
			
		window.onload = MostrarRegistos;
		
		var int = setInterval(MostrarRegistos,1000)
		
	</script>
</head>
<body>

	<div id="contenedor"></div>

</body>
</html>

azaz · #8 (**permalink**) 16/06/2011, 13:19

inieva gracias por tu ejemplo lo empiezo haber mas claro luego te comento que tal me fue un saludo

azaz · #9 (**permalink**) 16/06/2011, 13:38

inieva realmente no es esto lo que quiero aunque muchas gracias por intentarlo
realmente la dinamica que quiero que haga mi codigo es la siguiente tengo dos campos llamados articulos y archivos estos campos los tengo en una variable de javascript que se llaman articulos y la otra archivos entonces lo que quiero es mostrar en pantalla los tres primeros articulos y que pasado un intervalo de tiempo se cambien por otros tres osea que en pantalla solo se veran siempre tres articulos con sus imagenes correspondiente

no se si me explique seria algo asin
<div>articulo1,archivo1</div>
<div>articulo2,archivo2</div>
<div>articulo3,archivo3</div>

pasado un tiempo alternarlo por los siguientes osea quitar lo anterior y poner esto
<div>articulo4,archivo4</div>
<div>articulo5,archivo5</div>
<div>articulo6,archivo6</div>

espero que me podais ayudar un saludo y gracias de todas formas

inieva · #10 (**permalink**) 16/06/2011, 14:46

Bueno, creo que el ejemplo era bastante claro y simple de adaptar a tus necesidades pero aclaro.

Si tenes dos arrays, articulos y archivos bastaria con modificar la función MostrarRegistro de la siguiente manera:

Código:

<html>
<head>
	<title>Ejemplo</title>
	<script type='text/javascript'>
	
//estos serian los array generados por php. 
 
		var articulos = [
			"articulos 1",
			"articulos 2",
			"articulos 3",
			"articulos 4",
			"articulos 5",
			"articulos 6",
			"articulos 7",
			"articulos 8"
		];
				
	
		var archivos = [
			"archivo1.jpg",
			"archivo2.jpg",
			"archivo3.jpg",
			"archivo4.jpg",
			"archivo5.jpg",
			"archivo6.jpg",
			"archivo7.jpg",	
			"archivo8.jpg",
		];		
	
		var pos = 0; // asigno una variable global para usar como indice de los array
		
		
		function MostrarRegistos(){  // esta funcion va hacer el trabajo

			for (i=1;i<=3;i++){ //el for va a crear los 3 elementos a mostrar de uno en uno.

//primero voy a crear un div vacio dentro del contenedor y le asigno un id para manipularlo despues. (si vos preferis estos tres divs los podes tener en tu html y no crearlos desde js)
			
				var div = document.createElement("div");
				div.setAttribute("id","registro"+i);
				document.getElementById("contenedor").appendChild(div);	
				
//ahora recojo los datos de los arrays. (la variable pos me indica que dato tomar)

				archivo = archivos[pos];
				articulo = articulos[pos];

//inserto en el div los datos con la estructura que quiero.
			
				document.getElementById("registro"+i).innerHTML = '<p>'+articulo+'</p><img src="'+archivo+'"/>';

//avanzo una posicion el indice y verifico si no recorri todo el array. (si son dos no importa ya que deberian ser del mimo tamaño)
				
				pos++;
				if(pos>=(articulos.length)){pos = 0}
			}
		}
			
		window.onload = MostrarRegistos; // cuando cargo la pagina muestro los primeros tres articulos. (esto evita que alla un delay para mostrar los primeros tres)
		
		setInterval(MostrarRegistos,1000) // cada cierto tiempo vuelvo a ejecutar la funcion y voy mostrando los siguientes tres articulos. 
		
	</script>
	
</head>
<body>

	<div id="contenedor"></div>

</body>
</html>

Obviamente yo los array los completo a mano pero ese código lo genera tu php. Y si la estructura html que queres generar es distinta a un párrafo seguido por una imagen (o si caso la estructura ya la pasas desde php) basta con modificar el innerHTML.

Espero que puedas lograrlo ahora.

Saludos!

azaz · #11 (**permalink**) 16/06/2011, 14:57

inieva muchas gracias tienes razon antes no lo entendi bien tu codigo pero ahora si que lo entiendo pero no entiendo la parte para crear los tres div que quiero en html como tendria que ser?alguna ayuda

_cronos2 · #12 (**permalink**) 16/06/2011, 14:57

No creo que sea una buena solución crear los divs dinámicamente cada segundo (o cada 10 segundos, da igual). Además, no estás borrando los anteriores, así que los id se repiten.
Saludos (:

inieva · #13 (**permalink**) 16/06/2011, 15:03

Código:

<html>
<head>
	<title>Ejemplo</title>
	<script type='text/javascript'>
	
		var articulos = [
			"articulos 1",
			"articulos 2",
			"articulos 3",
			"articulos 4",
			"articulos 5",
			"articulos 6",
			"articulos 7",
			"articulos 8"
		];
				
	
		var archivos = [
			"archivo1.jpg",
			"archivo2.jpg",
			"archivo3.jpg",
			"archivo4.jpg",
			"archivo5.jpg",
			"archivo6.jpg",
			"archivo7.jpg",	
			"archivo8.jpg",
		];		
	
		var pos = 0;
		
		
		function MostrarRegistos(){  

			for (i=1;i<=3;i++){
				
				archivo = archivos[pos];
				articulo = articulos[pos];
			
				document.getElementById("registro"+i).innerHTML = '<p>'+articulo+'</p><img src="'+archivo+'"/>';
				
				pos++;
				if(pos>=(articulos.length)){pos = 0}
			}
		}
			
		window.onload = MostrarRegistos;
		
		setInterval(MostrarRegistos,1000)
		
	</script>
	
</head>
<body>

	<div id="registro1"></div>
	<div id="registro2"></div>
	<div id="registro3"></div>

</body>
</html>

Saludos!

azaz · #14 (**permalink**) 16/06/2011, 15:05

_cronos2 que me aconsejas entonces?

azaz · #15 (**permalink**) 16/06/2011, 15:46

bueno me mirame bien el codigo y hos comentare algo que tal me fue gracias por todo saludos

azaz · #16 (**permalink**) 17/06/2011, 05:18

ya lo consegui muchas gracias a todos y sobretodo a inieva saludos

azaz · #17 (**permalink**) 17/06/2011, 07:20

no acabo de completar el codigo yo en el inerHTML quiero meter los datos en una tabla esto es posible
por ejemplo por decir algo

innerHTML='<table>
<tr>
<td><img class="archivo" src="/tienda_online/'+archivo+'"></td><td>'+nombre+'</td>
</tr>
</table>';

realmente como tendria que hacer para los datos que pongo en innerHTML poder darles estilos esque no acabo de completar el codigo no se si fallo alguna comillas

_cronos2 · #18 (**permalink**) 17/06/2011, 08:05

Lo que pasa es que en JS, a diferencia de PHP, no se pueden tener cadenas con saltos de línea "explícitos". Es decir:

Código Javascript:

Ver originalvar str = 'Esto es una
cadena con
saltos de línea'; // Error

Lo que puedes hacer es esto:
A) Los saltos de línea son para ordenar el string a la vista humana, pero no son importantes en la cadena:

Código:

var str = 'Esto es una\
 cadena con\
 saltos de línea'; // "Esto es una cadena con saltos de línea"

Lo que hace la barra (\) es decirle a JS que ese salto de línea no sea tomado en cuenta en el string, y que el mismo continúa.
B) Los saltos de línea sí son importantes para la cadena:

Código:

var str = 'Esto es una\n\
 cadena con\n\
 saltos de línea';
/*
"Esto es una
cadena con
saltos de línea"
*/

Simplemente añade un salto de línea (\n) antes de cada salto de línea en el código.
Saludos (:

azaz · #19 (**permalink**) 17/06/2011, 08:22

_cronos2 muchas gracias osea que yo en innerHTML puedo incluir el codigo html que quiera con etiquetas class= o atributos cepalding todo respetando los saltos de linea?

azaz · #20 (**permalink**) 17/06/2011, 08:51

solucionado gracias a todos saludos