Cambiar pagina cada cierto tiempo jquery

[Oscar_Hidro]

Hola foreros. Acabo de publicar un tema similar, aunque lo que voy a preguntar aqui, es distinto a lo que expuse en el otro tema.

En el tema anterior, quiero saber como cambiar estilos css automaticamente cada cierto tiempo. Aqui lo que me interesa saber, es si existe alguna forma de cambiar paginas automáticamente. Es decir, si tengo 3 diseños diferentes de mi página, puedo lograr que estas estén cambiando de forma aleatoria automaticamente cada cierto tiempo(segundos)???

Y si existe la forma, como podria hacerlo?

Saludos a todos, y gracias

[Hugo_Euan]

Hola Oscar_Hidro

En cualquiera de tus dos casos necesitas manejar un intervalo de tiempo... esto lo puedes lograr con setInterval... esta función requiere 2 parametros...
el primero es el evento a ejecutar y el segundo es el tiempo de ejecucion...

setInterval(parametro1, parametro2);

para tu primer caso necesitas definir estilos en un JSON
y mediante una funcion irlos cambiando en el tiempo definido que tengas por ejemplo...

Código Javascript:

var Styles = {CSSStyle:["background-image", "background-color"], Values:["imagen1.png", "#FFF"]} //variable JSON que contiene el tipo de estilo y su valor en su debido orden
var Interval = 5000 //esto es en milisegundos (equivale a 5 segundos)
var Timer= setInterval("CHANGE_STYLE()", Interval);
var Counter = 0;//Este contador manejara la posicion del estilo que se aplicará
var ThisObjetc = '#objeto'; //aquí va el id o clase del objeto para asignarlo a jQuery
 
function CHANGE_STYLE(){
    if(Counter == Styles.CSSStyle.length){//si Counter es igual a Styles.CSSStyle.length (osea 2 en este caso)
        Counter = 0
    }else{
//aplicamos el estilo al objeto [B]ThisObjetc[/B]
        $(ThisObjetc).css(Styles.CSSStyle[Counter], Styles.Values[Counter]);
        Counter++;  
    }
}
 

no he probado si funciona.. lo escribí por dar un ejemplo.. ojala no tenga error... pero cabe mencionar que las variables... tienen que estar en un evento de inicializacion.. osea...
dentro del ready de jQuery o window.onLoad de JavaScript.....


Este mismo método puedes emplear para hacer el cambio de tus paginas...
solo pones la ruta dentro de JSON.... y utilizas html(); de jquery...

$(objeto).html("lo que vaya aqui siempre remplaza el contenido que ya tiene el objeto");


que te sea de utilidad...

SALUDOS y ÉXITO !!!


EDITO:

por cierto.. si quieres saber un poco mas de JSON (por si no sabes) te invito a googlear un poco, inclusive te invito a visitar esté tema...

http://www.forosdelweb.com/f13/json-...0/#post3938369

es muy interesante....

SALUDOS !!!

[Oscar_Hidro]

Hugo, muchas gracias por tu aportacion. De inmediato me voy a investigar JSON.

Aprovechando tu aportacion, queria hacerte una consulta. El hecho de que en este tema comente que estoy tratando de cambiar paginas con cierto intervalo de tiempo, es para evitar cambiar los estilos css directamente, puesto que tengo 3 paginas similares en distintos colores, y estas a su vez llevan las mismas imagenes en un slide, pero en su color dependiendo del color de la pagina.

Al querer cambiar las paginas automaticamente, me evitaria tener que cambiar los estilos css y a su vez, las imagenes del slide que corresponden a su color de pagina.

con JSON puedo reemplazar las imágenes del slide como si cambiara una hoja de estilo????

[Hugo_Euan]

JSON solo es una pila (conjunto de elementos)... ahi defines... un atriburo.. con su valor....
si tu defines

var JSON = {Images:["image1.jpg", "image2.jpg", "image3.jpg"]} //asi infinitamente

tienes que tener una funcion que controle esos atributos y valores...

supon que tienes

Código HTML:

<img id="MyImage" src="arbolitos.jpg" />
 

definiriar una funcion asi

Código Javascript:

var Interval = 5000 //esto es en milisegundos (equivale a 5 segundos)
var Timer= setInterval("CHANGE_IMAGE()", Interval);
var Counter = 0;//Este contador manejara la posicion del estilo que se aplicará
var JSON = {Images:["image1.jpg", "image2.jpg", "image3.jpg"]}
 
function CHANGE_IMAGE(){
if(Counter == JSON.Images.length){
Counter = 0;
}else{
$("#MyImage").attr("src", JSON.Images[Counter]);
}
}
 

de esta manera tu imagen cambiaria cada 5 segundos.. por las imagenes que tienes definidas en el JSON....
como vez.. solo es usar un poco la imaginacion y la lógica.
hay distintas formas de solucionar cada necesidas... :)


SALUDOS y ÉXITO...

[Oscar_Hidro]

Hermano, muchas gracias por la orientacion. Te mando un fuerte abrazo y disfruta de las fiestas

[Hugo_Euan]

Iniciado por Oscar_Hidro

Hermano, muchas gracias por la orientacion. Te mando un fuerte abrazo y disfruta de las fiestas

