JavaScript - How To Make A Slideshow Should Slide

Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help!

Here's the html:

Code:

<li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
     <div id="slidedisplay_2" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		<span></span>
		</p>
</div>
     </div></li>
				
					<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
     <div id="slidedisplay_3" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		</p>
</div>
     </div>

The javascript:

Code:

$(document).ready(function () {

	$('a.slidecontrol').click(function(){
		var $this = $(this);
		var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
		var $div = $('#'+divID);
		if ($div.is(':visible')) {
			$div.slideUp(500);
		} else {
			$div.slideDown(500);
		}
		return false;
	});
	
});

The CSS:

Code:

 #thumbs7{
	position:relative;
	width:200px;
	clear:both;
	height:41px;
	overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url(../images2/thumbs_mask.gif) no-repeat center top;
}

I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this?

<div style="padding-left:45px;width:852px;">
<a href=".html" class="Button">
<div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 1</span><br />

</div>
</a>

<a href="" class="Button">
<div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 2</span><br />
</div>
</a>
<a href="" class="Button">
<div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat">
<span id="homeButtonText">Question 3</span><br />
</div>
</a>
</div>

Good Day:
I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site.
Thanks very much in advance.

I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes:

1. There will be a title bar placed within a right and left arrow on either side.
2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list).
3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out.

I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated..

i am trying to slide multiple elements in my page at the same time.
I wrote a script that can do one element at a time:
Code:

	var count;
	var obj;
	function slide(elem,endy,endx,time){
		obj=elem;
		count=time;
		currenty=obj.style.top.split('p')[0];
		currentx=obj.style.left.split('p')[0];
		deltay=endy-currenty;
		deltax=endx-currentx;
		yrate=deltay/time;
		xrate=deltax/time;
		framey=0;
		framex=0;
		fooy=setInterval("movey(obj)",1);
		foox=setInterval("movex(obj)",1);
		
		
		
	}
	
	function movex(obj){
		framex++;
		currentx=currentx*1+xrate;
		obj.style.left=Math.floor(currentx);
		if(framex==count){
			clearInterval(foox);
		}
	}	
	
	function movey(obj){
		framey++;
		currenty=currenty*1+yrate;
		obj.style.top=Math.floor(currenty);
		if(framey==count){
			clearInterval(fooy);
		}
	}

is their anyway to modify this code so it does not use global variables and can run multiple instances simulatnuasly.

I am using ASP.NET and AJAX here.

basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example:

<< prev [image1] [image2] [image3] [image4] Next >>

<< prev [image5] [image6] [image7] [image8] Next >>


so when the user presses next or previous, it will SLIDE to the left/right.

the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev.

how can I go about doing this type of effect?

Hello guys! :-)
So, this is my first post so bare with me

I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made.
It has to be javascript, and as simple as possible :-)

I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result.
So:

Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed?

Ty in advance! :-)

Hi, i'm trying to create horizontal banner slide, I want something really simple and basic, most script i find is far to complex and more like a gallery. I found this script on dynamicdrive but it is quite old, it does what i'm after but and its a big but, i can't speed it up :-(

Does anybody know how i could increase the speed of the swipe from slide to slide on this? thanks

Ben

