Comunidad de diseño web y desarrollo en internet online

Función jquery para resoluciones superiores a 800 px

Citar            
MensajeEscrito el 19 Dic 2012 01:36 pm
Un cordial saludo, quiero utilizar una función jquery pero solo en resoluciones superiores a 800 px, cuando el scroll llega a 520px aparece un botón que se llama subir y a la vez quiero que cuando el scroll esté en esa posición un div pase de posición relativa a Fija, funciona bien, pero el problema es que solo quiero que funcione en resoluciones mayores a 800 px y esta funcionando en todas las resoluciones.

la función que estoy utilizando es esta:

Código Javascript :

<script type="text/javascript" >
if (screen.width >= 800) {
$(document).ready(function($){
$(".subir").hide(); //Esto hace que el div Inicialice Oculto
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 520) { //Esto hace que el Div aparezca de despues de haber bajado 520px con el scroll
                $('.subir').fadeIn(); //Aparece con un efecto Fade
                $('.nombreDelDiv').css("position","fixed");//Este div es cambia a posición Fija
    }
    else {
        $('.subir').fadeOut(); // Desaparece con un efecto Fade
                $('.nombreDelDiv').css("position","relative");  //Vuelve a posición relativa         
            }
        });
        $('.subir a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500); // Todo esto hace que se la pagina se desplace hasta el tope con una lentitud de 500 milisegundos
            return false;
           });
       });
   });
}
</script>


Muchas Gracias.

Por juliovanegas

Claber

161 de clabLevel



Genero:Masculino  

Publicista

safari
Citar            
MensajeEscrito el 19 Dic 2012 02:20 pm
Hola julio, prueba con esto a ver si te sirve...

$(document).ready(function($){
if ($(window).width(); >= 800) {
$(".subir").hide(); //Esto hace que el div Inicialice Oculto
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 520) { //Esto hace que el Div aparezca de despues de haber bajado 520px con el scroll
$('.subir').fadeIn(); //Aparece con un efecto Fade
$('.nombreDelDiv').css("position","fixed");//Este div es cambia a posición Fija
}
else {
$('.subir').fadeOut(); // Desaparece con un efecto Fade
$('.nombreDelDiv').css("position","relative"); //Vuelve a posición relativa
}
});
$('.subir a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); // Todo esto hace que se la pagina se desplace hasta el tope con una lentitud de 500 milisegundos
return false;
});
});
}
});

Por alez91

46 de clabLevel



 

Desarrollador Web

chrome
Citar            
MensajeEscrito el 19 Dic 2012 02:35 pm
Muchas gracias funcionó perfecto, solo que me tocó quitarle el ;

if ($(window).width()[color=][color=];[/color][/color] >= 800) {

Te hago una pregunta, esto solo funciona si la pantalla desde el inicio está en dicha resolución, por ejemplo en una tablet ¿si uno pasa de resolución de horizontal a vertical si toma esta función si hay cambio de tamaño?

gracias de nuevo.

Por juliovanegas

Claber

161 de clabLevel



Genero:Masculino  

Publicista

safari
Citar            
MensajeEscrito el 19 Dic 2012 02:42 pm
Si despues vi el ; , si esto funcionaria desde el inicio, si queres que se ejecute tambien cuando cambia el tamaño de pantalla tendrias que temer todo en una funcion y ejecutar al inicio y tambien cuando $(window).resize(detectarTamanio) suponiendo que todo el codigo anterior lo hallas metido en esa funcion, para que se vea mas claro seria.

$(document).ready(function($){
detectarTamanio();

$(window).resize(detectarTamanio);
})

no olvides definir la funcion je solo puse esa porcion de codigo como para que se entienda mejor

Por alez91

46 de clabLevel



 

Desarrollador Web

chrome
Citar            
MensajeEscrito el 19 Dic 2012 04:29 pm
Me perdí, yo apenas estoy empezando a entender este mundo del código, muchas gracias por tu orientación y paciencia

hice esto y definitivamente no me funcionó:

<script type="text/javascript" >
$(document).ready(function($){
detectarTamanio();
$(window).resize(detectarTamanio);
})
if ($(window).width() >= 800) {
$(".subir").hide(); //Esto hace que el div Inicialice Oculto
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 520) { //Esto hace que el Div aparezca de despues de haber bajado 520px con el scroll
$('.subir').fadeIn(); //Aparece con un efecto Fade
$('.nombreDelDiv').css("position","fixed");
}
else {
$('.subir').fadeOut(); // Desaparece con un efecto Fade
$('.nombreDelDiv').css("position","relative");
}
});
$('.subir a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); // Todo esto hace que se la pagina se desplace hasta el tope con una lentitud de 500 milisegundos
return false;
});
});
}
</script>

Por juliovanegas

Claber

161 de clabLevel



Genero:Masculino  

Publicista

safari
Citar            
MensajeEscrito el 19 Dic 2012 04:31 pm
casi casi jeje solo por no declarar la funcion nunca iba a funcionar jeje te paso el codigo final

<script type="text/javascript" >
$(document).ready(function($){
detectarTamanio();
$(window).resize(detectarTamanio);
})

function detectarTamanio(){
if ($(window).width() >= 800) {
$(".subir").hide(); //Esto hace que el div Inicialice Oculto
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 520) { //Esto hace que el Div aparezca de despues de haber bajado 520px con el scroll
$('.subir').fadeIn(); //Aparece con un efecto Fade
$('.nombreDelDiv').css("position","fixed");
}
else {
$('.subir').fadeOut(); // Desaparece con un efecto Fade
$('.nombreDelDiv').css("position","relative");
}
});
$('.subir a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); // Todo esto hace que se la pagina se desplace hasta el tope con una lentitud de 500 milisegundos
return false;
});
});
}
}
</script>

Por alez91

46 de clabLevel



 

Desarrollador Web

chrome
Citar            
MensajeEscrito el 19 Dic 2012 05:30 pm
Muchas gracias, aún no me ha querido funcionar como yo quiero, te acabo de enviar un mensaje privado, aun no quiero publicar el sitio en el que estoy trabajando porque faltan pulirle muchas cosas.

Por juliovanegas

Claber

161 de clabLevel



Genero:Masculino  

Publicista

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.