Control Window Size with JavaScript. How?

Advavnce JavaScript in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Advance JavaScript in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

Advance JavaScript in Hindi | Page: 669 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

Control Window Size with JavaScript? इससे पहले कि हम Web Browser के Window की Size से संबंधित Properties के बारे में बात करें, पहले हमें किसी भी GUI Window की Anatomy या Structure से सम्बंधित विभिन्न Terms को समझना जरूरी है, ताकि हम Window के Size से सम्बंधित विभिन्न Properties को समझ सकें।

किसी भी GUI Operating System में दिखाई देने वाले Window के मूल रूप से दो हिस्से होते हैं, जिन्हें Client RegionNon-Client Region कहा जाता है। Client Region को सामान्‍यत: Workspace या Page Content Area कहते हैं। यह वही Area होता है, जहां User को Web Page दिखाई देता है। जबकि Non-Client Area के अन्तर्गत Title Bar व Borders आते हैं। Non-Client Area वह Area होता है, जहां User किसी भी तरह का कोई Interaction नहीं कर सकता।

Title Bar व Border यानी सभी Non-Client Region सहित Window की जो Height होती है, उसे Window की Actual Height या Outer Height कहते हैं जबकि Border व Title Bar यानी Non-Client Region को घटाने के बाद जो Height बचती है, उसे Inner Height कहते हैं।

window Object Size Controlling - JavaScript in Hindi

window Object Size Controlling – JavaScript in Hindi

इसी तरह से Left व Right की Border की Width सहित Window की जो Width होती है, उसे Window की Actual Width या Outer Width कहते हैं जबकि Left व Right Side की Border को घटाने के बाद जो बचता है, उसे Inner Width कहते हैं।

Page Content Area की Height व Inner Height तथा Page Container Area की Width व Inner Width में केवल इतना अन्तर होता है कि Page Content Area में Border Included रहता है, जबकि Inner Height व Inner Width में Border Included नहीं होता।

किसी भी Window की Size का Accurate तरीके से पता लगाना भी पूरी तरह से सभी Web Browsers में सम्भव नहीं है, क्योंकि अलग-अलग Web Browsers अलग-अलग तरीके से Window की Size Return करते हैं। फिर भी Firefox, Safari, Opera और Chrome innerWidth, innerHeight, outerWidthouterHeight नाम की चार Properties Provide करते हैं, जिनका प्रयोग JavaScript के माध्‍यम से Window की Size ज्ञात करने के लिए किया जा सकता है।

Firefox व Safari में outerWidthouterHeight Properties, Browser Window का Dimension Return करते हैं। जबकि Opera में outerWidthouterHeight Properties Browser Window के Page View Container का Dimension Return करते हैं जबकि innerHeightinnerWidth Properties, Page View Area को Return करते है, जिसमें Border Included नहीं होता।

Google Chrome में outerWidthouterHeight Properties Viewport की Size Return करते हैं जो कि वास्तव में innerWidthinnerHeight Properties Return होने वाले मान के समान ही होता है। यानी Google Chrome में outerWidthouterHeight Properties Browser Window के Dimension Return नहीं करते बल्कि Page View Area या Page Content Area की Height व Width को ही Return करते हैं।

इसी तरह से Internet Explorer अपने Browser Window की कोई Information अपने window Object द्वारा Return नहीं करता, बल्कि Web Browser में Loaded Page के Viewable Area की Information DOM के माध्‍यम से Return करता है। जबकि document.documentElement.clientWidthdocument.documentElement .clientHeight ये दोनों Properties सभी Web Browsers के Page Viewport यानी Client Region की HeightWidth Provide करते हैं।

हालांकि IE6 में ये दोनों Properties तभी काम करती हैं, जबकि वह Standard Mode में हो। यदि IE6 Quirks Mode में हो, तो इन Properties के स्थान पर document.body.clientWidthdocument.body.clientHeight Properties को Use करना पडता है।

इसी तरह से Google Chrome जब Quirks Mode में होता है, तो इन Information को प्राप्त करने के लिए clientWidthclientHeight Property को document.body तथा document.documentElement दोनों Properties के साथ उपयोग में लिया जा सकता है। सारांश के रूप में कहें तो यहां भी विभिन्न Web Browser के Window की Size को Determine करने का भी कोई Standard तरीका नहीं है।

Execution Context in JavaScript - Local and Global
setTimeout() clearTimeout() and setInterval() Functions

******

ये पोस्‍ट Useful लगा हो, तो Like कर दीजिए।

Advavnce JavaScript in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Advance JavaScript in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

Advance JavaScript in Hindi | Page: 669 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

Download All Hindi EBooks

सभी हिन्दी EBooks C, C++, Java, C#, ASP.NET, Oracle, Data Structure, VB6, PHP, HTML5, JavaScript, jQuery, WordPress, etc... के DOWNLOAD LINKS प्राप्‍त करें, अपने EMail पर।

Register करके Login करें। इस Popup से छुटकारा पाएें।