Code:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">

		/*
		Left-Right image slideshow Script-
		By Dynamic Drive (www.dynamicdrive.com)
		For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
		*/
		
		///////configure the below four variables to change the style of the slider///////
		//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
		var scrollerwidth='800px'
		var scrollerheight='300px'
		var scrollerbgcolor=''
		//3000 miliseconds=3 seconds
		var pausebetweenimages=3000
		
		
		//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
		var slideimages=new Array()
		slideimages[0]='<a href="#"><img src="images/website-banner-1.jpg" border="0"></a>'
		slideimages[1]='<a href="#"><img src="images/website-banner-2.jpg" border="0"></a>'
		slideimages[2]='<a href="#"><img src="images/website-banner-3.jpg" border="0"></a>'
		//extend this list
		
		///////Do not edit pass this line///////////////////////
			 
		var ie=document.all
		var dom=document.getElementById
		
		if (slideimages.length>1)
		i=2
		else
		i=0
		
		function move1(whichlayer){
		tlayer=eval(whichlayer)
		if (tlayer.left>0&&tlayer.left<=5){
		tlayer.left=0
		setTimeout("move1(tlayer)",pausebetweenimages)
		setTimeout("move2(document.main.document.second)",pausebetweenimages)
		return
		}
		if (tlayer.left>=tlayer.document.width*-1){
		tlayer.left-=5
		setTimeout("move1(tlayer)",50)
		}
		else{
		tlayer.left=parseInt(scrollerwidth)+5
		tlayer.document.write(slideimages[i])
		tlayer.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move2(whichlayer){
		tlayer2=eval(whichlayer)
		if (tlayer2.left>0&&tlayer2.left<=5){
		tlayer2.left=0
		setTimeout("move2(tlayer2)",pausebetweenimages)
		setTimeout("move1(document.main.document.first)",pausebetweenimages)
		return
		}
		if (tlayer2.left>=tlayer2.document.width*-1){
		tlayer2.left-=5
		setTimeout("move2(tlayer2)",50)
		}
		else{
		tlayer2.left=parseInt(scrollerwidth)+5
		tlayer2.document.write(slideimages[i])
		tlayer2.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move3(whichdiv){
		tdiv=eval(whichdiv)
		if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
		tdiv.style.left=0+"px"
		setTimeout("move3(tdiv)",pausebetweenimages)
		setTimeout("move4(scrollerdiv2)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
		tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
		setTimeout("move3(tdiv)",5)
		}
		else{
		tdiv.style.left=scrollerwidth
		tdiv.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move4(whichdiv){
		tdiv2=eval(whichdiv)
		if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
		tdiv2.style.left=0+"px"
		setTimeout("move4(tdiv2)",pausebetweenimages)
		setTimeout("move3(scrollerdiv1)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
		tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
		setTimeout("move4(scrollerdiv2)",5)
		}
		else{
		tdiv2.style.left=scrollerwidth
		tdiv2.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function startscroll(){
		if (ie||dom){
		scrollerdiv1=ie? first2 : document.getElementById("first2")
		scrollerdiv2=ie? second2 : document.getElementById("second2")
		move3(scrollerdiv1)
		scrollerdiv2.style.left=scrollerwidth
		}
		else if (document.layers){
		document.main.visibility='show'
		move1(document.main.document.first)
		document.main.document.second.left=parseInt(scrollerwidth)+5
		document.main.document.second.visibility='show'
		}
		}
		
		window.onload=startscroll
		
		</script>

</head>

<body>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
        <layer id="first" left=1 top=0 width=&{scrollerwidth}; >
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[0])
        </script>
        </layer>
        <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[1])
        </script>
        </layer>
        </ilayer>
        
        <script type="text/javascript">
        if (ie||dom){
        document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
        document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
        document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
        document.write(slideimages[0])
        document.writeln('</div>')
        document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
        document.write(slideimages[1])
        document.writeln('</div>')
        document.writeln('</div>')
        document.writeln('</div>')
        }
        </script>  

</body>

Hello,
I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back
Can anyone tell me how i could do this?
i have inc my code
cheers

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}

.boxed {
position:absolute;
	left:25%;
  border: 2px black;
  border-style: plain;
  width: 700px;
  height: 800px;
}


.boxed1 {
position:absolute;
	left:25%;
  border: 1px blue;
  border-style: dotted;
  width: 700px;
  height: 350px;
  text-align:center;
  float: left; 
  padding:2px;
  background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>

<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>

<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>

<script type="text/javascript">


<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>

The menus are supposed to come out from the side, as an animation. I thought I had the correct code but for some reason it isn't working.

Could anyone take a look at my Javascript at let me know what I'm doing wrong?

Thanks...

Here are my files:

HTML:

Code:

 <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   The 221B Blog
   Author:          
   Date:   March 6, 2011          

   Filename:         sherlock.htm
   Supporting files: logo.jpg, mblog.css, sh.jpg, slides.js

-->
   <title>The Works of Sherlock Holmes</title>
   <link href="mblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slides.js"></script>

   <!--[if IE]>
      <style type="text/css">
         /* IE-specific styles to ensure list of links is 
            rendered properly */

         #linkList ul li   {float: left; width: 100%}
         #linkList ul li a {height: 1%} 
      </style>
   <![endif]-->

</head>

<body>
   <div id="page">
   <form id="searchForm" action="">

      <div id="head">
         <img src="logo.jpg" alt="The 221B Blog" />
         <input id="searchTxt" type="text" size="20" />
         <label for="searchTxt">Search</label>
      </div>

      <div id="linkList">
      <ul>
         <li><a href="#">Home</a></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#" class="pTitle">The Adventures of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list1">
                 <li><a href="#">A Scandal in Bohemia</a></li>
                 <li><a href="#">The Red-headed League</a></li>
                 <li><a href="#">A Case of Identity</a></li>
                 <li><a href="#">The Boscombe Valley Mystery</a></li> 
                 <li><a href="#">The Five Orange Pips</a></li>
                 <li><a href="#">The Man with the Twisted Lip</a></li>
                 <li><a href="#">The Blue Carbuncle</a></li>
                 <li><a href="#">The Speckled Band</a></li>
                 <li><a href="#">The Engineer's Thumb</a></li>
                 <li><a href="#">The Noble Bachelor</a></li>
                 <li><a href="#">The Beryl Coronet</a></li>
                 <li><a href="#">The Copper Beeches</a></li>
               </ul>
            </li>
         </ul></li>
                                                     
         <li><ul>            
            <li class="slideMenu">
               <a href="#">The Memoirs of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list2">
                  <li><a href="#">Silver Blaze</a></li> 
                  <li><a href="#">The Yellow Face</a></li> 
                  <li><a href="#">The Stock-broker's Clerk</a></li> 
                  <li><a href="#">The "Gloria Scott"</a></li> 
                  <li><a href="#">The Musgrave Ritual</a></li> 
                  <li><a href="#">The Reigate Puzzle</a></li> 
                  <li><a href="#">The Crooked Man</a></li> 
                  <li><a href="#">The Resident Patient</a></li> 
                  <li><a href="#">The Greek Interpreter</a></li> 
                  <li><a href="#">The Naval Treaty</a></li> 
                  <li><a href="#">The Final Problem</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Return of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list3">
                  <li><a href="#">The Empty House</a></li> 
                  <li><a href="#">The Norwood Builder</a></li> 
                  <li><a href="#">The Dancing Men</a></li> 
                  <li><a href="#">The Solitary Cyclist</a></li> 
                  <li><a href="#">The Priory School</a></li> 
                  <li><a href="#">Black Peter</a></li> 
                  <li><a href="#">Charles Augustus Milverton</a></li> 
                  <li><a href="#">The Six Napoleons</a></li> 
                  <li><a href="#">The Three Students</a></li> 
                  <li><a href="#">The Golden Pince-Nez</a></li> 
                  <li><a href="#">The Missing Three-Quarter</a></li> 
                  <li><a href="#">The Abbey Grange</a></li> 
                  <li><a href="#">The Second Stain</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Case Book of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list4">
                  <li><a href="#">The Illustrious Client</a></li> 
                  <li><a href="#">The Blanched Soldier</a></li> 
                  <li><a href="#">The Mazarin Stone</a></li> 
                  <li><a href="#">The Three Gables</a></li> 
                  <li><a href="#">The Sussex Vampire</a></li> 
                  <li><a href="#">The Three Garridebs</a></li> 
                  <li><a href="#">Thor Bridge</a></li> 
                  <li><a href="#">The Creeping Man</a></li> 
                  <li><a href="#">The Lion's Mane</a></li> 
                  <li><a href="#">The Veiled Lodger</a></li> 
                  <li><a href="#">Shoscombe Old Place</a></li> 
                  <li><a href="#">The Retired Colourman</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">His Last Bow 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list5">
                  <li><a href="#">Wisteria Lodge</a></li> 
                  <li><a href="#">The Cardboard Box</a></li> 
                  <li><a href="#">The Red Circle</a></li> 
                  <li><a href="#">The Bruce-Partington Plans</a></li> 
                  <li><a href="#">The Dying Detective</a></li> 
                  <li><a href="#">The Disappearance of Lady Frances Carfax</a></li> 
                  <li><a href="#">The Devil's Foot</a></li> 
                  <li><a href="#">His Last Bow</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Novels 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list6">
                  <li><a href="#">A Study in Scarlet</a></li>  
                  <li><a href="#">The Sign of the Four</a></li>  
                  <li><a href="#">The Hound of the Baskervilles</a></li>  
                  <li><a href="#">The Valley of Fear</a></li> 
               </ul> 
            </li>
         </ul></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#">The 221B Community 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list7">
                  <li><a href="#">Essays</a></li>
                  <li><a href="#">Fan Fiction</a></li>
                  <li><a href="#">Art</a></li>
                  <li><a href="#">Discussion Forum</a></li>
                  <li><a href="#">Issues Archive</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Holmes on the Web 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list8">
                  <li><a href="#">The 221B Museum</a></li>
                  <li><a href="#">Jeremy Brett Page</a></li>
                  <li><a href="#">Basil Rathbone Page</a></li>
                  <li><a href="#">The Baker Street Irregulars</a></li>
               </ul> 
            </li>
         </ul></li> 

         <li><ul>
            <li class="slideMenu">
               <a href="#">Multimedia 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list9">
                  <li><a href="#">Radio Podcasts</a></li>
                  <li><a href="#">Audiobooks</a></li>
                  <li><a href="#">Video Clips</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Doyle's Life &amp; Times 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list10">
                  <li><a href="#">About Arthur Conan Doyle</a></li>
                  <li><a href="#">Victorian England</a></li>
                  <li><a href="#">Strand Magazine</a></li>
                  <li><a href="#">The Holmes Atlas</a></li>
               </ul> 
            </li>
         </ul></li>
 
         <li><ul>
            <li class="slideMenu">
               <a href="#">Other Fictional Detectives 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list11">
                  <li><a href="#">Miss Marple</a></li>
                  <li><a href="#">Hercule Poirot</a></li>
                  <li><a href="#">Ellery Queen</a></li>
              </ul> 
           </li>
        </ul></li>

        <li class="newGroup"><a href="#">About Me</a></li>

     </ul>
     </div>
   
     <div id="main">
         <img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
         <p id="firstp">
            The most famous of fictional detectives, Sherlock Holmes
            first appeared in print in 1887, in stories written by the Scottish author
            and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
            of deductive reasoning to solve difficult and complex cases. Almost
            all Holmes stories are told in the first-person narration of
            Dr. John Watson, Holmes' closest friend and confidant.</p>
   
         <p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
            canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i> 
            which chronicled the meeting of Holmes and Watson and covered their 
            first case together. As Doyle wrote additional tales, the Sherlock Holmes 
            stories grew in popularity, becoming a regular feature of The 
            Strand magazine. Desiring to explore other literary pursuits, Doyle 
            grew tired of the detective and killed off Holmes in the short story
            <i>The Final Problem</i>. However public acclaim and a desire for more
            Holmes stories eventually persuaded Doyle to resurrect the popular 
            detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>

         <p>Doyle's final Holmes story, <i>His Last Bow</i> appeared in 1914, but 
            that did not end the public's fascination with Holmes and Watson. Basil 
            Rathbone brought the character to the silver screen in 14 movies
            loosely based on Doyle's original stories. In more recent years,
            Jeremy Brett played Holmes to great critical acclaim over four seasons of 
            the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes 
            has been played by over 70 actors appearing in over 200 films.</p>

         <p>To enjoy online versions of the Sherlock Holmes short stories and novels,
            select entries from the menu on the left.</p>
      </div>

   </form>
   </div>

</body>
</html>

Javascript:
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author: 
   Date:  

   Filename:  slides.js

   -------------------------------------------------------------
   Function List:
   makeMenus()
      Initializes the contents of the mystery.htm Web page, locating
      the sliding menus, setting their initial positions and 
      display styles and defining the onevent handlers.

   showSlide()
      Shows a sliding menu while hiding any inactive menus

   closeSlide()
      Closes an inactive sliding menu

   moveSlide()
      Moves a sliding menu horizontally across the page


   -------------------------------------------------------------
   Global Variable List:

   currentSlide
      An object variable pointing to the currently active sliding menu
   
   timeID
      A variable containing the id of a timed command using the setInterval method

   leftPos
      The current left position of the sliding menu as it is 
      moved across the page

   -------------------------------------------------------------
*/

window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
var leftPos = 0;


function makeMenus() {
	var slideMenus = new Array();
	var allElems  = document.getElementsByTagName("*");

	for (var i = 0; i < allElems.length; i++) {
		if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]);
}

	for (var i = 0; i < slideMenus.length; i++)  {
		slideMenus[i].onclick = showSlide;
		slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";

}

document.getElementsById("head").onclick = closeSlide;
document.getElementsById("main").onclick = closeSlide;
}


function showSlide() {
	slideList = this.getElementsByTagName("ul")[0];
	if (currentSlide && currentSlide.id == slideList.id) {
	closeSlide();
	} else {
		closeSlide();
		currentSlide = slideList;
		currentSlide.style.display = "block";
		timeID = setInterval("moveSlide()", 1);
	}
}

function closeSlide() {
	if (currentSlide) {
		clearInterval(timeID);
		currentSlide.style.left = "0px";
		currentSlide.style.display = "none";
		currentSlide = null;
	}
}

function moveSlide() {
	leftPos += 5;
	if (parseInt(currentSlide.style.left) <=220) {
		currentSlide.style.left = leftPos + "px";
	} else {
		clearInterval(timeID);
		leftPos = 0;
	}
}

CSS

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author:  
   Date:     
   Filename: mblog.css

   This file contains styles used in the sherlock.htm file.

*/

*                   {padding: 0px; margin: 0px; line-height: 1.2}

body                {background-color: white; 
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     font-size: 12px}

#page               {position: absolute; top: 0px; left: 10px; width: 1000px}

a                   {text-decoration: none; color: black}
p                   {margin: 15px 0px}

#head               {width: 800px; height: 108px; background-color: white; 
                     border-bottom: 1px solid black; margin-bottom: 10px}
#head img           {float: left}
#head label         {float: right; margin-top: 15px; margin-right: 10px}
#head input         {float: right; margin-top: 15px; background-color: ivory}



#main                {float: left; margin-left: 20px; z-index: 1; width: 600px;
                      background-color: white}

#firstp              {margin-top: 0px}
#firstp:first-line   {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
                      line-height: 0.8; margin: 0px 5px 0px 0px}


#linkList            {width: 225px; background: rgb(0, 14, 238);
                      float: left} 
