[SOLUCIONADO] Quitar div en funcion del ancho de pagina

[biechevarria]

Hola.
Buenos dias.

Me gustaria saber como puedo hacer desaparecer un DIV en funcion del ancho de la pagina.

Saludos a todo el mundo de antemano.

[iblancasa]

Comprueba el ancho de la página y mira si añadirlo o no (tocando el DOM).

Después, si quieres que aparezca o desaparezca si el usuario redimensiona la ventana, tendrás que implementarlo en el evento onWindowResize

[fede5426]

Las media queries de CSS no sirven para tu caso?

Código CSS:

@media screen and (max-width:720px){
   div{
      display:none;
   }
}
 

Asi de simple..

En ese ejemplo el div se oculta si la ventana es menor de 720px.

Agrego:

La forma de hacerlo con Jquery seria asi:

Código Javascript:

$(window).resize(function() {
 
    if($(window).width() <= 720){
        $("div").hide()
    }
    else{
        $("div").show()
    }
    
});
 

[biechevarria]

¿se podria utilizar la misma funcion para que la pagina mantubiera un formato entre 800px y 200px?

ex.
$(window).resize(function() {

if($(window).width() >800 & <2000){
$("div#imagen_tenis1").hide()
}
else{
$("div#imagen_tenis1").show()
}

});

¿En caso de que si, donde se pondrian las reglas?

Un fuerte abrazo a todos
y gracias.

[fede5426]

No entiendo la pregunta.

Lo que más o menos entiendo es que querés que la imagen solo aparezca en determinada resolución. Es decir, por ejemplo si quisieras que la imagen desaparezca entre 400 y 600px, el código seria asi:

Código Javascript:

$(window).resize(function() {
 
    if($(window).width() > 400 && $(window).width() < 600 ){
        $("div").hide()
    }
    else{
        $("div").show()
    }
    
});
 

Esto: if($(window).width() > 400 && $(window).width() < 600 )

Se traduce: Si el ancho de la ventana es mayor a 400px y (&&) menor a 600px... haz esto. {...}

Pero podrías simplificarlo con media queries:

Código CSS:

@media screen and (max-width:600px) and (min-width:400px){
    div{
        display:none;
    }
}
 

No entiendo por que insistís en usar jquery.

Vamos a ser más claros.. podrías decir exactamente qué es lo que querés hacer? Me da la impresión de que te estás complicando la vida por algo muy sencillo.

Saludos

[biechevarria]

Gracias por responder fede me has resuelto el problema!

He ahi otra pregunta:

¿como puedo hacer desaparecer un div y sustituirlo por otro?

Te explico: tengo un slideshow que no es responsive y en el formato responsive solo quiero que aparezca la imagen corporativa.

Saludos crack!

[fede5426]

De la misma manera..

Teniendo esta estructura y suponiendo que uno de los divs es el slider y el otro es la imagen:

Código HTML:

<div class="rojo"></div>
<div class="verde"></div>
 

Código CSS:

div{
    width:200px;
    height:200px;
}
 
.rojo{
    background-color:red;
}
 
.verde{
    background-color:green;
    display:none;
}
 

Con media queries lo haces asi:

Código CSS:

@media screen and (max-width:600px){
    .rojo{
        display:none;
    }
    
    .verde{
        display:block;
    }
}
 

Y con jquery seria de esta manera:

Código Javascript:

$(window).resize(function() {
 
    if($(window).width() < 600){
        $("div.rojo").hide()
        $("div.verde").show()
    }
    else{
        $("div.verde").hide()
        $("div.rojo").show()
    }
    
});
 

Los colores son como ejemplo para que se vea el cambio nada mas.

http://codepen.io/fede5426/pen/vOpaJN

En el codepen están empleadas las 2 formas, apenas entres se ve con jquery, si borras ese código y quitas el comentario del css donde están las media queries vas a ver que funciona de la misma manera.

Saludos