Scribd
Upload
6 views25 pages

Chapter 6

Uploaded by

nimbalkarvikram966
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
6 views25 pages

Chapter 6

Uploaded by

nimbalkarvikram966
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/ 25

Chapter 6

1. Window status
<html>
<head>
<title>Status bar</title>
<script>
function showStatus(){
var win = window.open("","myWindow",'height=100,width=100');
win.status = "V2V";
}
</script>
</head>
<body onload="showStatus()">
</body>
</html>

2. Simple banner

<html>
<head>
<title>Banner</title>
<script>
var banners = new Array("c.png","python.png","java.png");
var count = 0;
function rotate(){
count ++;
if(count == banners.length){
1
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
count = 0;
}
document.img1.src = banners[count];
setTimeout(rotate,1000);
}
</script>
</head>
<body onload="rotate()">
<img src="c.png" name="img1" height="200" width="200">
</body>
</html>

Output :

3. Linking Banner

2
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array('c.png','python.png','java.png')
BannerLink = new Array('google.com/','vpt.edu.in/', 'msbte.org.in/');
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href ="http://www." + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner];
setTimeout("DisplayBanners()",1000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()">
<img src="c.png" width="300" height="300" name="RotateBanner" />
</a>
</center>
3
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
</body>
</html>

Output :

4. Slideshow

<html>
<head>
<title>Slide show</title>
<script>
var pics = new Array("c.png","python.png","java.png");
counter = 0;

function SlideShow(status){
if(document.images){
4
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
counter = counter + status;
if(counter < 0){
counter = pics.length - 1;
}
if(counter > (pics.length - 1)){
counter = 0;
}

document.img1.src = pics[counter];
}
}
</script>
</head>
<body>
<img src="c.png" height="300" width="300" name="img1">
<br>
<input type="button" value="Next" onclick="SlideShow(1)">
<input type="button" value="Back" onclick="SlideShow(-1)">
</body>
</html>

Output :

5
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
5. Changing Background Color
<html>
<head>
<title>Background Change</title>
<script>
function change(){
var color = document.getElementById("color").value;
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<select id="color" onchange="change()">

6
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html>

Output :

6. Floating Menu

<html>
<head>
<title>Floating menu</title>
<style>
.menu{
background-color: yellowgreen;
width: 200px;
padding: 10px;
color: white;
7
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
position: fixed;
}
.menu a{
display: block;
}
</style>
</head>
<body>
<nav class="menu">
<h3>Floating Menu</h3>
<a href="C.txt">C</a>
<a href="java.txt">java</a>
<a href="python.txt">Python</a>
</nav>
</body>
</html>

Output :

7. Chain select menu


8
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<html>
<head>
<title>Chain selection</title>
<script>
var IFemp = new Array("Ram","Sham");
var COemp = new Array("jon","doe");
function getEMP(branch){
var i;
//Remove all elements
for(i = document.myForm.emp.options.length - 1; i>0;i--){
document.myForm.emp.options.remove(i);
}

var dept = branch.options[branch.selectedIndex].value;


if(dept != ""){
if(dept == "1"){
for(i=1;i<=IFemp.length;i++){
document.myForm.emp.options[i] = new Option(IFemp[i-1]);
}
}
if(dept == "2"){
for(i=1;i<=COemp.length;i++){
document.myForm.emp.options[i] = new Option(COemp[i-1]);
}
}
}
}
</script>

9
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
</head>
<body>
<form name="myForm">

<select name="dept" onchange="getEMP(this)">


<option value="0">Department</option>
<option value="1">IF</option>
<option value="2">CO</option>
</select>

<select name="emp">
<option value="0">Employee</option>
</select>
</form>
</body>
</html>

Output :

10
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
8. Tab Menu

<html>
<head>
<title>Tab Menu</title>
<style>
.cityClass{
display: none;
}
</style>
<script>
function openCity(city){
var i;
var x = document.getElementsByClassName("cityClass");
for(i=0;i<x.length;i++){
x[i].style.display = "none";
}
var y = document.getElementById(city);
y.style.display = "block";
}
</script>
</head>
<body>
<div>
<button onclick="openCity(this.value)" value="kalyan">Kalyan</button>
<button onclick="openCity(this.value)" value="thane">Thane</button>
<button onclick="openCity(this.value)" value="csmt">CSMT</button>
</div>
<div>

11
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<div id="kalyan" class="cityClass">
<p>This is kalyan page</p>
</div>

<div id="thane" class="cityClass">


<p>This is thane page</p>
</div>

<div id="csmt" class="cityClass">


<p>This is CSMT page</p>
</div>
</div>
</body>
</html>

Output :

9. Popup Menu

<html>
<head>
<title>Popup menu</title>

12
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<style>
a{
display: block;
}
.branch{
display: none;
}
.program:hover .branch{
display: block;
}
</style>
</head>
<body>
<div class="program">
Program
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</div>
</body>
</html>

Output :

13
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
10. Sliding Menu

<html>
<head>
<title>Sliding menu</title>
<style>
a{
display: block;
}
.branch{
position: absolute;
background-color: yellowgreen;
padding: 10px;
width: 200px;
left: -200px;
transition: 1s ease-in-out;
}
.branch:hover{
left: 0px;
14
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
}
</style>
</head>
<body>
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</body>
</html>

Output :

15
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
11. Highlighted Menu

<html>
<head>
<style>
.link:hover{
background-color: grey;
}
</style>
</head>
<body>
<a class="link" href="#">IF</a>
<a class="link" href="#">CO</a>
<a class="link" href="#">AIML</a>
</body>
</html>

Output :

16
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
12. Folding tree menu

<html>
<head>
<style>
ul, #myUL {
list-style-type: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.nested {
display: none;
}

17
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
.active {
display: block;
}
</style>
</head>
<body>
<ul id="myUL">
<li><span class="caret">India</span>
<ul class="nested">
<li>Karnataka</li>
<li>Tamilnaadu</li>
<li><span class="caret">Maharashtra</span>
<ul class="nested">
<li>Mumbai</li>
<li>Pune</li>
<li><span class="caret">Navi Mumbai</span>
<ul class="nested">
<li>Nerul</li>
<li>Vashi</li>
<li>Panvel</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
18
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>

Output :

13. Context menu

<html>
<head>
<style>

19
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter"></menuitem>
<menuitem label="Facebook"></menuitem>
</menu>
<menuitem label="Email This Page"></menuitem>
</menu>
</div>
</body>
</html>

14. Scrollable Menu

<html>
<head>
<style>
div.scrollmenu {
background-color: #333;
20
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
padding: 14px;
}
</style>
</head>
<body>
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
</body>
</html>
21
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
Output :

15. Side Bar

<html>
<head>
<style>
.sidebar{
position:fixed;
background-color: pink;
padding:10px;
}

22
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
.sidebar a{
display:block;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#home"> Home</a>
<a href="#vision">Vision </a>
<a href="#mission"> Mission</a>
<a href="#prog">Programs</a>
</div>
</body>
</html>

Output :

16. Disabling right click

23
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<html>
<head>
<script>
window.onload = function(){
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);}
</script>
</head>
<body>
<h3>Right click on screen,Context Menu is disabled</h3>
</body>
</html>

Output :

17. Concealing Your E-mail Address


<html>
<head>
<title>Conceal Email Address</title>

24
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<script>
function CreateEmailAddress(){
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
}
</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>

25
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material

You might also like