Scribd
Upload
3 views

CSS Unit 6. Menus, Navigation and Web Page Protection

Project pahije

Uploaded by

Krishna Thombare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Unit 6. Menus, Navigation and Web Page Protection

Project pahije

Uploaded by

Krishna Thombare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

UNIT 6

Menus, Navigation and Web Page Protection


(12 marks)
Status Bar

• Status bar is present at the bottom of browser window.


• It enhances the readability of the text present on the web page, when user scrolls
over it.
• Build Static Message
• We can build a static message which is displayed on the status bar.
• This message remains permanently present in the status bar
Javascript Program to display Status Bar
<!DOCTYPE html>
<html>
<body>
<script>
window.status = "Welcome!! This is information in displayed in your status bar!!";
</script>
</body>
</html>
Status Bar Output
Changing the Message using Rollover

• We will use onMouseOver and onMouseOut events of a hyper link to display


or manage the messages.
• We can use window.status on OnMouseOver event to change the status in the
status bar.
• You can display a javascript status bar message whenever your users hover over
your hyperlinks.
Javascript Program to change the message using rollover on status bar.

<html>
<head>
<title>JavaScript Status Bar</title>
</head>
<body>
<a href="" onMouseOver="window.status='Welcome';return
true" onMouseOut="window.status='';return true">
Hello, Click here and check the statusbar
</a>
</body>
</html>
Output Window
Moving the Message along the Status Bar

• For moving the message in the status bar we need to increment the current
position of the text one character ahead in a loop.
• This will give us the effect of moving the text. This will be displayed by using the
setInterval function, which displays the moved text after some milliseconds.
Javascript Program to scroll message on status bar.
<html> <head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0;
var maxScroll = 100; var blanks = “” ;
function scrollText(text, milliseconds)
{window.setInterval("displayText('"+text+"')", milliseconds)
} function displayText(text) {
window.defaultStatus = blanks + text;
++scrollPos; blanks += " “;
if(scrollPos > maxScroll) {
scrollPos = 0; blanks = “”;}}
</script></head><body onload="scrollText('This text is moving', 300)“><p>Watch the text scroll at
the bottom of this window!</p></body></html>
Output Window
Banner
Banner
Loading and Displaying Banner Advertisement
• It is a typically rectangular advertisement placed on a Web site above, below or on the sides of the
Web site's main content and is linked to the advertiser's own Web site.
• It is also referred as banner ad.
• The banner may contain text or graphics images.
• Following is a simple JavaScript that displays the banners in which it slides from one banner to
another.
Prerequisite: In our example,
(1) We have created four images and we named them as bannerl.jpg, banner2.jpg, banner3.jpg, and
banner4.jpg.
(2) Save the images in the same folder as the HTML file which will be used to show the banners.
These images can be created by using some graphics tools or image files can be downloaded from
Internet.
Javascript Program to scroll message on status bar.
<!DOCTYPE html><html><head><script language="Javascript">
MyBanners =new Array('banner1.jpg','banner2.jpg', 'banner3.jpg','images.jpg');
banner_count=0;
function DisplayBanners()
{if (document.images)
{banner_count++;
if (banner_count==MyBanners.length)
{banner_count=0;
} document.BannerChange.src=MyBanners[banner_count];
setTimeout("DisplayBanners()",2000);
}}</script></head>
<body onload="DisplayBanners()">
<center> <h1> Displaying Banner </h1>
<img src="bannerl.jpg" width="700" height="200"
name="BannerChange“></center></body></html>
Output Window
Banner
• Linking a Banner Advertisement to URL

