jQuery de modifier dynamiquement la hauteur d'élément
Je suis en train de travailler sur un design fluide projet. J'ai une certaine hauteur fixe DIVs dans mon document, et les hauteurs sont différentes pour chacun d'eux. J'ai besoin d'proportionnellement modifier ces DIVs de la hauteur du navigateur pour le redimensionner. Voici le balisage.
<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>
Et css:
<style>
body { width: 90%; margin: 0 auto;}
.target { width:30%; float:left; margin:1.6%; cursor:pointer; }
#a { height: 200px; background-color: yellow;}
#b { height: 400px; background-color: green;}
#c { height: 600px; background-color: grey;}
</style>
Semble facile!
La condition principale est que je ne sais pas le precize montant de la cible DIVs et leur Id, c'est pourquoi je suis à l'aide .each(function()).
Voici le script que j'ai écrit:
$(document).ready(function(){
//set the initial body width
var originalWidth = 1000;
/*I need to go through all target divs because i don't know
how many divs are here and what are their initial height*/
$(".target").each(function()
{
//get the initial height of every div
var originalHeight = $(this).height();
//get the new body width
var bodyWidth = $("body").width();
//get the difference in width, needed for hight calculation
var widthDiff = bodyWidth - originalWidth;
//new hight based on initial div height
var newHeight = originalHeight + (widthDiff / 10);
//sets the different height for every needed div
$(this).css("height", newHeight);
});
});
Ce script fonctionne parfaitement lorsque l'utilisateur de recharger la page.
Comment puis-je obtenir les mêmes résultats dinamically, lorsque l'utilisateur redimensionne le navigateur sans avoir à recharger?
Je sais que je devrais appliquer $(window).redimensionner écouteur d'événement. Mais le problème est que la DIV initiale de hauteur sera calculée à l'intérieur de l'événement et le résultat sera almoust comme boucle sans fin - c'est la finale de la hauteur de l'augmentation ou de la diminution énorme progression. Je n'ai pas besoin que!
Comment puis-je faire chaque DIV hauteur initiale de calcul à l'extérieur de fonction d'événement, puis l'utilisation de ces hauteurs en fonction d'événement? Ou peut-être il ya une autre approche pour obtenir le même résultat?
OriginalL'auteur theCoder | 2012-06-16
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin de stocker la hauteur d'origine de chaque div. Il y a différentes façons de le faire, voici un hack, de le stocker dans le nœud DOM lui-même (il y a de meilleures manières, mais c'est rapide et sale).
OriginalL'auteur Juan Mendes
Envelopper votre redimensionner la fonctionnalité et abonnez-vous à la fenêtre de l'événement de redimensionnement.
OriginalL'auteur Gabe
prendre un coup d'oeil à l'événement de redimensionnement que vous pouvez lier avec jquery
http://api.jquery.com/resize/
OriginalL'auteur Nir
utilisation .de données pour stocker la taille initiale de la div à l'intérieur de votre $.chaque fonction
vous pouvez retrouver plus tard la vieille tailles au sein de la redimensionner rappel
Espère que cette aide
OriginalL'auteur chris_code