Scribd
Upload
9 views

CSS 06

The document discusses various techniques for manipulating the status bar, loading banner advertisements, and creating slide shows and pull-down menus in JavaScript. It includes examples of code for setting static and dynamic status bar messages, loading and linking banner ads, creating a slide show using image arrays, and building pull-down menus to navigate between pages.

Uploaded by

CO1I Shweta Kidile
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

CSS 06

The document discusses various techniques for manipulating the status bar, loading banner advertisements, and creating slide shows and pull-down menus in JavaScript. It includes examples of code for setting static and dynamic status bar messages, loading and linking banner ads, creating a slide show using image arrays, and building pull-down menus to navigate between pages.

Uploaded by

CO1I Shweta Kidile
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Client Side Dr.

Nilesh Vishwasrao Patil


Scripting Lecturer, CO/CM
Government Polytechnic,
Language (22519) Ahmednagar

Government Polytechnic, Ahmednagar


2

Chapter-0 6 Menus,
Navigation and Web
Page Protection
3

Status Bar: Build static message

▸ Status bar  available at the bottom of browser window.

▸ It enhance the readability of the text present on the web page, when user scroll over it.

▸ We can provide static message to browser window  it will be displayed on the status bar.
4

Example:

<html>
<head>
<title>Static Status Message</title>
</head>
<body>
<script language = "JavaScript" type = "text/javascript">
window.status = "Welcome message in the status bar";
</script>
</body>
</html>
5

Status Bar: Changing the message using Rollover

▸ For dynamically changing the status bar message  we can use onMouseOver and
onMouseOut events.

▸ For this purpose, we can create one hyperlink and handle both onMouseOver and
onMouseOut events for changing the contents of status bar.
6

Example:

<html>
<head>
<title>Static Status Message</title>
</head>
<body>
<a href="../" onMouseOver = "window.status='Welcome';return true;"
onMouseOut="window.status=';return true;'">
Dynamically change status bar message
</a>
</body>
</html>
7

Status Bar: Moving the message along the status bar

▸ For moving the message in the status bar  we need to use loop and increment the current
position of the text one character in the loop.

▸ Therefore, it will move the message in the status bar.

▸ OR We can do it using setInterval() function by calling another function multiple times by


setting some delay.
8

Example:
<html>
<head>
<title>Sroll Status Message</title>
<script language = "JavaScript" type = "text/javascript">
let currentPosition = 0;
let targetPosition = 100;
let blanks = "";
function scrollFunction(){
window.setInterval(display,100);
}
function display(){
window.status = blanks+"Welcome Message";
++currentPosition;
blanks += " "
if(currentPosition>targetPosition){
currentPosition = 0;
blanks = "";
}
}
</head>
9

Example:

<body onload = "scrollMessage();">


</body>
</html>
10

Banner: Loading and displaying banner advertisement

▸ It is a typical rectangular box for placing advertisement web-site(s)  either above, below
or on sides of the web sites main content. Further, it will be linked to the advertisers own
web-site/pages.

▸ It is also called as Banner ad.

▸ Banner may contains  text or graphics images.


11

Example:
<html>
<head>
<script language = "JavaScript" type = "text/javascript">
MyBanners = new Array("smiley.png", "divide.png", "plus.png", "minus.png","multipy.png");
bannerCount = 0;
function displayBanner(){
if(document.images){
bannerCount++;
if(bannerCount == MyBanners.length){
bannerCount = 0;
}
document.bannerChange.src = MyBanners[bannerCount];
setTimeout(displayBanner,1000);
}
}
</script>
</head>
12

Example:

<body onload = "displayBanner();">


<center>
<h1>Banner Demonstration</h1>
<img src = "smiley.png" width = "500" height = "400" name = "bannerChange">
</center>
</body>
</html>
13

Banner: Link banner advertisement to URL

▸ On most of the commercial website, banners are linked to corresponding websites.

▸ Therefore, whenever clients click on that the linked URL will open for clients.

▸ Banner are mostly used for advertisement purposes and therefore web pages are forwards
towards linked URL.
14

Example:
<html>
<head>
<script language = "JavaScript" type = "text/javascript">
function displayLink(){
document.location.href="http://www.gpnagar.ac.in";
}
</script>
</head>
<body>
<center>
<h1>Banner Linked Demonstration</h1>
<a href = "javascript: displayLink();">
<img src = "smiley.png" width = "500" height = "400" name = "bannerChange">
</a>
</center>
</body>
</html>
15

Slide Show: Creating a Slide Show

▸ A slide show  is a presentation of a series of steady images on a projection.

▸ In JavaScript  we can create slide show of images using the Array of images.

▸ For creating slide show  Firstly we created an array and stores images path into that
array for moving index by index.

▸ Further, we can create two buttons  for moving forward and backward direction of slide
show.
16

Example:
<html>
<head>
<script language = "JavaScript" type = "text/javascript">
MySlides = new Array("smiley.png", "plus.png", "minus.png", "divide.png","multipy.png");
i=0
function moveSlide(slideNo){
i = i+slideNo;
if(i>MySlides.length-1){
i = 0;
}
if(i<0){
i = MySlides.length-1;
}
document.slideShow.src = MySlides[i]
}
</script>
</head>
17

Example:

<body>
<center>
<img src = "smiley.png" width = "500" height = "400" name = "slideShow">
<br><br>
<input type = "button" value = "Back" onClick = "moveSlide(-1);">
<input type = "button" value = "Forward" onClick = "moveSlide(1);">
</center>
</body>
</html>
18

Menus: Creating a Pull Down Menu


▸ A Website  is a collection of various web pages.

