Unit 6
Rotating Banner with URLs
<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body onload="setInterval(startShow,2000)">
<center>
<h4>It's Banner Show</h4>
<a href="https://in.puma.com" id="link"
><img src="https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png" width="500px" heigth="500px" id="image"></a>
</center>
<script>
var bannerNo = 1;
function startShow() {
var bannerArr = [
{
image:
"https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-2003.png",
url: "https://in.puma.com",
},
{
image:
"https://thumbs.dreamstime.com/b/gucci-logo-editorial-illustrative-white-
background-eps-download-vector-jpeg-banner-gucci-logo-editorial-illustrative-white-
208329393.jpg",
url: "https://www.gucci.com",
},
{
image:
"https://www.hm.com/entrance/assets/bundle/img/HM-Share-Image.jpg",
url: "https://www2.hm.com",
},
];
document.getElementById("image").src = bannerArr[bannerNo].image;
document.getElementById("link").href = bannerArr[bannerNo].url;
bannerNo = (bannerNo + 1) % bannerArr.length;
}
</script>
</body>
</html>
Slide Show Program
<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body>
<center>
<h4>It's Banner Show</h4>
<img
src="https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png"
style="width: 500px; height: 500px"
id="image"
/><br />
<button
type="button"
id="previous"
value="previous"
onclick="previousImage()"
>
Previous
</button>
<button type="button" id="next" value="next" onclick="nextImage()">
Next
</button>
</center>
<script>
var imgNo = 0;
var imgArr = [
"https://1000logos.net/wp-content/uploads/2017/05/PUMA-Logo-
2003.png",
"https://thumbs.dreamstime.com/b/gucci-logo-editorial-illustrative-
white-background-eps-download-vector-jpeg-banner-gucci-logo-editorial-
illustrative-white-208329393.jpg",
"https://www.hm.com/entrance/assets/bundle/img/HM-Share-
Image.jpg",
];
function nextImage() {
imgNo = (imgNo + 1) % imgArr.length;
document.getElementById("image").src = imgArr[imgNo];
}
function previousImage() {
imgNo = (imgNo + 2) % imgArr.length;
document.getElementById("image").src = imgArr[imgNo];
}
</script>
</body>
</html>
Menu PullDown Menu
<!DOCTYPE html>
<html>
<head>
<title>Pull Down Menu</title>
</head>
<body>
<form>
<select id="menu" onchange="redirect()">
<option disabled selected>Products</option>
<option value="computers.html">Computers</option>
<option value="monitors.html">Monitors</option>
</select>
</form>
<script>
function redirect() {
const menu = document.getElementById("menu");
const page = menu.value; // Get the selected option's value
if (page) {
window.location = page; // Redirect to the selected URL
}
}
</script>
</body>
</html>
Dynamically Changing a Menu
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script>
const SalesStaff = ['Bob Smith', 'Mark Jones', 'Sue Rogers'];
const MarketingStaff = ['Amber Thomas', 'Joanne Johnson', 'Sandy Russell'];
function GetEmployees(Department) {
const employeesDropdown = document.getElementById("Employees");
// Clear existing options
employeesDropdown.innerHTML = '<option value="0">Employees</option>';
const deptValue = Department.value;
let staffList = [];
if (deptValue === '1') staffList = SalesStaff;
else if (deptValue === '2') staffList = MarketingStaff;
// Add new options using for-in loop
for (const i in staffList) {
const option = new Option(staffList[i], parseInt(i) + 1);
employeesDropdown.add(option);
}
}
</script>
</head>
<body>
<form action="MyCGI.cgi" name="Form1">
<select id="DeptList" name="DeptList" onchange="GetEmployees(this)">
<option value="0">Department</option>
<option value="1">Sales</option>
<option value="2">Marketing</option>
</select>
<select id="Employees" name="Employees">
<option value="0">Employees</option>
</select>
<br />
<p>
<input type="submit" value="Submit" />
<input type="reset" value="reset"/>
</p>
</form>
</body>
</html>
Validating a Menu
<!DOCTYPE html>
<html>
<head>
<script>
function validate() {
const cityDropdown = document.getElementById("city");
const selectedValue = cityDropdown.value;
if (selectedValue === "Select") {
alert("Please select a city!");
return false;
}
alert("You have selected: " + selectedValue);
return true;
}
</script>
</head>
<body>
<form onsubmit="return validate()">
<center>
<h3>Select your City</h3>
<select id="city" name="city">
<option value="Select">Select</option>
<option value="Mumbai">Mumbai</option>
<option value="Nashik">Nashik</option>
<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Pune">Pune</option>
</select>
<br><br>
<input type="submit" value="Submit">
</center>
</form>
</body>
</html>
Floating menu
<!DOCTYPE html>
<title>Example</title>
<style>
body {
margin-bottom: 200%;
}
.floating-menu {
background: brown;
padding: 10px;;
width: 130px;
position: fixed;
}
.floating-menu a,
.floating-menu h3 {
display: block;
margin: 5px;
color: white;
}
</style>
<body>
<p>Scroll down and watch the menu remain fixed in the same position, as
though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
<a href="/css/">CSS</a>
<a href="/html/">HTML</a>
<a href="/coldfusion/">ColdFusion</a>
<a href="/database/">Database</a>
</nav>
</body>
Protecting a Web page
<!DOCTYPE html>
<html>
<head>
<script>
function passWord() {
var pass1 = prompt('Please Enter Your Password', '');
if (pass1.toLowerCase() === "css") {
window.open('https://www.google.com');
} else {
alert('Access Denied - Incorrect Password!');
}
}
</script>
</head>
<body>
<center>
<button onclick="passWord()">Enter Protected Area</button>
</center>
</body>
</html>
Concealing Email Address
<!DOCTYPE html>
<html>
<head>
<title>Disable right click on my web page</title>
</head>
<script>
function protect_email(user_email) {
const [part1, part2] = user_email.split("@");
const visiblePart = part1.substring(0, part1.length - Math.floor(part1.length /
2));
return `${visiblePart}...@${part2}`;
}
alert(protect_email("
[email protected]"));
</script>
</html>
