2013-02-22 3 views
0

En ce moment j'ai un petit projet sur lequel est un site web responsive (utilise la grille responsive de Skeleton) J'utilise jQuery pour centrer le contenu verticalement dans la fenêtre d'affichage. Le problème est que lorsque la fenêtre devient plus petite que la largeur extérieure du conteneur, elle applique toujours une position absolue.Centrer le contenu verticalement sauf si plus grand

Idéalement, je besoin de quelque chose qui dit

Si la fenêtre est identique ou inférieure à la largeur extérieure de .container alors ne pas appliquer de positionnement, si la fenêtre est plus grande que le positionnement absolu .container appliquer pour le centrer dans le port de vue?

Est-ce que quelqu'un sait comment cela peut être réalisé avec Jquery, car je me gratte la tête?

EDIT >>>>>

Would quelque chose comme ça raison, im genre de pailles agrippant ici .....

$(document).ready(function(){ 
$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

$(window).height(); // returns heightof browser viewport 
$(document).height(); // returns height of HTML document 

var width = $(window).width(); 
var height = $(window).height(); 

    if ((width >= 1024 ) && (height>=768)) { 
$(window).resize(function(){ 
    $('.container').css({ 
    position:'absolute', 
    left: ($(window).width() 
- $('.container').outerWidth())/2, 
top: ($(window).height() 
- $('.container').outerHeight())/2 
});  
}); 
// To initially run the function: 
$(window).resize(); 
} 
else { 
//do nothing 
} 
}); 

Répondre

1

En utilisant $(window).width(); // returns width of browser viewport ou $(document).width(); // returns width of HTML document devrait fonctionner en liaison avec

if (width comparison) apply_formatting

+0

J'ai ajouté une modification à vos recommandations, mais je ne sais pas si je l'ai écrit correctement ou non. –

1
<script> 
$(document).ready(function(){     
    $(window).resize(function(){ 
      // Here is the new part: 
      if(($(window).width() > $('.container').outerWidth()) && ($(window).height() > $('.container').outerHeight())){ 
      $('.container').css({ 
        position:'absolute', 
        left: ($(window).width() 
        - $('.container').outerWidth())/2, 
        top: ($(window).height() 
        - $('.container').outerHeight())/2 
      }); 
      }else{ 
      $('.container').css({position:'relative'}); 
      }  

    }); 
    // To initially run the function: 
    $(window).resize(); 
}); 
</script> 

Espérons que cela aide. L'idée est que lorsque la largeur & de la hauteur du conteneur est inférieure à celle de la fenêtre, le positionnement absolu s'applique, sinon le positionnement relatif (normal) s'appliquera.

Questions connexes