Modificar posición según ancho de pantalla

[ceaped]

Buenos días
Utilizo este código:

Código Javascript:

<script>
jQuery(document).ready(function(){
if (jQuery(document).width()< 680){
jQuery('.texto_inicial').style.background = '#FF0000'; }
}
)
</script>
 

Lo que deseo es cambiar el color de fondo cuando el navegador sea menor de 680, pero no sucede nada con el código que puse.

¿Cómo lo hago?

Gracias por su ayuda

[GeekGirl]

Tu código únicamente va a funcionar cuando al abrir por primera vez el navegador, el ancho del mismo sea menos a 680. Vos querés que pase al redimensionarlo? Eso lo podés hacer así:

Código Javascript:

$(document).ready(function(){
  $(window).resize(function() {
    if ($(this).width()< 680){
      $('.texto_inicial').style.background = '#FF0000'; 
    }
  });
});
 

Y si es solamente para el color de fondo, ni siquiera necesitas codear. Simplemente podés usar media-queries de CSS.

Código CSS:

@media screen and (max-width: 680px) {
    .texto_inicial {
        background: #FF0000;
    }
}
 

Saludos :)

[ceaped]

Hola GeekGirl
El Código Javascript no me funciona... :(
Es el que deseo usar

Gracias por tu ayuda

[GeekGirl]

No te funciona el ejemplo que te pasé? Cuál es el problema? Yo lo probé sin inconvenientes en mi máquina. Qué navegador es y qué versión de jQuery estás usando?

[ceaped]

Hola GeekGirl
Tengo esta versión:
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */

No hace nada.

Gracias por tu ayuda

[GeekGirl]

Yo probé el ejemplo con la misma versión de jQuery y funciona perfectamente. No te sale error en la consola? Seguramente otra cosa de tu código esté molestando.

[ceaped]

Hola GeekGirl
No errores no veo.
Mira esto es lo que quiero, pero no me funciona sino "$(this).width()> 240":

Código Javascript:

<script type="text/javascript">
$(document).ready(function () {
    
    if ($(this).width()< 740){
        $('.texto_inicial').css({
            display: 'inline-block',
            position: 'relative',
            top: '800px',
            background: '#FF0000'
        });
    }
    
    if ($(this).width()> 240){
        $('.texto_inicial').css({
            display: 'inline-block',
            position: 'relative',
            top: '-825px',
            background: '#FFDD00'
        });
    }
});
</script>
 

Yo que quiero?, que cuando el navegador este de 240 pase algo y cuando este de 740 pase algo distinto.

Me das una mano con este código

Gracias por tu ayuda

[GeekGirl]

Tus condiciones se están solapando. Deberías hacer algo así:

Código Javascript:

<script type="text/javascript">
$(document).ready(function() {
    if ($(this).width() > 240 && $(this).width() < 740)){
        $('.texto_inicial').css({
            display: 'inline-block',
            position: 'relative',
            top: '800px',
            background: '#FF0000'
        });
    }
    
    if ($(this).width() <= 240){
        $('.texto_inicial').css({
            display: 'inline-block',
            position: 'relative',
            top: '-825px',
            background: '#FFDD00'
        });
    }
});
</script>
 

[ceaped]

Hola GeekGirl
Funciona bien. Gracias
Una última pregunta.
Si tengo el navegador de 240px hasta 744px ".texto_inicial" esta bien pero desde 745px hasta 800px se baja 800px.

¿Cómo hago para que se vea bien?

Gracias por tu ayuda

[GeekGirl]

Bueno poné un poco de tu parte y resolvelo solo... ya tenés el 80% del código hecho. Falta incluir la condición mayor a 740.

Saludos

[rottenp4nx]

CSS Media Querys, un consejo :)
así no sobrecargas el navegador con JS.

Saludos

[GeekGirl]

Se los recomendé al principio, pero parece que por algún motivo quiere resolverlo con JS.

[rottenp4nx]

Creo que es mejor, eficiente y sencillo.

[ceaped]

Hola GeekGirl y rottenp4nx
No soy muy experto en los CSS Media Querys
Me indican como lo prodría hacer.

Gracias por su ayuda

[GeekGirl]

Te lo indiqué en la primera respuesta:

Iniciado por GeekGirl

Código CSS:

@media screen and (max-width: 680px) {
    .texto_inicial {
        background: #FF0000;
    }
}
 

No esperes el código completo. Pon un poco de esfuerzo. Acá vas a encontrar documentación del tema: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[ceaped]

Hola GeekGirl
Si tienes toda la razón los Media Querys sería lo indicado de hecho los utilizo.
Es un poco confuso explicar en texto y como apenas tengo todo en construcción no tengo ningún ejemplo para mostrarte, pero bueno muchas gracias por tu ayuda y aporte.

Te cuento que en este caso si necesito la segundo opción y el ejemplo que me diste me funcionó.

Ahora no se cómo bajar una div cuando un menú se abra.
- Tengo la pantalla a una resolución de 380px.
- Tengo un contenido en una div.
- Cuando doy click se abre el menú.
- El menú queda sobre el contenido y yo quiero que cuando se abra el menú se baje el contenido.

Algo así:

Código Javascript:

if ($(this).width() >= 240 && $(this).width() <= 800){
        $('nav ul li a' >= 'iframe').css({
            marginTop: '250px',
           
        });
    }
 

Gracias por tu ayuda

[ceaped]

Holasss
No me da esto... :(
Así lo tengo y no me hace nada:

Código Javascript:

if (window.onclick=ocultar){
        $('iframe').css({
            marginTop: '260px',
           
        });
    }
 

Código HTML:

<li id="cero"><a class="menu" href="#pestana" onclick="ocultar()">Contenido</a></li>
 

Gracias por su ayuda

[ceaped]

Listooo me dio... :)

Código Javascript:

window.onclick = moveriframe;   
    function moveriframe() {
    document.getElementsByTagName("section")[0].style.marginTop = "270px";
    document.getElementsByTagName("footer")[0].style.marginTop = "530px";
 

¿Cómo hago un condicional con este código?

if (section >= menu){
marginTop: '260px'
}else
if section <= menu){
marginTop: '0'
}

Más o menos esto es lo que quiero

Gracias por su ayuda