▸ Clients can navigate website from one page to another page.

▸ Therefore, if a menu is created for web pages  it becomes very easy for visitors to select
an appropriate page.

▸ <select>  element is used to create a pulldown menu.

▸ <option>  tags can be inside <select> element to provide options in the list.
19

Example:
This file name  Menu-1-
Creating-pulldown-menu.html

<html>
<head>
<script language = "JavaScript" type = "text/javascript">
function display(ele){
myPage = ele.options[ele.selectedIndex].value;
if(myPage != ""){
window.location = myPage;
}
}
</script>
</head>
20

Example:
<html> File Name: ns.html
Two extra files need to be created  bdata.html
and ns.html <body>
<h1>Network Security</h1>
</body>
<body> </html>
<form name = "firstForm">
<select name = "myMenu" onChange = "display(this);">
<option value = "Menu-1-Creating-pulldown-menu.html">Select Research Area</option>
<option value="bdata.html">Big Data Analytics</option>
<option value="ns.html">Network Security</option>
</select>
</form>
</body> File Name: bdata.html
</html> <html>
<body>
<h1>Big data Analytics</h1>
</body>
</html>
21

Menus: Dynamically changing the Menu


▸ Dynamically changing menu  means items present in the menu, which can be changed
automatically.

▸ Example: We created two menus: (i) Name of students (ii) Boys/girls. When we select boys
 name of student menus only contains boys names and when select girls then it only
contains girls names.
<html><head>
22<script language = "JavaScript" type = "text/javascript">
BoysList = new Array("Bhushan","Sandip","Prashant","Vivek");
GirlsList = new Array("Maahi","Shivadnya","Neha","Krutika");
function changeList(ch){
for(i=document.firstForm.Students.options.length-1;i>0;i--){
document.firstForm.Students.options.remove(i)
}
category = ch.options[ch.selectedIndex].value;
if(category != ""){
if(category=="1"){
for(i=1;i<=BoysList.length;i++){
document.firstForm.Students.options[i] = new Option(BoysList[i-1]);
}
}
if(category=="2"){
for(i=1;i<=GirlsList.length;i++){
document.firstForm.Students.options[i] = new Option(GirlsList[i-1]);
}
}
}
}
</script> </head>
23

Example:

<body>
<form name = "firstForm">
<select name = "lists" onChange = "changeList(this);">
<option value ="0">Class</option>
<option value="1">Boys</option>
<option value="2">Girls</option>
</select>
<select name = "Students">
<option value = "0">Students</option>
</select>
</form>
</body>
</html>
24

Menus: Validating Menu Selection


▸ We can validate Menu selection using JavaScript by checking whether items of menu
selected or not.

<html><head>
<script language = "JavaScript" type = "text/javascript">
function validateForm(){
let item = document.firstForm.myMenu.selectedIndex;
if(document.firstForm.myMenu.options[item].value==""){
alert("Please select class");
}
}
</script> </head>
25

Example:

<body>
<h1>***Form Menu Validation***</h1>
<form name = "firstForm">
<select name = "myMenu">
<option value = "">Select Class</option>
<option value = "1">TYCM</option>
<option value = "2">TYCO</option>
<option value = "3">SYCM</option>
<option value = "4">SYCO</option>
</select>
<input type = "submit" value = "Submit" onClick = "validateForm();">
</form> </body>
</html>
26

Some topics in Menu: (Conceptual as per syllabus)

▸ Floating Menu ▸ Highlighted Menu

▸ Chain Select Menu ▸ Folding Tree Menu

▸ Tab Menu ▸ Context Menu

▸ Popup Menu ▸ Scrollable Menu

▸ Sliding Menu ▸ Side Bar Menu


27

Some topics in Menu: (Conceptual as per syllabus)

▸ Floating Menu: Menu is moving as we move downward, upward, left, right,


etc. as we moving in the web page.

▸ Chain Select Menu: It is a one kind of Menu in which more than one menus
and options. Based on selection of first menu  second menu dynamically
changes its options.

▸ Tab Menu: In the case on Tab Menu, when we click on one item, then its
description is visible.
28

Some topics in Menu: (Conceptual as per syllabus)


29

Some topics in Menu: (Conceptual as per syllabus)

▸ Popup Menu: It contains


lower level menu items
that are associated with
the top-level menu items.
The popup menu appears
when we move or click
on top level menu item.
30

Some topics in Menu: (Conceptual as per syllabus)

▸ Highlighted Menu: When


we move mouse on menu
items it gets
highlighted.
31

Some topics in Menu: (Conceptual as per syllabus)

▸ Folding Tree Menu: It is a classic menu used


in desktop applications. It helps to navigate
file folders.

▸ This tree consists of one or more closed


folders each of which appears alongside the
folder names
32

Some topics in Menu: (Conceptual as per syllabus)

▸ Context Menu: Context Menu is a menu that pops up when user click right
mouse button.

▸ The location of the context menu is determined by the position of mouse


33

Some topics in Menu: (Conceptual as per syllabus)

▸ Scrollable Menu: Sometimes there is limited space on the web page for displaying
all the menu options.

▸ Then in such a case, only limited menu options are displayed and remaining options
can be accessed by scrolling left or right.

▸ Side Bar Menu  The side bar menu displays a menu on the side of web page.
Options on the menu can be linked to other web page or other menu options.
34

Protecting Web Page

▸ It is possible to view the source code of website using right clicking and choosing
View Source Code option.

▸ It may be possible to copy our code for developing their website without taking
permission from website owner.

▸ For protecting website  Disable mouse right click and store JavaScript code on
web server.

You might also like