Foros del Web » Programando para Internet » Javascript »

Css Random

Estas en el tema de Css Random en el foro de Javascript en Foros del Web. Buenas! Necesito que cada vez que aprete un link, ese link cambie una variable que contiene un numero random, esto lo pude lograr en php, ...
  #1 (permalink)  
Antiguo 26/10/2010, 14:12
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 15 años, 5 meses
Puntos: 0
Css Random

Buenas!
Necesito que cada vez que aprete un link, ese link cambie una variable que contiene un numero random, esto lo pude lograr en php, pero el problema es que al hacer una vez click en ese link cambia pero luego para que vuelva a cambiar a otro numero random, necesito darle un refresh a la web, alguien tiene idea como hacer que se pueda cambiar el valor a la variable sin la necesidad de que recargue la web.
Ejemplo: al hacer click en el enlace, r=1, al hacer click otra vez en el enlace r=4, sin la necesidad de que se tenga que volver a cargar la web.
Yo tengo este codigo

Código HTML:
Ver original
  1. <a id="back_change" href="#" onclick="<?php $i=rand(1,30); echo $i;?>" rel="../css/backgrounds/<?php echo $i?>.css" style="background:url(../images/paint-can.png) no-repeat; height:16px; width:16px;"><?php /*?>echo $i<?php */?></a>

GRACIAS!
  #2 (permalink)  
Antiguo 26/10/2010, 14:59
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 9 meses
Puntos: 105
Respuesta: Css Random

El php solo se carga una vez... para volver a ejecutar php, tienes que llamar al archivo.... ya sea recargando la web o con ajax....

Puedes solucionarlo con javascript...

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 26/10/2010, 15:04
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Css Random

pero como? tenes idea, porque con javascript no puedo llamar la variable para que reemplaze el nombre del css, como explico en el codigo de arriba, si me explicas como, te voy a agradecer infinitamente, me estoy volviendo loco tratando de hacer funcionar esa opcion :S
GRACIAS Masterojitos!
  #4 (permalink)  
Antiguo 26/10/2010, 15:18
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Css Random

Con JavaScript puedes cambiar las propiedades del elemento de una manera sencilla, te pongo un ejemplo:

Código Javascript:
Ver original
  1. var Helper = {
  2.  
  3.    change : function(id){
  4.       var a = document.getElementbyId(id),
  5.            n = Math.round(Math.random()*30);
  6.      
  7.       a.rel = "../css/"+n+".css";
  8.    }
  9.  
  10. };

Algo así quedaría tu código, es cosa de que pruebes.

Saludos
  #5 (permalink)  
Antiguo 26/10/2010, 15:24
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Css Random

Gracias Stock, pero como hago para que funcione cada vez que apreto el link?
  #6 (permalink)  
Antiguo 26/10/2010, 15:27
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Css Random

Necesitas agregar un listener al elemento, para internet explorer usas "attachEvent" y para el resto de los navegadores que siguen los estandars adecuadamente usas "addEventListener".

Te dejo un ejemplo sencillo para que tu lo extiendas y adaptes a tus encesidades, pero la idea es esta:

Código Javascript:
Ver original
  1. var Helper = {
  2.  
  3.    change : function(id){
  4.       var a = document.getElementbyId(id),
  5.            n = Math.round(Math.random()*30);
  6.      
  7.       a.rel = "../css/"+n+".css";
  8.    }
  9.  
  10. };
  11.  
  12.  
  13. window.onload = function(){  //<--- en lugar de usar esto, intenta usar addEventListener y attachEvent, no te lo pongo así para hacer las cosas más sencillas, pero no es buena idea hacerlo de esta manera
  14.  
  15. var el = document.getElementById("link");
  16.  
  17. el.addEventListener("click",function(){  //<--- esto no funcionará en explorer, pero haz una utiliería que te permita agregar listeners adecuadamente ;)
  18.  
  19.    Helper.change("link");
  20.  
  21. },false);
  22.  
  23.  
  24. }


y el HTML quedaría algo así:

Código HTML:
Ver original
  1. <a id="link" href="#" href="http://www.forosdelweb.com/f13/css-random-854247/...">Test</a>
  #7 (permalink)  