• In any web site the banner appear mainly for advertising purpose. Hence it is
essential to link those banners with their corresponding web site.
• For example - suppose you are going through some web site and if some banner
flashes on your web page that makes an advertisement about online mobile store,
then it can tempt you to go through such online mobile store. In such case, this
flashing banner must be linked up with the corresponding web site.
• Following is a simple example –
in which I have created four banners of four famous web sites of Google, Gmail,
Facebook and Wikipedia. If user clicks on the banner of 'Google' then the Google's
web page must be displayed
Javascript Program to Link Banner to URL.
<html><head> <script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg');
MyBannerLinks=new Array('www.google.com/','www.gmail.com/','www.facebook.com/');
banner=0;
function ShowLinks()
{ document.location.href="https://"+MyBannerLinks[banner]
} function ShowBanners() {
if (document.images)
{ banner++;
if (banner==MyBanners.length) {
banner=0; } document.ChangeBanner.src=MyBanners[banner] setTimeout("ShowBanners()",5000)
}}</script></head><body onload="ShowBanners()">
<center><h1> Displaying Banner </h1>
<a href="javascript: ShowLinks()“>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a></center></body>
</html>
If we click on above image the following output can be obtained
Slide Show
Slide Show
• Slide Show
• A slide show is a presentation of a series of still images on a projection screen or
electronic display device, typically in a prearranged sequence.
• In JavaScript we can create a slide show by using the Array of images. Let us
discuss how to create a slide show with simple JavaScript

• Creating a Slide Show


• For creation of slide show we need to have some image files. These images can be
created using some Graphics tool or some photographs.
• In the following JavaScript the slide show is created and the transition from one
slide to another can be possible using the Back and Forward button.
Javascript Program to slide show
<html><head> <script> Silder=new
Array('download1.jpg','download2.jpg','download3.jpg','download4.jpg','download5.jpg'); i=0;
function display(sn)
{ i=i+sn; if(i>Silder.length-1){
i=0;
} if(i<0)
{ i=Silder.length-1;
} document.SlideID.src=Silder[i];
}</script></head>
<body>
<center>
<h1>Nature Photo</h1>
<img src="nature.jpg" name="SlideID" width="800" height="400"><br><br>
<button onclick="display(-1)">Back</button>
<button onclick="display(1)">Next</button></center>
</body></html>
Menus
Menu
Creating Pulldown Menu

• A web site is normally a collection of various web pages. A visitor to this site
navigates from one page to another. If a menu of these web pages is created then it
becomes easy for a visitor to select appropriate web page.

• The <select> element is used to create a pulldown menu

• The <option> tags inside the <select> element define the available options in the
list.
Javascript Program to slide show
<!DOCTYPE html><html><head> <script language="Javascript">
function Display(ch){
MyPage = ch.options[ch.selectedIndex].value;
if (MyPage !="")
{window.location = MyPage;
}}
</script></head>
<body onload="document.Form1.MyMenu.selectedIndex=0">
<form action ="" name="Form1">
<select name= "MyMenu" onchange="Display(this)">
<option>Book</option>
<option value="Fiction.html">Fiction</option>
<option value="NonFiction.html">Non Fiction</option>
</select></form></body>
</html>
Dynamic Menu
• Dynamically changing menu means the items present in the menu are changing
automatically.
• Following is a JavaScript example in which two menus are created –
• one for category of students in the Class and other menu is for displaying names
of boys students or names of girl students based on the selection.
• Thus other menu displaying appropriate names of students is a dynamic menu.
Javascript Program to display Dynamic Menus.
<html><head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{ switch (listindex) { case "boys" :
document.getElementById("status").options[0]=new Option("Students","");
document.getElementById("status").options[1]=new Option("Sunil"); document.getElementById("status").options[2]=new
Option("Aditya"); document.getElementById("status").options[3]=new Option("Siddharth"); break;
case "girls" :
document.getElementById("status").options[0]=new Option("Students","");
document.getElementById("status").options[1]=new Option("Archana");
document.getElementById("status").options[2]=new Option("Sharda");
document.getElementById("status").options[3]=new Option("Swati");
Break;} return true;}</script></head><title>Dynamic Drop Down List</title><body><h2>Dynamically Changing
Menu</h2><select id="source" name="source"
onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Class</option> <option value="boys">Boys</option>
<option value="girls">Girls</option></select><script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Students</option></select>')
</script></body></html>
Validating Menu
• Validating Menu Selection

