Controlling visibility with JavaScript in Hindi
जावास्क्रिप्ट वेब डेवलपमेंट स्क्रिप्ट में, वेब डेवलपर वेब एलिमेंट्स पे रेडीमेड बिल्ट-इन CSS प्रॉपर्टीज़ को अप्लाई कर जैसे, डिस्प्ले, विज़िबिलिटी, और ओपेसिटी प्रॉपर्टीज़ को मॉडिफाई कर उन वेब एलिमेंट ऑब्जेक्ट की डिफ़ॉल्ट वेबपेज में प्रीव्यू विज़िबिलिटी को अपने अनुसार कंट्रोल और मैनेज कर सकते हैं। ये CSS प्रॉपर्टीज़ वेब डेवलपर को वेब यूज़र के वेब एलिमेंट एक्शन, इवेंट, या कंडीशन के अनुसार वेबपेज वेबसाइट एलिमेंट्स ऑब्जेक्ट को डायनैमिकली आर्डर में हाईड या डिस्प्ले करने के फीचर्स प्रोवाइड करते हैं।
यहाँ आप कुछ बेसिक क्लासेज मेथड टेक्नीक को अप्लाई करके जावास्क्रिप्ट से वेबपेज एलिमेंट ऑब्जेक्ट की विज़िबिलिटी को मैनेज और कंट्रोल कैसे करें, इसके बारे में डिटेल में बताया गया है.
Using the display property in JavaScript webpages.
जावास्क्रिप्ट वेबपेज में किसी वेब एलिमेंट ऑब्जेक्ट की डिस्प्ले प्रॉपर्टी उस वेब एलिमेंट के लेआउट को कंट्रोल और मैनेज करती है। मौजूदा वेबपेज में किसी वेब एलिमेंट को हाईड करने के लिए, वेब डेवलपर उस वेब एलिमेंट की डिस्प्ले प्रॉपर्टी को none पर सेट कर सकते हैं। किसी जावास्क्रिप्ट वेब एलिमेंट को डिस्प्ले करने के लिए, वेब डेवलपर उसे उसकी ओरिजिनल डिफ़ॉल्ट वैल्यू पर वापस सेट कर सकते हैं. जैसे, ब्लॉक-लेवल एलिमेंट्स के लिए ब्लॉक, या इनलाइन एलिमेंट्स के लिए इनलाइन प्रॉपर्टी को मैन्युअल सेट कर सकते है।
Example of toggling visibility using display in a JavaScript webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Display Properties in JavaScript</title>
<style>
.content {
background-color: lightpink;
padding: 30px;
margin: 30px;
border: 3px solid indigo;
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-pink”>Switch Content Display Visibility</button>
<div id=”content” class=”content” >
<p>Here we can define text content, that may be display properties turn on and turn off. </p>
</div>
<script>
// here we get the button and the content div block to display
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
// here we set initial webpage object display visibility
var isVisible = true;
// here we toggle switch display visibility, when the button is clicked by user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.display = ‘none’; // here this JavaScript properties Hide the web content
} else {
content.style.display = ‘block’; // here this JavaScript properties Show the web content
}
isVisible = !isVisible; // here this JavaScript properties switch the visibility state
}
</script>
</body>
</html>
Explanation of toggling visibility using display in a JavaScript webpage.
- display: none – यहाँ इस एक्साम्प्ल में जब जावास्क्रिप्ट वेबपेज कंटेंट हाईड होता है, तो उसे मौजूदा डॉक्यूमेंट लेआउट से रिमूव कर दिया जाता है, और वह मौजूदा वेबपेज पर कोई स्पेस होल्ड या डिस्प्ले नहीं करता है।
- display: block – जब मौजूदा जावास्क्रिप्ट वेबपेज में कंटेंट को टॉगल स्विच से डिस्प्ले किया जाता है. तो वह उतनी स्पेस को होल्ड या डिस्प्ले करता है, और जितने में ब्लॉक-लेवल पर वेब एलिमेंट के रूप में वो रेंडर होता है।
Using the visibility property in JavaScript webpages.
जावास्क्रिप्ट वेबपेज में किसी वेबपेज एलिमेंट ऑब्जेक्ट की प्रीव्यू विज़िबिलिटी प्रॉपर्टी डिस्प्ले प्रॉपर्टीज के जैसे ही काम करती है. लेकिन यह प्रॉपर्टीज इसके यूज़ के अनुसार डिफरेंट है, लेकिन यह जावास्क्रिप्ट प्रॉपर्टी वेब एलिमेंट के स्क्रीन स्पेस के हाईड होने पर भी वेबपेज के लेआउट को मैन्टन करती है। जब किसी मौजूदा जावास्क्रिप्ट वेबपेज प्रॉपर्टी वेब एलिमेंट में विज़िबिलिटी: हाईड डिफाइन होती है, तो वह जावास्क्रिप्ट एलिमेंट ऑब्जेक्ट को डिस्प्ले नहीं होने देता है. लेकिन उसके बाद भी वह मौजूदा जावास्क्रिप्ट वेबपेज में स्पेस को होल्ड करता है। जावास्क्रिप्ट वेबपेज में इसे फिर से डिस्प्ले करने के लिए, वेब डेवलपर इसे विज़िबिलिटी: विज़िबिलिटी जावास्क्रिप्ट प्रॉपर्टी पर सेट कर करते हैं।
Example of a visibility toggle switch using Visibility in a JavaScript webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Visibility Properties in JavaScript</title>
<style>
.content {
background-color: lightcyan;
padding: 30px;
margin: 30px;
border: 4px solid teal;
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-green”>Switch Content Visibility</button>
<div id=”content” class=”content”>
<p>Here we can define text content, that may be visibility properties turn on and turn off. </p>
</div>
<script>
// here we get the button and the content div block to visibility
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
// here we set initial webpage object visibility
var isVisible = true;
// here we toggle switch visibility, when the button is clicked by web user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.visibility = ‘hidden’; // here this JavaScript properties Hide the web content
} else {
content.style.visibility = ‘visible’; // here these JavaScript properties Show the web content
}
isVisible = !isVisible; // here this JavaScript properties switch the visibility state
}
</script>
</body>
</html>
Explanation of a visibility toggle switch using Visibility in a JavaScript webpage.
- visibility:hidden – यहाँ इस एक्साम्प्ल में जावास्क्रिप्ट वेबपेज में वेब एलिमेंट हाईड है, लेकिन इसके बाद भी यह अभी भी वेबपेज में वेब लेआउट स्पेस को होल्ड करता है।
- visibility:visibility – यह जावास्क्रिप्ट प्रॉपर्टीज में वेब एलिमेंट हमेशा की तरह विज़िबल हो जाता है, और मौजूदा वेबपेज में उतना स्पेस को होल्ड करता है।
Using the Opacity Property in a JavaScript Webpage.
जावास्क्रिप्ट वेबपेज में ओपेसिटी प्रॉपर्टी वेब एलिमेंट ऑब्जेक्ट की ट्रांसपेरेंसी को कंट्रोल और मैनेज करती है। जिसमे किसी वेबपेज में ओपेसिटी: 0 वाला वेब एलिमेंट पूरी तरह से ट्रांसपेरेंट (इनविज़िबल) या डिस्प्ले नहीं होता है. इसी प्रकार वेब एलिमेंट किसी ऑब्जेक्ट की ओपेसिटी: 1 वाला वेबपेज एलिमेंट ऑब्जेक्ट पूरी तरह से ओपेक (विज़िबल) डिस्प्ले होता है। इसमें वेब डेवलपर को वेब एलिमेंट को थोड़ा ट्रांसपेरेंट क्रिएट करने के लिए बीच की वैल्यू का यूज़ कर सकते हैं।
Example of toggling visibility using opacity Property.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Visibility Opacity Properties in JavaScript</title>
<style>
.content {
background-color: lightgray;
padding: 40px;
margin: 40px;
border: 4px solid blue;
transition: opacity 0.7s ease; /* here we set Smooth css opacity transition attributes */
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-yellow”>Switch Content Visibility</button>
<div id=”content” class=”content”>
<p>Here This content will fade in and out, that may be visible opacity properties. </p>
</div>
<script>
// here we get the button and the content div block to visibility
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
// here we Set the initial opacity css properties
var isVisible = true;
// here we toggle switch visibility, when the button is clicked by web user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.opacity = ‘0’; // here these JavaScript properties Make the content invisible
} else {
content.style.opacity = ‘1’; // here these JavaScript properties Make the content visible to display with opacity
}
isVisible = !isVisible; // here this JavaScript properties switch the visibility state
}
</script>
</body>
</html>
Explanation of toggling visibility using the opacity property.
- opacity: 0 – यहाँ इस एक्साम्प्ल में जब जावास्क्रिप्ट वेबपेज एलिमेंट पूरी तरह से ट्रांसपेरेंट (इनविज़िबल) डिफाइन है. लेकिन इसके बाद भी यह वेबपेज लेआउट में स्पेस को होल्ड करता है।
- opacity: 1 – यहाँ इस ओपेसिटी प्रॉपटी में जब जावास्क्रिप्ट वेबपेज एलिमेंट पूरी तरह से ओपेक (विज़िबल) डिस्प्ले हो जाता है।
- यह जावास्क्रिप्ट वेबपेज में ट्रांज़िशन इफ़ेक्ट (ट्रांज़िशन: opacity 0.7s ease) डिफ़ॉल्ट ओपेसिटी मॉडिफाई कर एक स्मूद फेडिंग इफ़ेक्ट को डिस्प्ले करता है।
