Untitled Document

http://javascriptkit.com/script/cut105.shtml

Remote Control little window

Step 1: Insert the following code into the <body> of the MAIN page (the page that will launch the remote:

Step 2: Copy the below code and save it as remote.htm. This is the file you should edit- simply change the URLs in function remote2 below to your own:

<html> <head> <title>Remote Control</title>
<script>

</script>
</head><body bgcolor="ffffff">
<div align="left"><p align="center">Remote Control</p> </div>

<p align="left"><a href="javascript:remote2('../javaindex.htm')">JavaScript Tutorials</a></p>
<p align="left"><a href="javascript:remote2('../howto/webbuild.htm')">Web tutorials</a></p>

</body></html>

====================

http://javascriptkit.com/script/script2/indexit.shtml

This user friendly image slideshow displays an index of all of the images, letting the viewer see the position of the current image within the slideshow, and jump to a particular image at will. It uses CSS for its overall appearance, allowing for easy customization.

Step 1: Insert the below CSS and script into the <HEAD> section of your page:

#slideshowContainer{ width: 300px; height: auto; }

#numberDiv a{ font: bold 14px Arial; text-decoration: none;}

#backforthbuttons{ margin-top: 6px;}

</style>

// Index It Image Slideshow script- By JavaScriptKit.com visit JavaScript Kit- http://www.javascriptkit.com/

//Specify images for slideshow: //["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["plane1.gif", "http://www.google.com"]
numberslide[1]=["plane2.gif", ""]
numberslide[2]=["plane3.gif", ""]
numberslide[3]=["plane4.gif", ""]
numberslide[4]=["plane5.gif", ""]

var mylinktarget="" //specify optional link target
var mylinkcolor="navy" //specify default color of number links
var mylinkcolorSelected="red" //specify color of selected links

var imgborderwidth=0 //specify border of image slideshow

/////Stop customizing here////////////////

var preloadit=new Array()
for (i=0;i<numberslide.length;i++){
preloadit[i]=new Image()
preloadit[i].src=numberslide[i][0]
}

var currentindex=""

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
for (i=1; i< numberslide.length; i++)
document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].style.color=mylinkcolor
}

function goforward(){
if (currentindex<numberslide.length-1)
changeslides(currentindex+1)
}

function goback(){
if (currentindex!=0)
changeslides(currentindex-1)
}

</script>

Step 2: Where you want the slideshow to appear on your page, add the below code:

<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial") //This call displays the first image
</script>
</div>

<div id="numberDiv">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

<p style="font: normal 11px Arial">This free script provided by<br>
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

</div>

You'll want to customize the CSS in Step 1, so the slideshow's width and height is set to snugly contain the largest image within your collection. Then, change the variables inside the script that follows based on the comments.

========

http://javascriptkit.com/script/script2/multishow.shtml

add the below to the <body> section of your page:

/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=3

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=2000

//#3 SHOULD each slide be linked to a unique URL?
var linked=1

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

//#4 SPECIFY image paths of 1st slideshow
slideshows[0][0]='car1.gif'
slideshows[0][1]='car2.gif'
slideshows[0][2]='car3.gif'

//SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
slideshows[1][0]='house1.gif'
slideshows[1][1]='house2.gif'
slideshows[1][2]='house3.gif'

//SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
slideshows[2][0]='boat1.gif'
slideshows[2][1]='boat2.gif'
slideshows[2][2]='boat3.gif'

//EXTEND THIS ARRAY if more than 3 slide shows

var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='http://mysite.com/car1.htm'
slidelinks[0][1]='http://mysite.com/car2.htm'
slidelinks[0][2]='http://mysite.com/car3.htm'

//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='http://mysite.com/house1.htm'
slidelinks[1][1]='http://mysite.com/house2.htm'
slidelinks[1][2]='http://mysite.com/house3.htm'

//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='http://mysite.com/boat1.htm'
slidelinks[2][1]='http://mysite.com/boat2.htm'
slidelinks[2][2]='http://mysite.com/boat3.htm'

function clickredir(){
window.location=slidelinks[maininc][subinc]
}

var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

runit=setInterval("slideit()",interval)

</script>

<p>
- <a href="javascript:setslide(0)">JavaScript books</a><br>
- <a href="javascript:setslide(1)">DHTML books</a><br>
- <a href="javascript:setslide(2)">Flash books</a>

Follow the comments inside script to configure the various image paths, and optionally, their URLs. Note how the text links are set up to launch a different slide show:

======================

http://javascriptkit.com/script/script2/randomslide.shtml

Simply copy the below into the <BODY> of your page:

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=1000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

=======================

http://www.javascriptkit.com/javatutors/randomorder.shtml

Randomizing the display order of content using JavaScript

HTML demands that content be displayed either sequentially, or at least in some static order inside the webpage. Using JavaScript, we can jiggle things up, and display pieces of content that randomly interchange order. The result is a group of content that randomly changes display position each time the page is loaded, allowing each of them to receive equal attention from viewers.

Netscape developed JavaScript in 1996
You can cut and paste JavaScript
JavaScript is not Java

In the above, three lines of content are displayed in random order. Reloading the page will yield a new, different ordering.

So how are the content rotated? Well, first off, in order for JavaScript to do any kind of manipulation on textual content, they have to be stored inside variables. An array will do nicely:

var contents=new Array()
contents[0]='<img border="0" src="m1.gif">Netscape developed JavaScript in 1996'
contents[1]='<img border="0" src="m2.gif">JavaScript is not Java'
contents[2]='<img border="0" src="m3.gif">You can cut and paste JavaScript'

To the heart of the matter now- randomizing the order of the array elements before writing them out (displaying them). A kind of "trial and error" technique is employed here. We continuously generate a random number between 0 and array length-1, and test each time whether the element at that index has been written out. If not, write it out, "mark it", and move on, until all non marked elements (which initially every array element is) have been written out. By the end of the process, all the content would have been displayed, and in a random order.

var i=0
//variable used to contain controlled random number
var random
var spacing="<br>"
//while all of array elements haven't been cycled thru
while (i<contents.length){
//generate random num between 0 and arraylength-1
random=Math.floor(Math.random()*contents.length)
//if element hasn't been marked as "selected"
if (contents[random]!="selected"){
document.write(contents[random]+spacing)
//mark element as selected
contents[random]="selected"
i++
}
}

This robust technique can be used to mix up the ordinal order of any group of values, such as a pool of lotto numbers.