JavaScript - Glitchy Slide Out Menu

Hi there,

I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
I looked over you FAQ section but I can't seem to figure it out.
Any help would be hugely appreciated.
Thank you so much.

HTML:
Quote:

<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>

<script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li>
<div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
</li>
<li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
<li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
<li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
<li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
<li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
<li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
<li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>


</ul>

</div>

<script type="text/javascript" src="navigation.js"></script>

<div id="footer">
<!-- Site navigation menu - footer -->
<div id="navcontainer_footer">
<ul>


<li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
<li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
<li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
</ul>

</div>

<script type="text/javascript" src="navigation_bottom.js"></script>
</div>
</div>
<!-- End Wrapper -->







slideshow.js

Quote:
var pause = 3000; // interval, in milliseconds, between transitions
var i = 0; // image counter
var pic = document.getElementById("pic"); // the <img> element in the HTML file

// define an array of images
var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

// preload the images
for (var j = 0; j < imgs.length; j++)
{
var obj = new Image();
obj.src = imgs[j];
}

// rotates between the images in the "imgs" array
function rotate()
{
pic.src = imgs[i];
if (i === (imgs.length -1))
{
i = 0;
}
else
{
i++;
}

setTimeout("rotate()", pause);
}

window.onload = rotate;



navigation_bottom.js
Quote:
// define an array of images
var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");


// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer_footer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;



navigation.js

Quote:
// define an array of images
var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;

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;
}

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

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! :-)

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?

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 there. I want to slide in (jquery) a link in the bottom right when the page loads that offers the user to be pushed back to the top of the page.

So far all is well. I have it appearing at width 1024 or bigger. With a media query set in order for it not to appear for smaller devices:

#totop {
position: fixed;
bottom: 0;
right: 10px;
background: #FFF;
color: #000;
padding: 10px;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
display:block;
-moz-box-shadow: 10px 10px 5px #000;
-webkit-box-shadow: 10px 10px 5px #000;
box-shadow: 10px 10px 5px #000;

}



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

#totop {
display: none; /* Remove to top button */
}


Now I understand I want an if statement checking whether the css is to display block or none. Or if this doesn't work have an if statement checking the screen width itself rather than media queries.

So far I have this:

$(document).ready(function() {
if( $('#totop').is(':visible') ) {
("#totop").slideDown("slow");
} else {
("#totop").hide();
}
});

Please help!

Hi everyone,

I'm new in this forum, and hope that someone can help me out.

I have created a clickable slide show and it works like it should.
At the moment the pictures are changing like a .gif file.
How can I do that each picture when it's changing it should slide from the left or right side?

Thanks
Robert

I'm trying to create a menu navigation system from the top of the page.
I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field.

I've gotten it to work, somehow but it still isn't right.
A few issues a

- when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how.

- The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind?

- Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something.

ANY help is appreciated, thanks!

Code:

<html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function(){

        function slide() {
        $("#panel").slideToggle("slow");
        }

        $(".drop_slide").hover(slide, stop);
        $("#panel").hover(stop, slide);
         
});
</script>

<style type="text/css">
body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
        outline: none;
}
#panel {
        background: grey;
        height: 200px;
        display: none;
}
.slide {
        margin: 0;
        padding: 0;
        background-color: red;
}
.drop_games {
        width: 200px;
        height: 31px;
        padding: 10px 10px 0 0;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
}
</style>
</head>

<body>

<div id="panel">
additional links here...or information
</div>

<p class="slide"><a href="#" class="drop_slide">test link</a></p>


</body>
</html>

The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is
create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this???



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img {display: block;
margin-left: auto;
margin-right: auto; }




</style>
</head>

<body>



<img id="shown" src="/tools/hoe.jpg" alt="hoe">


<script>
function imageView(saw)
{
document.getElementById("shown").src="/tools/"+saw+".jpg";
}
imageView('saw');
</script>





<p><input type="button" value="Saw" onclick="imageView('saw')">
</p>
<p><input type="button" value="Hoe" onclick="imageView('hoe')">
</p>

<p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')">
</p>


</body>
</html>

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>