Al contrario... un placer poder ayudarte...

FELICES FIESTAS

Por cierto.. yo te recomiendo.. "jugar" con los estilos en vez de tener 3 paginas..
esto debido a que... cuando quieras cambiar un contenido tienes que hacerlo en las 3.. es mejor tener solo 1...


SALUDOS !!!

[Oscar_Hidro]

Por cierto.. yo te recomiendo.. "jugar" con los estilos en vez de tener 3 paginas..
esto debido a que... cuando quieras cambiar un contenido tienes que hacerlo en las 3.. es mejor tener solo 1...

Es lo que estaba analizando. Las hojas de estilo en mis 3 paginas son exactamente iguales, con la diferencia de colores en algunos apartados. Puedo manejar un solo css, pero como modificar un solo elemento de un class o id, sin necesidad de modificar todas las propiedades.

Por ejemplo, como modificar el border-bottom de la clase .info? En el ejemplo que me diste maneja los cambios en un entorno global en la pagina por decirlo de alguna manera, y estoy buscando como modificar solamente algunos elementos.

Código Javascript:

var Styles = {CSSStyle:["background-image", "background-color"], Values:["imagen1.png", "#FFF"]}
 

[Oscar_Hidro]

Iniciado por Oscar_Hidro

Es lo que estaba analizando. Las hojas de estilo en mis 3 paginas son exactamente iguales, con la diferencia de colores en algunos apartados. Puedo manejar un solo css, pero como modificar un solo elemento de un class o id, sin necesidad de modificar todas las propiedades.

Por ejemplo, como modificar el border-bottom de la clase .info? En el ejemplo que me diste maneja los cambios en un entorno global en la pagina por decirlo de alguna manera, y estoy buscando como modificar solamente algunos elementos.

Código Javascript:

var Styles = {CSSStyle:["background-image", "background-color"], Values:["imagen1.png", "#FFF"]}
 

o como mandar llamar a otro css en el script con json?

:P

[Oscar_Hidro]

Hermano, una disculpa, no habia analizado bien el codigo que me mandaste. Es simplemente referenciar al objeto. Pero es posible llamar a un css en vez el objeto?

Y ya nada mas para terminar, es posible hacer ese cambio con una trs?

[Hugo_Euan]

Iniciado por Oscar_Hidro

Y ya nada mas para terminar, es posible hacer ese cambio con una trs?

con una que ? jeje.. disculpa no entendí
-------------------------------------------------------------------------------------

Si.. simplemente es referenciar el objeto....
el css.. se aplica a un objeto.. asi que a fuerza necesitas el objeto (elemento) no lo puedes quitar

Pero si quisieras iterar entre varios elementos....
puedes crear una variable GLOBAL que cambié segun tu lo necesites.
También los elementos los puedes incluir en el JSON

[Oscar_Hidro]

Y ya nada mas para terminar, es posible hacer ese cambio con una trs?

Jaja, lo que queria decir es que si ese cambio se puede hacerse con un efecto de transision estilo fade???

Y respecto a declarar la variable global, he intentado formarla para referenciar a varios objetos a la vez, y naaaaada que me sale

Lo mismo quiero implementar otro estilo para que me me lo cambie a ese despues de haber hecho el primer cambio de estilos

[Hugo_Euan]

Hola de nuevo... pues.. :)
con respecto a la transicion.. claro que puedes crearla...
jQuery tiene una rutina fx.. con la que puedes crear distintos tipos de transiciones...
la rutina se llama animate y la sintaxis de uso es sumamente sencilla...

por ejemplo.. suponte que tienes un objeto imagen

Código HTML:

<img id="MyImage" src="image1.png" />
 

a ese elemento y cualquier otro puedes darle un efecto.. referenciando su id a un objeto jQuery

Código Javascript:

$("#MyImage").animate({"opacity":1}, 2000);
 

por ende si la imagen ya esta visible.. el efecto no se verá.. por lo que antes.. tienes que eventuar que el objeto tenga una opacidad de 0
esto lo puedes lograr referenciando el objeto 2 veces o haciendo un encadenamiento, que es mejor..

REFERENCIANDO 2 VECES EL MISMO OBJETO (ES CORRECTO, PERO NO ES PERFORMACE DE CODIGO)

Código Javascript:

$("MyImage").css("opacity", 0);
$("MyImage").animate({"opacity":1} 2000);
 

ENCADENAMIENTO CON UNA SOLA REFERENCIA DE OBJETO

Código Javascript:

$("MyImage").css("opacity", 0).animate({"opacity":1} 2000);
 

de esta forma logras tu transición...
esto es solo un ejemplo... existen diversas maneras de aplicar un efecto.. segun el momento en que lo necesites....

con respecto a lo de tu variable global.. pues...

1.- habria que ver de que manera lo haces...
2.- los elementos dentro de esa variable deben contener los mismos atributos a cambiar.(por tratarse de una variable global... por ende cambian todos los elementos al cambiar 1 elemento)

SALUDOS y ÉXITO

[Oscar_Hidro]

Hermano, muchas gracias. Me tarde un poco en responder por aquello de las vacaciones. Efectivamente he logrado mi objetivo con mucha ayuda de tu parte.

Saludos!