Unit VI

Unit- VI
Menus,navigation and web page protection

Status bar
JavaScript gives you 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 or you can display a small
amount of information about the page the user is on in the status bar. You can also trick people
into clicking a link, so be careful how you use it. If you play too many tricks on your visitors,
they might not come back.
Example
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body onLoad="window.status='Welcome!';return true">
</body></html>
2. <html> <head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.htmlcenter.com"
onMouseOver="window.status='HTMLcenter';return true"
onMouseOut="window.status='';return true">
HTMLcenter
</a></body></html>
Banner:
Creating Rotating Banner Ads
Rotating banners ads comprises several banner images that constantly rotate on a webpage at a
fix time interval. You can create these banner images using standard graphics tools. Let’s create
four banner images and name them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg
The JavaScript starts by declaring an array to store the banner images using the new Array
keywords, as follows:
MyBanners=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Each element in the array is assigned with an index, starting from 0. In our example, banner1.jpg
is assigned with index 0, banner2.jpg is assigned with index 1, banner3.jpg is assigned with
index 2 and banner3.jpg is assigned with index 3.
To track the index of the current banner, we can assign the index to a variable. Here we use the
variable banner and initialize it with a value 0 to load the first banner image.
Next, we create a function ShowBanners which will display all the banner images at fix interval.
This can be achieved by incrementing the index values using the statement banner++ and when
the index value is equal to the total number of elements in the array(denoted
by MyBanners.length), the index value is set back to 0, which is the index of the first banner.
banner++
if (banner==MyBanners.length) {
banner=0}
The process is repeated at a fix time interval using the setTimeout ( ) function. The setTimeout ( )
function comprises two arguments, the first is the function to be activated, i.e the ShowBanners
( ) function and the second one is the duration measured in milliseconds, therefore 1000 is
equivalent to 1 second so 5000 is equal to 5 seconds.
The final part of the JavaScript is to call out the ShowBanners ( ) function using the onload
method
Example;-
<html>
<head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function ShowBanners()
{ if (document.images)
{ banner++
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body> </html>
Creating Rotating Banner Ads with URL Links
Creating rotating banner images will provide the visitor to your webpage with some basic
information. However, if you want the visitor to get more information by clicking on the banner
images, you need to create rotating banner ads that contain URL links.
The script is basically the same as the previous one but we need to add another array that
comprises the links, as follows:
MyBannerLinks=new Array('URL1','URL2','URL3/','URL4/')
You need to make sure that the arrangement of the links is in corresponding order with the
banner images in the first array. Next, we create the ShowLinks function to link the current
banner image to the relevant URL and then assign the URL to the href attribute of the anchor tag.
To load the banner images with URL links, we insert an anchor tag within the <body></body>
section before the <img> tag that displays the current banner image. The anchor tag’s attribute
href is used to call the ShowLinks( ) function when the visitor clicks on the banner.
Example:
<html><head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://
onlinebizguide4you.com/','http://javascript-tutor.net/')
banner=0
function ShowLinks(){
document.location.href="http://www."+MyBannerLinks[banner]
}function ShowBanners()
{ if (document.images)
{ banner++
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>
Slide Show:-
Example
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Menus:-
Creating Pull Down Menus
Create a dropdown menu that appears when the user clicks on a button.
We have styled the dropdown button with a background-color, padding, hover effect, etc.
The .dropdown class uses position:relative, which is needed when we want the dropdown content
to be placed right below the dropdown button (using position:absolute).
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will
be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this.
Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the
width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make the dropdown menu
look like a "card". We also use z-index to place the dropdown in front of other elements.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
to validate a dropdownlist using javascript

function validateRadio() {
var flag = false;
$('#<%=RadioButtonList1.ClientID%> input').each(function(){
if($(this).is(":checked"))
flag = true;
});
return flag;
}
function validateDropList() {
if ($('#<%=DropDownList1.ClientID%>').val() == "") {
return false;
}
else
return true;
}
function submitForm() {
if (!validateRadio()) {
alert("Please do mark option.");
return false; //do not submit form
}
else if(!validateDropList()){
alert("Please do select a country.");
return false; //do not submit form
}
else
return true;
Folding a tree menu in javascript :-You can set default expanded/collapsed items and
submenus.
 After clicking on menu item selected item becomes highlighted.

 When the submenu is larger than the visible area of the page the submenu will be
automatically decreased. To see all the submenu items you do not need to use scrollbars
or something like that - just put your mouse to the bottom of a submenu and it will be
automatically scrolled! You can also specify height and width for each separate submenu.
 There is no need to write additional code on a server side to remember what items were
expanded/collapsed. Javascript/DHTML Tree can save items state automatically!
Side Bar menu:

Protecting WebPage:-
In the below code, "Password" is the password and "protected.html" is the name of the password-
protected page. (Substitute your own password and URL when you use this script.) If visitors
enter the correct password, they will forward to "protected.html"; if they enter an incorrect
password, they'll hit the page called "oops.html."
This shouldn't be used as a substitute for true security, but it isn't bad in a pinch. It works nicely
for, say, an area of your site reserved for family members only.
If you do use this code to protect a page or directory, you might want to keep search engines
from listing it. Place this tag in the HEAD section of your protected page:
<meta name="robots" contents="noindex">
Of course, it's possible for someone clever enough to get the password right from the source
code. So you should somehow make the 'View Source' option impossible. You can
<script language="Javascript">

</script>
Conceling Email Address:-
Write a JavaScript function to hide email addresses to protect from unauthorized user.
Test Data:
console.log(protect_email("robin_singh@example.com"));
"robin...@example.com"
protect_email = function (user_email) {

var avg, splitted, part1, part2;
splitted = user_email.split("@");
part1 = splitted[0];
avg = part1.length / 2;
part1 = part1.substring(0, (part1.length - avg));
part2 = splitted[1];
return part1 + "...@" + part2;
};
console.log(protect_email("robin_singh@example.com"));
Disable Mouse Right Click using JavaScript-
Disable Mouse Right Click using JavaScript : Today we are show you how to disable mouse
right click using JavaScript in website or asp.net webpage. It’s a very simple script to disable
right click event. You can disable the right click event in whole website by adding this script in
master page.
<script type="text/javascript">
if (document.layers) {
//Capture the MouseDown event.
document.captureEvents(Event.MOUSEDOWN);
//Disable the OnMouseDown event handler.
document.onmousedown = function () {
return false;
};
}
else {
//Disable the OnMouseUp event handler.
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
//Check the Mouse Button which is clicked.
if (e.which == 2 || e.which == 3) {
//If the Button is middle or right then disable.
return false;
}
}
};
}
//Disable the Context Menu event.
document.oncontextmenu = function () {
return false;
};
</script>

Unit VI

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit VI

Uploaded by

Copyright:

Available Formats

Unit- VI

Menus,navigation and web page protection

<title>JavaScript Status Bar</title></head>

<body onLoad="window.status='Welcome!';return true">

<title>JavaScript Status Bar</title></head>

Creating Rotating Banner Ads with URL Links

<a href="javascript: ShowLinks()">

<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>

Creating Pull Down Menus

to validate a dropdownlist using javascript

 After clicking on menu item selected item becomes highlighted.

Side Bar menu:

Conceling Email Address:-

protect_email = function (user_email) {

Disable Mouse Right Click using JavaScript-

You might also like