#linkList ul         {list-style: none; margin: 0px; padding: 0px}

#linkList a          {font: bold 11px/16px arial, helvetica, sans-serif;
                      display: block; border-width: 1px; border-style: solid;
                      border-color: #ccc #888 #555 #bbb; margin: 0px;
                      padding: 2px 3px}
#linkList a          {color: black; background-color: rgb(172, 172, 172);
                      text-decoration: none}
#linkList a:hover    {color: white; background: rgb(0, 0, 255)}

#linkList li         {position: relative} 

#linkList ul ul ul   {position: absolute; display: none;
                      top: 0px; left: 100%; width: 100%}

#linkList .arrow     {position: absolute; left: 210px; border-width: 0px}

#linkList .newGroup  {border-top: 1px solid red; z-index: 2}

#linkList .slideMenu > a {z-index: 2; position: relative}

Hi, can someone help me? I am trying to create a slide show which I learn from the JavaScript Tutorials - How to create a basic slide show. It work fine with 1 slide show but when I put 2 slide show in a web page (created 2 set of script), only 1 will work, what do I have to add in order for multiple slide show to work in a page? Below is the script, thank you.

<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width="100" height="56" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

My slide show seem to not be initializing I used a base from webmonkey.com and tweaked it around to be exactly what I need and it won't start. Any ideas with whats wrong?
here is my js
Code:

