Scribd
Upload
34 views

CSS Unit 6

Uploaded by

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

CSS Unit 6

Uploaded by

ranesanskar70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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