• The common problem that user normally creates is –he/she forgets to select
particular item from the menu and if such item is required for processing further
then it creates sever problem.
• This problem can be solved in JavaScript by checking whether the items are
selected from the menu or not.
Javascript Program to validate menu selection
<!DOCTYPE html>
<html><head> <title>Vilidation Demo of PullDown Menu</title>
<script language="Javascript">
function ValidateForm(formvalue){
item = formvalue.MyMenu.selectedIndex;
if (formvalue.MyMenu.options[item].value=="")
{alert("Please Select some item from menu!!!");
return false;}}</script></head><body>
<form action ="" name="Form1" onsubmit="return ValidateForm(this)">
<select name= "MyMenu">
<option value="">Select Item</option><option value="1">Desktop</option> <option value="2">Laptop</option>
<option value="3">Server</option> <option value="4">Monitor</option> <option value="5">iPad</option>
</select><p>
<input type="submit" valur="Submit">
<input type="reset">
</form></body>
</html>
Floating Menu
• Floating Menu

The JavaScript allows creating dynamic menus which move along with scrolling.
Such floating menu will be always visible on screen.
They appear to ‘float’ on top of the page as you scroll
Chain Select Menu
• Chain Select Menu
• Chain Select Menu is a kind of menu in which there are more than one set of
menus and options selected from the first pulldown menu determines the options
for second pulldown menu and options of second pulldown menu determines the
options for third pulldown menu
Tab Menu
• Tab Menu
• Tab menus display a one- or two-word description of the menu option within a
tab.
• A more complete description is displayed below the tab bar as the visitor moves
the mouse cursor over the tab. Following fig. represents the tabbed menu
Pop up Menu
• Pop Up Menu
• The popup menu contains lower-level menu items that are associated with the
top-level menu item. The popup menu appears as you move mouse over each
menu item
Sliding Menu
• Sliding Menu
• These menus are basically off-screen elements that slide into view when you click
or tap on something that looks like an arrow, a hamburger icon, or something else
that indicates a menu will appear. For example - When you decide to bring up the
menu (clicking/tapping on the circle as is the case in our example), the menu
magically slides into view
Highlighted Menu
• Highlighted Menu
• When the visitor moves the cursor over a menu item, the browser displays a box
around the item with a shadow at the bottom of the box. If the visitor selects the
item, the highlight shadow appears at the top of the box rather than at the bottom
of the box. The highlighted menu is ideal to use to identify a menu option before
the visitor actually makes a selection
Folding a Tree Menu
• Folding a Tree Menu
• It is a classic menu used in desktop applications. This menu helps to navigate file
folders. This tree consists of one or more closed folders each of which appears
alongside the folder's name

•
Context Menu
• Context Menu
• The context menu is a menu that pops up when user clicks right mouse button.
The location of the context menu is determined by the position of mouse

•
Scrollable Menu
• 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. Following is a sample
scrollable menu.
Side Bar Menu
• Side Bar Menu
• The side bar menu displays a menu on the side of the web page. Options on this
menu can be linked to other web pages or to other menu options.
• Visitors can link to other menus by moving the mouse cursor over a menu item.
The menu that is associated with that item pops onto the screen.
• Moving the cursor away from the menu item closes the popup menu, and the side
bar menu remains on the screen
Protecting Web Page
Protecting Web Page
• It is possible to view the source code of some developed web site using the right clicking
and choosing View Source Code option.
• This way many new developers get the ideas of writing HTML and JavaScript.
• However, this is not an appropriate practice as it leads to the tendency of borrowing the
work

of someone else without permission. Thus it is essential to protect your web page.

• There are two ways of protecting your web page –

(1) Disabling the right mouse button.

(2) Storing the JavaScript on Web server.


Javascript Program Write a JavaScript that disable the right click button and displays the message ‘Right click
button is disable
<html><head><title>Locking the Right Mouse Button</title>
<script language=JavaScript>
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}}function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}}}if (document.layers){ document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}document.oncontextmenu=new Function("alert(message);return false")
</script></head><body>
<h1>This is a sample web page</h1><h4>Test disablity of right click button by clicking right
button</h4></body></html>
Frameworks of JavaScript and its Application
A JavaScript framework is an application framework written in JavaScript.

• It differs from a JavaScript library in its control flow library offers functions to be
called by its parent code, whereas a framework defines the entire application
design.
• A developer does not call a framework; instead it is the framework that will call
and use the code in some particular way.

• For examples : AngularJS, Ember.js, Meteor.js


Thank You!!!!

You might also like