प्रदर्शन को लाइव चौड़ाई और ऊंचाई मूल्यों

Question

आकार बदलने एचटीएमएल सिर में:

<script type="text/javascript"> 
    var myWidth = 0, myHeight = 0; 
    if(typeof(window.innerWidth) == 'number') { 
     myWidth = window.innerWidth; myHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight)) { 
     myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; 
    } 
</script> 

एचटीएमएल शरीर में:

<script type="text/javascript"> 
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>'); 
</script> 

यह अच्छा काम करता है। सवाल यह है कि ब्राउज़र का आकार बदलते समय मुझे चौड़ाई/ऊंचाई मान प्रदर्शित करने के लिए कैसे हो सकता है? नीचे बाएं कोने पर http://quirktools.com/screenfly/ की तरह।

बहुत धन्यवाद!

Answer 1

window.onresize से बांधें। document.write() का उपयोग न करें। अपने एचटीएमएल में <p> रखो और इसे एक आईडी दें। तो बस सीधे तत्व के innerHTML सेट:

window.onresize = displayWindowSize; 
window.onload = displayWindowSize; 
function displayWindowSize() { 
    // your size calculation code here 
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight; 
}; 

Answer 2

या, यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आप .resize(handler) का उपयोग किसी भी पैरामीटर के बिना आकार घटना और .resize() कब्जा करने के लिए कर सकते हैं खिड़की है जब प्रारंभिक घटना को गति प्रदान करने लोडिंग हो गई।

इस तरह:

$(window).resize(function() { 
    // your size calculation code here 
    $("#dimensions").html(myWidth); 
}).resize(); 

Demo in Fiddle

Answer 3

मैं gilly3 के समाधान की तरह है, लेकिन यह पूरा कोड के लिए उपयोगी होगा

<script> 
    window.onresize = displayWindowSize; 
    window.onload = displayWindowSize; 

    function displayWindowSize() { 
     myWidth = window.innerWidth; 
     myHeight = window.innerHeight; 
     // your size calculation code here 
     document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight; 
    }; 
</script>