Scribd
Upload
20 views13 pages

Lastchapter ppt2

Uploaded by

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

Lastchapter ppt2

Uploaded by

janhavi1292006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 13

Window status

The status bar in JavaScript can be manipulated using the window.status property. This property allows
you to set the text displayed in the browser’s status bar. However, it’s important to note that this feature
is deprecated and may not work in all modern browsers due to security concerns

<html>

<body>

<h1>The Window Object</h1>

<h2>The status Property</h2>

<p>The status property is not supported in any browser.</p>

<script>

window.status = "Some text in the status bar.";

</script>

</body>

</html>

Scroll text in the status bar

In this blog, we will know how to scroll the text in the status bar using JavaScript.

<html>

<head>

<title>Javascript ScrollText</title>

<script language="javascript">

msg="This is an example of scrolling message";

spacer="............ .............";

pos=0;

function ScrollMessage()
{

window.status=msg.substring(pos,msg.length)+spacer+msg.substring(0,pos);

pos++;

if(pos>msg.length)

pos=0;

window.setTimeout("ScrollMessage()",100);

ScrollMessage();

</script>

</head>

<body>

<p>Scrolling Message Example</p>

<p>Look at the status line at the bottom of the page</p>

</body>

</html>

Banner in Javascript

Displaying banners ads is a common practice for showing advertisements on web


pages to the visitors. Banners ads are normally created using standard graphic
tools such as Photoshop, Paintbrush Pro, and other software. Banner ads can be
static or animated. Animated images are animated GIF files or flash movies. Flash
movies are created using Macromedia Flash and the browsers must have installed
flash plugin to view the movies. On the other hand, you can create some
animated effect using JavaScript, like rotating static banner ads at a certain time
interval.
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’)

<html>

<head>

<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')

banner=0

function ShowBanners()

{ if (document.images)

{ banner++

if (banner==MyBanners.length) {

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/')

<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++

if (banner==MyBanners.length) {

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>

Slideshow

Creating a slideshow in JavaScript is a great way to enhance your website’s


interactivity. Here’s a simple example to get you started

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;
margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

/* Caption text */

.text {
color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;
width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

.active, .dot:hover {

background-color: #717171;

/* Fading animation */

.fade {

animation-name: fade;

animation-duration: 1.5s;

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

}
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

</style>

</head>

<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img_nature_wide.jpg" style="width:100%">

<div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="img_snow_wide.jpg" style="width:100%">

<div class="text">Caption Two</div>

</div>
<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img_mountains_wide.jpg" style="width:100%">

<div class="text">Caption Three</div>

</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<br>

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

<script>

let slideIndex = 1;

showSlides(slideIndex);
function plusSlides(n) {

showSlides(slideIndex += n);

function currentSlide(n) {

showSlides(slideIndex = n);

function showSlides(n) {

let i;

let slides = document.getElementsByClassName("mySlides");

let 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";

</script>

</body>

</html>

You might also like