Scribd
Upload
30 views

CSS Unit 6

Uploaded by

ranesanskar70
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

CSS Unit 6

Uploaded by

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

Unit 6

Menus,
Navigation and
Web Page
Protection
Contents
6.1. Status bar - build a static message , changing the
message using rollovers,
moving the message along the status bar
6.2. Banner - loading and displaying banner advertisements,
a linking banner
advertisements to url
6.3. Slide Show – creating a slide show
6.4. Menus - creating a pull-down menu, dynamically
changing a menu, validating menu selections, floating menu,
chain select menu, tab menu, popup menu, sliding menu,
highlighted menu, folding tree menu, context menu,
scrollable menu, side bar menu
6.5. Protecting Web Page - hiding your code, disabling the
right mouse button, concealing email address
6.6. Frameworks of JavaScript and its application
6.1 Status bar
■ Variety of tricks are used by developers to communicate
messages
to visitors of their web sites

■ Some of them uses status bar messages, banner


advertisements,
and slideshows

■ The status bar is located at the bottom of the browser window.

■ It is used to display a short message to visitors.

■ When you move mouse cursor over an HTML link, the URL
appears
in the status bar.
6.1.1 Build a static message
■ JavaScript gives the ability to modify the status bar.
■ For example it can be useful
– to display information about a link, when the user
moves his mouse over it
– To display a small amount of information about the
page the user is on in the status bar.
■ To display messages in the status bar, you will need
to use window.status property.
6.1.1 Build a static message
■ The status property sets the text in the status bar at the
bottom of the browser, or returns the previously set text.
■ The defaultStatus property, specifies the default text
displayed in the
status bar.
■ Note: The status property does not work in the default
configuration of IE, Firefox, Chrome, Safari or Opera 15
and newer.
■
To allow it the user must set the
dom.disable_window_status_change
preference to false in the about:config screen. (or in
Firefox: "Tools -
Options - Content -Enable JavaScript / Advanced - Allow
scripts to change status bar text").
Example
<html>
<head>
<title>Show text message on status bar</title>
<script>
function showStatus() {
var win = window.open('', 'win', 'width=100, height=100');
win.status = 'Hello';
win.defaultStatus = "Hello World!"
win.document.write("Status Text: " + win.status);
win.document.write("<br>Default Status Text: " + win.defaultStatus);}
</script>
</head>
<body onload="showStatus()">
<h1>This is an example of Status bar</h1>
</body>
</html>
6.1.2 Changing the message
using rollovers
■ We can use rollovers to signal the
browser when a different message should
be displayed.

■ An onmouseover event is generated


whenever the visitor moves the mouse
cursor over an object on the web page.

■ An onmouseout event is generated


whenever the visitor moves the mouse
cursor out of an object on the web page.
6.2 Banner Advertisements
■ The banner advertisement is the hallmark of every commercial
web
page.

■ Typically positioned near the top of the web page, and its
purpose is
to get the visitor's attention by doing all sorts of clever things.

■ Nearly all banner advertisements are in a file format such as a


GIF,
JPG, TIFF, or other common graphic file formats.

■ Banner advertisements consist of a single graphical image that


does not contain any animation and does not require any special
plug-in.
6.2.1 - Loading and displaying
banner advertisements
■ Steps to insert a banner advertisement in your
web page:

1) Create banner advertisements using a


graphics tool such as PhotoShop

2) Create an <img> element in your web page


with the height and width

3) Build a JavaScript that loads and displays the


banner advertisements
Example
<html>
<head>
<title> Banner </title>
</head>
<body bgcolor="pink">
<a href="http://www.pagalworld.com"><img
src="music.jpg", height="250" ,
width="250"></a>
</body>
</html>
6.3 – Slide Show
 It is series of images changing after
another on screen
 With this , more images can be loaded
on webpage as per requirement.
 User can change image as per choice
using next or back button or click event.
 Slide show can be created in javascript.
Array of images is created and images
are shown using <img> tag with help of
index position.
Example
<html>
<head>
<script>
var slides = new Array('nature1.jpg','nature2.jpg','nature3.jpg', 'nature4.jpg')
var id = 0
function showImage(move) {
if(move == -1 && id !=0)
id--
if(move == 1 && id !=3)
id++
document.image.src = slides[id]
}
</script>
</head>
<body>
<center>
<img src="nature1.jpg" name="image""width="300" height="300"/>
<input type="button" value="Previous" onclick="showImage(-1)">
<input type="button" value="Next" onclick="showImage(1)">
</center>
</body>
</html>
6.5 Protecting Web Page –
Hiding your code
■ Nothing secret about your webpage.

■ Anyone with a little knowledge of computer can view your


HTML code including JavaScript.

■ You cannot entirely prevent your web page to look inside


