jQuery: élément de redimensionnement coupe l'arrière-plan parent

Question

J'ai essayé de recréer un effet de ce tutoriel: http://jqueryfordesigners.com/jquery-look-tim-van-damme/

Malheureusement, je veux une image de fond en dessous et à cause de la Redimensionner passe en JavaScript, il devient redimensionnées et couper ainsi, comme ceci: http://dev.gentlecode.net/dotme/index-sample.html - vous pouvez voir la source là pour vérifier le code HTML, mais la structure de base ressemble à ceci:

<div class="page"> 
    <div class="container"> 
     div.header 
     ul.nav 
     div.main  
    </div> 
</div> 

Voici mon code jQuery:

$('ul.nav').each(function() { 
    var $links = $(this).find('a'), 
     panelIds = $links.map(function() { return this.hash; }).get().join(","), 
     $panels = $(panelIds), 
     $panelWrapper = $panels.filter(':first').parent(), 
     delay = 500; 

    $panels.hide(); 

    $links.click(function() { 
     var $link = $(this), 
      link = (this); 

     if ($link.is('.current')) { 
      return; 
     } 

     $links.removeClass('current'); 
     $link.addClass('current'); 

     $panels.animate({ opacity : 0 }, delay); 
     $panelWrapper.animate({ 
      height: 0 
     }, delay, function() { 
      var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight(); 

      $panelWrapper.animate({ 
       height: height 
      }, delay); 
     }); 
    }); 

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

    $links.filter(showtab).click(); 

}); 

Dans cet exemple, panelWrapper est un div.main et il est redimensionné pour s'adapter au contenu des onglets. L'arrière-plan est appliqué au div.page, mais comme son enfant est redimensionné, il est également redimensionné, ce qui coupe l'image d'arrière-plan.

Il est difficile d'expliquer alors s'il vous plaît regardez le lien ci-dessus pour voir ce que je veux dire.

Je suppose que ce que j'essaie de demander est: est-il un moyen de redimensionner un élément sans redimensionner son parent? J'ai essayé de régler height et min-height de .page à 100% et 101% mais cela n'a pas fonctionné. J'ai essayé de faire l'image de fond fixe, mais nada. Cela arrive aussi si j'ajoute l'arrière-plan au corps ou même au HTML. Aidez-moi?

Answer 1

Une autre solution pourrait être d'utiliser jquery pour définir une hauteur minimale sur l'élément .page. La hauteur doit être définie en pixels et non en pourcentage. J'ai testé ce qui suit et cela fonctionne:

$('.page').css('min-height',$('body').height()+'px'); 

Mais vous devrez l'exécuter chaque fois que la fenêtre du navigateur est redimensionnée.

Pour une solution entièrement non-javascript, vous pouvez placer les bulles dans un div positionné derrière le contenu. Utilisez le CSS suivant pour faire la div remplir l'écran:

position:absolute; 
left:0px; 
right:0px; 
top:0px; 
bottom:0px; 
z-index:1; 

Vous devrez vous assurer que cela ne siège pas au-dessus de votre contenu de la page en donnant qu'une plus z-index (pour z-index de prendre effet que vous devra régler position:relative ou position:absolute sur le contenu de la page)

Answer 2

Avez-vous essayé d'ajouter min-height: 100%; background-attachment: fixed; à l'élément corporel? Toutefois, il se peut que le background-attachment ne soit pas nécessaire.

Answer 3

Pourriez-vous ajouter l'image d'arrière-plan au corps au lieu de l'élément .page?

.page { 
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat; 
overflow: hidden; 
} 

Le corps remplit la fenêtre du navigateur, mais le .page div est seulement aussi grand que son contenu, ce qui est pourquoi il se couper que le contenu anime.