JavaScript made simple: May 2009

Friday, May 22, 2009

Javascript Slideshow with timeout

We have so many sideshow available, The below also explains the same with some simple steps and with one java script method setTimeout).

This makes our work so simple to rotating the images.

<html>
<head>
<titleA Timed Slide Show</title>
<script type = "text/javascript">

var the_images = new Array();
the_images[0] = new Image();
the_images[0].src = "one.jpg";
the_images[1] = new Image();
the_images[1].src = "two.jpg";
the_images[2] = new Image();
the_images[2].src = "three.jpg";
var the_timeout;
function rotateImage(index)
{
window.document.my_image.src = the_images[index].src;
index++;
if (index >= the_images.length)
{
index = 0;
}
var the_function_string = "rotateImage(" + index + ");";
the_timeout = setTimeout(the_function_string, 1000);
}
Timing Events 165

</script>
</head>
<body>
<img name = "my_image" src = "one.jpg">
<form>

onClick = "clearTimeout(the_timeout);">
</form>
</body>
</html>

Code Explaination:

The first few lines set up the array containing the images we’ll put in the slide
show. Line creates the new array, sets the first item in the array equal to
an image object, and sets the src of that image object to the first picture of
the slide show. Lines and are just like the lines used to preload images
before an image swap. The next few
lines load the rest of the images.
After the images have loaded, and set up two variables for use in the
timing loop. Line declares the_timeout, which keeps track of each time-out,
and keeps track of which image in the slide show to bring up next time the
script calls rotateImage(). Keep in mind that declaring the index variable
outside the rotateImage() function, as I’ve done here in , is not the safest
programming practice—it’s just easier and quicker than the safe solution.
A safer version of rotateImage() will be described subsequently.
Next comes the rotateImage() function, which swaps in a new image and
then calls itself in one second. The first line of the function does the
image swap. It looks up the value of index, finds the src of the element numbered
index in the the_images array, and swaps in that image for my_image (the
image in).
After swapping the image, the function adds 1 to the index variable. The
next time rotateImage() gets called, it looks up the next item in the array and
swaps in that item. We have to make sure the number stored in index doesn’t
exceed the number of images stored in the the_images array. The if-then
statement starting in takes care of this issue by ensuring that if index has
incremented past the number of items in the array, it will be set back to 0
(corresponding to the first image in the the_images array). The last line in the
function should be old hat by now. This line sets a time-out to call the
rotateImage() function in one second.
Timing Events 163
The slide show starts when a visitor presses the button that calls
rotateImage() and ends when the user presses the Stop the Show button,
canceling the most recently set time-out.

Saturday, May 9, 2009

Show webpage content when scrolling comes

We may need to show some part of the page content. We will have the web pages with the page contents. When displaying the web pages there will be large content or small content. When we have the small content then the scrolling will not appear. So when we have the large content then we will have the scrolling option. So all the content will be scrolled from top to bottom.

But we need to only some part of the content need to be scrolled when the scrolling option is scrolled. The main content will not be scrolled when the page is scrolled.

Preview

Code

Javascript disable right click

Disable right click option provides an option to disable the right click option when ever user wants to copy the content of the code. Disabling the right click also secures the data upto some part.

This is mainly used for the important data not to be disclosed to another persons or you dont want to provide an option to copy the images from your site to any another sites. Now a days this is the most common task to disable the right click functionality.

Javascript Code

<html>
<head>
<script language=JavaScript>
var message="This is the example to disable the right click";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>
</head>
<body>

This is the web page content ... You can place any content here................
</body>
</html>