jQuery गतिशील रूप से तत्व ऊंचाई

मैं तरल लेआउट प्रोजेक्ट पर काम कर रहा हूं। मेरे पास मेरे दस्तावेज़ में कुछ निश्चित ऊंचाई डीआईवी है, और ऊंचाई उन सभी के लिए अलग है। मुझे ब्राउज़र आकार पर इन डीवीवी ऊंचाई को आनुपातिक रूप से बदलने की आवश्यकता है। मार्कअप यहाँ है।jQuery गतिशील रूप से तत्व ऊंचाई

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

और सीएसएस:

<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>

आसान लगता है! मुख्य स्थिति यह है कि मैं लक्ष्य डीआईवी और उनकी आईडी की प्रीसीज राशि नहीं जानता, इसलिए मैं .each (function()) का उपयोग कर रहा हूं। यहां लिपि है मैंने लिखा:

$(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); 
});

});

यह स्क्रिप्ट पूरी तरह से काम करती है जब उपयोगकर्ता पृष्ठ को फिर से लोड करता है। उपयोगकर्ता एक ही परिणाम को द्विपक्षीय रूप से कैसे प्राप्त कर सकता है, जब उपयोगकर्ता बिना लोड किए ब्राउज़र का आकार बदलता है? मुझे पता है कि मुझे $ (विंडो) .resize ईवेंट श्रोता लागू करना चाहिए। लेकिन समस्या यह है कि डीआईवी की शुरुआती ऊंचाई की गणना घटना के अंदर की जाएगी और नतीजा अंतहीन पाश की तरह होगा- यह कि अंतिम प्रगति बड़ी प्रगति में वृद्धि या कमी होगी। मुझे इसकी ज़रूरत नहीं है! मैं प्रत्येक इवेंट फ़ंक्शन के बाहर डीआईवी प्रारंभिक ऊंचाई गणना कैसे कर सकता हूं और फिर ईवेंट फ़ंक्शन के अंदर इन ऊंचाइयों का उपयोग कैसे कर सकता हूं? या एक ही परिणाम प्राप्त करने के लिए एक और अपील हो सकती है?

स्रोत

2012-06-16 theCoder

आपको प्रत्येक div की मूल ऊंचाई को स्टोर करने की आवश्यकता है। ऐसा करने के कई तरीके हैं, यहां एक हैक है, इसे डीओएम नोड में ही स्टोर करें (बेहतर तरीके हैं, लेकिन यह तेज़ और गंदा है)।

$(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*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._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 = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

स्रोत

2012-06-16 17:45:39

रेली त्वरित और आसान समाधान में मदद करता है। अच्छी तरह से काम। धन्यवाद! – theCoder

आकार घटना पर एक नज़र है कि आप jQuery

http://api.jquery.com/resize/

स्रोत

2012-06-16 17:40:59 Nir

साथ बाध्य कर सकते हैं अपने आकार बदलने कार्यक्षमता समाप्त करें और खिड़की की सदस्यता घटना का आकार बदलने के ले।

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".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); 
    }); 
}

स्रोत

2012-06-16 17:41:00 Gabe

उपयोग .data अपने $ .प्रत्येक समारोह अंदर div की प्रारंभिक आकार स्टोर करने के लिए

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

आप बाद में आकार कॉलबैक

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

आशा के भीतर पुराने आकारों को प्राप्त कर सकते हैं यह

स्रोत

2012-06-16 17:46:16

इसे .data का उपयोग करके काम नहीं कर सकता। लेकिन यह मेरी गलती हो सकती है, मेरे पास बहुत छोटा जावास्क्रिप्ट अनुभव है। फिर भी धन्यवाद। – theCoder

jQuery गतिशील रूप से तत्व ऊंचाई

उत्तर

संबंधित मुद्दे