Antiguo 26/10/2010, 15:30
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 9 meses
Puntos: 105
Respuesta: Css Random

Yo creo que es mas simple que eso..... algo asi:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>TEST</title>
  5. <script type="text/javascript">
  6. function rand(min, max){
  7.     var argc = arguments.length;
  8.     if(argc == 0){
  9.         min = 0;
  10.         max = 2147483647;
  11.     }else if(argc == 1){
  12.         return "Warning: rand() expects exactly 2 parameters, 1 given";
  13.     }
  14.     return Math.floor((Math.random() * (max - min + 1)) + min);
  15. }
  16.  
  17. function change(){
  18.     aleatorio = rand(1, 30);
  19.     document.getElementById("back_change").rel = '../css/backgrounds/' + aleatorio + '.css';
  20.     document.getElementById("back_change").innerHTML = aleatorio;
  21. }
  22. </head>
  23. <body onload="change()">
  24. <a id="back_change" href="#" onclick="change()" style="background:url(../images/paint-can.png) no-repeat; height:16px; width:16px;"></a>
  25. </body>
  26. </html>
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 26/10/2010, 15:40
 
Fecha de Ingreso: noviembre-2008
Mensajes: 130
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Css Random

MASTEROJITOS, muchisimas gracias! ese codigo me anduvo a la perfeccion! GENIO! ahora te mando puntos :)
  #9 (permalink)  
Antiguo 26/10/2010, 15:40
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 10 meses
Puntos: 53
Respuesta: Css Random

@masterojitos, quizás es "más simple" lo que propones pero varias cosas que deberíamos tomar en cuenta cuando programamos JavaScript ;)

* Separar el JavaScript del HTML
* Evitar usar el Global Scope
* Empaquetar el código
* Usar listeners adecuadamente
* etc...

Yo refactorizaría tu código de la siguiente manera:

Código Javascript:
Ver original
  1. var App = {
  2.    rand : function(min, max){
  3.       var argc = arguments.length;
  4.       if(argc == 0){
  5.          min = 0;
  6.          max = 2147483647;
  7.       }else if(argc == 1){
  8.          throw "Warning: rand() expects exactly 2 parameters, 1 given";
  9.       }
  10.       return Math.floor((Math.random() * (max - min + 1)) + min);
  11.    },
  12.  
  13.    change : function(id){
  14.       var aleatorio = this.rand(1, 30),
  15.          a = document.getElementById(id);
  16.  
  17.          a.rel = '../css/backgrounds/' + aleatorio + '.css';
  18.          a.innerHTML = aleatorio;
  19.    },
  20.  
  21.    on   : function(elem,type,cb,scope){
  22.         if(!elem){throw "El elemento es obligatorio!";}
  23.         scope = scope || elem;
  24.         cb = cb || function(){};
  25.        
  26.         if (document.addEventListener){
  27.             elem.addEventListener(type, function(event){
  28.                 cb.call(scope,elem,event);
  29.             },false);
  30.    
  31.         }else if(document.attachEvent){
  32.             elem.attachEvent( 'on' + type, function() {
  33.                 cb.call(scope,elem, window.event);
  34.             });
  35.         }
  36.    }
  37. }
  38.  
  39.  
  40.  
  41. App.on(window, "load", function(){
  42.  
  43.    var link = document.getElementById("back_change");
  44.  
  45.    App.on(link,"click",function(){
  46.  
  47.         App.change("back_change");
  48.  
  49.     });
  50.  
  51.    App.on();
  52.  
  53. });


Buen día :)

Última edición por stock; 26/10/2010 a las 15:50
  #10 (permalink)  
Antiguo 26/10/2010, 16:22
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 9 meses
Puntos: 105
Respuesta: Css Random

Bueno no soy un experto en javascript... soy mas de php....
Pero con lo que se ayudo en lo que puedo ^^

Ademas, podria decir que mi javascript era nivel basico y tu lo llevaste al nivel avanzado ^^

Ahora preguntale a DeCodigos cual usara y veras ^^

Dios Bendiga a todos
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog

Etiquetas: ajax, numero, php, random
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 12:11.