Maharashtra's Most Trusted
Chapter 6 - Menus, Navigation & Webpage Protection
For MSBTE Diploma CO / IT / AIML Branch
Status Bar -:
In JavaScript, the status bar is a part of the web browser window, typically located at the bottom, where messages or notifications can be displayed. However, modern browsers (for security and usability reasons) restrict access to modifying or interacting with the status bar via JavaScript.
In earlier versions of JavaScript (and in some older browsers), you could directly manipulate the status bar using the window.status property. This would allow scripts to display messages in the browser’s status bar when a user hovers over a link, for example. However, most browsers have disabled this feature by default because it could be used for malicious purposes (e.g., tricking users with fake status bar messages).
Important Points:
- In modern browsers, you can’t control or modify the status bar directly using JavaScript.
- The
window.statusproperty still exists, but setting it typically has no visible effect in current browsers.
Example (Historical Usage):
Here’s an example of how the status property was used to control the status bar in older browsers:
Status Bar Today:
In most modern browsers (like Chrome, Firefox, and Edge), this script will not have any visible effect due to security restrictions, and messages will not appear in the status bar. Browsers now control the status bar’s display, typically showing the URL of the hovered link, regardless of any JavaScript that tries to modify it.
Modern Alternatives:
Since you can’t use the status property anymore, you might want to display messages or status updates elsewhere on the page, like in a dedicated <div> or <span> element, or using browser tooltips (via the title attribute).
Example: Using a Tooltip Instead:
Slider in Java Script
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sliding Banner Example</title>
<style>
/* Basic slider styling */
.slider-container {
position: relative;
width: 100%;
max-width: 600px;
overflow: hidden;
margin: 20px auto;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides img {
width: 100%;
border: 2px solid #fff;
}
/* Navigation buttons (prev/next) */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
padding: 10px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* Dots navigation */
.dots {
text-align: center;
margin-top: 10px;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background-color: #bbb;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.active {
background-color: #717171;
}
</style>
</head>
<body>
<div class=”slider-container”>
<div class=”slides”>
<img src=”https://via.placeholder.com/600×300/ff7f7f/333333?text=Slide+1″ alt=”Slide 1″>
<img src=”https://via.placeholder.com/600×300/ffbf7f/333333?text=Slide+2″ alt=”Slide 2″>
<img src=”https://via.placeholder.com/600×300/ffff7f/333333?text=Slide+3″ alt=”Slide 3″>
<img src=”https://via.placeholder.com/600×300/7fff7f/333333?text=Slide+4″ alt=”Slide 4″>
</div>
<!– Navigation buttons –>
<button class=”prev” onclick=”moveSlide(-1)”>❮</button>
<button class=”next” onclick=”moveSlide(1)”>❯</button>
</div>
<!– Dots for manual navigation –>
<div class=”dots”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
<span class=”dot” onclick=”currentSlide(4)”></span>
</div>
<script>
let currentIndex = 0; // Track the current slide index
const slides = document.querySelector(‘.slides’);
const dots = document.querySelectorAll(‘.dot’);
// Function to show the current slide
function showSlide(index) {
const totalSlides = slides.children.length;
currentIndex = (index + totalSlides) % totalSlides; // Wrap around
const offset = -currentIndex * 100; // Calculate the offset to shift the slides
slides.style.transform = `translateX(${offset}%)`;
// Set the active dot
dots.forEach((dot, i) => {
dot.classList.toggle(‘active’, i === currentIndex);
});
}
// Function to move the slide (next/prev)
function moveSlide(step) {
showSlide(currentIndex + step);
}
// Function to go to a specific slide
function currentSlide(index) {
showSlide(index – 1);
}
// Auto-slide functionality
setInterval(() => {
moveSlide(1); // Move to the next slide every 3 seconds
}, 3000);
// Initialize the slider
showSlide(0);
</script>
</body>
</html>
Menus in Java Script -:
In JavaScript, menus are used to create interactive navigation elements on a webpage. A menu can be a simple list of links, a dropdown, or a more complex structure like multi-level or context menus (right-click menus). JavaScript helps in making menus dynamic, allowing for user interactions such as expanding or collapsing, showing submenus, or creating custom behaviors based on user input.
Types of Menus in JavaScript:
- Simple Navigation Menu: A static list of links.
- Dropdown Menu: A menu that appears when the user clicks or hovers over a menu item.
- Context Menu: A custom right-click menu.
- Accordion Menu: A collapsible vertical menu where clicking one menu item opens its submenu.
Dropdown Menu
A dropdown menu is a common interactive element where submenus appear when the user hovers or clicks on a menu item.
Example of a Dropdown Menu:
end of chapter 6 -------->
Explore Other Chapters