but can take few steps to stop all it from gaining access to
your JavaScript.

■ Following are some of techniques for hiding your code:

1) Disabling the right mouse button


2) Hiding JavaScript
6.5.1 Hiding Source Code
■ As every developer knows that we can view the source code of any
webpage by Right clicking on web page and choosing View Source
option from context menu.

■ You cannot hide your HTML code and JavaScript from viewers but
you can place obstacles in it.

■ You can disable the right mouse button on your site so the visitor
can't access the View Source menu option on the context menu.

■ In addition, you can store your JavaScript on your web server


instead of building it into your web page.
6.5.2 Disabling the right mouse
button
■ You can disable the right mouse
button on your site so the visitor
can't access the View Source menu
option on the context menu.
■ You have to check for content menu
event to do this.
Example
<html>
<head>
<title>Disable Mouse Right Click</title>
<script>
function disableRightClick(e) {
alert('Right click disabled');
return false;
}
function init() {
document.oncontextmenu = disableRightClick;
}
</script>
</head>
<body onload="init()">
<h1>Right click on screen, Context menu is disabled</h1>
</body>
</html>
6.5.3 Hiding JavaScript
■ You can hide your JavaScript from a
visitor by storing it in an external file on
your web server.

■ The external file should have the .js


file extension.

■ The browser then calls this file


whenever the browser encounters a
JavaScript element in the web page.
6.5.3 Hiding JavaScript
6.5.3 Concealing email address
■ In out mail box we all receive spam mails and we think they
are
send by merchants who sell our email-address to spammers.

■ The reason behind this is Spam-crawlers and Spam-Bots.

■ These are the programs that surf the Net looking for e-mail
addresses that are embedded into web pages, such as those
placed there by developers to enable visitors to contact them.

■ The bots then strip these e-mail addresses from the web page
and
store them for use in a spam attack.
6.5.3 Concealing email address
■ The solution to this common problem is to conceal your e-
mail address in the source code of your web page so that
bots can't find it but so that it still appears on the web page.

■ Typically, bots identify e-mail addresses in two ways:


– by the mailto: attribute that tells the browser the e-mail
address to use and
-by the @ sign that is required of all e-mail addresses

■ To conceal an e-mail address, you need to create strings


that contain part of the e-mail address and then build a
JavaScript that assembles those strings into the e-mail
address, which is then written to the web page.
6.5.3 Concealing email address
6.5.3 Concealing email address
<html>
<head>
<script>
function makelink(){
var str = "mailto:";
// first part of the address
str = str + String.fromCharCode(109, 97, 105, 108, 116, 111);
// the at sign
str = str + String.fromCharCode(64);
// the domain part
str = str + String.fromCharCode(109, 121, 100, 111, 109, 97, 105, 110, 46, 99, 111, 109);
window.location.href = str;
}
</script>
</head>
<body>
<input type="button" value="Send" onclick="makelink()">
</body>
</html>
6.6 Frameworks of JavaScript
and its application
■ A software framework is an abstract or concrete framework under which software
providing generic functionality can be selectively changed by additional user-written
code.
■ JavaScript framework is written in JavaScript where the programmers can
manipulate the functions and use them for their convenience.
■ It is a type of tool that makes working with JavaScript easier and smoother.
■ Following are the most frequently and popularly used framework used by
programmer
to code the application as device responsive.
1) AngularJS
2) ReactJS
3) MeteorJS
4) Node.js
5) Backbone.js
Menu
 Menus are list of choices that user can select.
 User can select one at a time or more as per type of
menu
 Types
 -Pulldown menu
 -context menu
 -sidebar menu
 -scrollable menu
 -highlighted menu
 -Sliding menu
 -Pop-up menu
 -Tab Menu
 -Floating menu
Pull Down Menu
 Pulldown menus are also known as
dropdown menu
 These are changeable menus
including multiple options
 Options are defined in option tag and
on change function is called.
 This function defined in javascript,
which is executed whenever option is
changed.
Example
<html>
<head>
<title>Pulldown Menu Example</title>
<script>
function displayPage(ch) {
page = ch.options[ch.selectedIndex].value
if(page != "")
{
window.location = page
}}
</script>
</head>
<body>
<form name='form1' action="#">
Select your favourite website:
<select name="mymenu" onchange="displayPage(this)">
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
<option value="https://www.msbte.org.in">MSBTE</option>
</select>
</form>
</body>
</html>
Context menu
6.4.3 Validating menu selection
6.4.4 Floating menu
6.4.5 Chain Select menu
6.4.6 Tab menu
6.4.7 Popup menu
6.4.8 Slide In menu
6.4.9 Highlighted menu
6.4.10 – Folding Tree Menu
6.4.12 – Scrollable Menu
6.4.13 – Side Bar Menu

You might also like