var interval = 1500; //1.5 secs
 var random_display = 0; //goes in order
 //defines where the images are stored
 var imageDir = "../image/slideshow1/";
 
 //set images here
 var imageNum = 0;
 imageArray = new Array();
 imageArray[imageNum++] = new imageItem(imageDir + "01.jpg"); 
 imageArray[imageNum++] = new imageItem(imagedir + "02.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "03.jpg");
 imageArray[imageNum++] = new imageItem(imagedir + "04.jpg");
 
 //find total amount of images using .length
 var totalImages = imageArray.length;
 
function imageItem(image_location){
	this.image_item = new Image();
	this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
	return(imageObj.image_item.src)
}

//This is used if random is set to 1
function randNum(x, y){
	var range = y - x + 1;
	return Math.floor(Math.random() * range) + x;
}

//get next image
function getNextImage(){
	if(random_display){
		imageNum = randNum(0, totalImages-1);
	} else{
		imageNum = (imageNum+1) % totalImages;
	}
	//return the value now.
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function getPrevImage() {
	imageNum = (imageNum-1) % totalImages;
	var new_image = get_ImageItemLocation(imageArray[imageNum]);
	return (new_image);
}

function prevImage(place) {
	var new_image = getPrevImage();
	document[place].src = new_image;
}

//function to switch images
function switchImage(place){
	var new_image = getNextImage();
	document[place].src = new_image;
	var recur_call = "switchImage('"+place+"')";
	timerID = setTimeout(recur_call, interval);
}

Here is the html with buttons to control the slideshow
Code:

<div id = "articles">
    	<div class= "new_article">
    		<img name="slideImg" src="image/slideshow1/01.jpg" style = "width:400px; height:200px;" border=0>
			<a href="#" onClick="switchImage('slideImg')">play slide show</a>
			<a href="#" onClick="clearTimeout(timerID)"> pause</a>
			<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
			<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>
    	</div>
	</div>

I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml
But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this?
thanks!!

Hi,

I need some help with getting the browser to automatically scroll to the top when the user slides horizontally. It's probably easier for you to see what I mean! http://www.zabirvalliji.co.uk This is my website (still a working progress!!). If you click the links you will see the website scrollings horizontally. If you scroll to the bottom of 'portfolio', and then click another section, you will see that the browser stays at the bottom. Basically, I want the browser to automatically slide to the top whenever the user goes to another section.

Is anyone able to help me?