JavaScript - Intermittant Problem 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;

I'm making an JS accordion and I just miss the final step.
That is - say:
I click menu 1, content 1 slides down (shows up).
After that, I click menu 2, content 2 slides down but
content 1 of menu 1 just display: none (abruptly disappers) but not slides up.

For the slide up effect, I wrote a function called cutHeight().
The cutHeight function works perfectly independently but not coherent with the accordion function.
Is there anything wrong with my scripts?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

function accordion(openAccordionID){
	
	document.getElementById("content"+openAccordionID).style.display = 
	(document.getElementById("content"+openAccordionID).style.display == "none") 
	? "block" : "none" ;
	
	var sumAccordion;
	if(document.all){
		sumAccordion = document.body.getElementsByTagName("div").length/2;		
		}
	else {sumAccordion = document.getElementsByClassName("content").length;}
	
	for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){
		if(closeAccordionID == openAccordionID){continue;}
		document.getElementById("content"+closeAccordionID).style.display = "none";

		}

	addHeight(openAccordionID);
	cutHeight(closeAccordionID);
	
	}

	var h=0;
	var t;
	function addHeight(openAccordionID){
		clearInterval(t);
		document.getElementById("content"+openAccordionID).style.height = h+"px";
		h+=1;
		t = setInterval("addHeight('"+openAccordionID+"')",10);
		if(h==100){clearInterval(t);h=0;}
			}
	
	var T;
	function cutHeight(closeAccordionID){
		var h=100;
		clearInterval(T);
		document.getElementById("content"+closeAccordionID).style.height = h+"px";
		h-=1;
		T = setInterval("cutHeight('"+closeAccordionID+"')",10);
		if(h==0){clearInterval(T);}
			}

</script>
<style>
.menu {
	background-color: #6F6;
	width: 200px;
	height: 50px;}
.content {
	display: none;
	background-color: yellow;
	width: 200px;
	height:0px;
	overflow: hidden;}

</style>
</head>
<body>
<div onclick="accordion(1)" class="menu">Menu 1</div>
<div id="content1" class="content">Content 1</div>
<div onclick="accordion(2)" class="menu">Menu 2</div>
<div id="content2" class="content">Content 2</div>
<div onclick="accordion(3)" class="menu">Menu 3</div>
<div id="content3" class="content">Content 3</div>
</body>
</html>

I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again.


It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again.

Code:

var myImage = document.getElementById("mainImage");

var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];

var imageIndex=0;

What I assume is the trouble causing function:

Code:

function changeImage(){
	myImage.setAttribute("src", imageArray[imageIndex]);
	imageIndex++;
	if(imageIndex >= imageArray.length) {
		imageIndex=0;
	}
}

How the trouble function is being called:
Code:

var imgSwtch=0;

myImage.onclick= function(){
		if(imgSwtch==0){
			var intervalHandle = setInterval(changeImage,1000);
			imgSwtch=1;
			console.log("start");
		}
		else{
			clearInterval(intervalHandle);
			imgSwtch=0;
			console.log("stop");
		}
		
};

Hi guys,

I am currently stuck up on something.. check this page

http://dev.andrewfopalan.com/new_slider.html

Well for starters.. I am trying to mimic this effect..
http://www.vogue.com/

The slider on the very top..

A quick preview of what I did was.. I used this plugin.. easyslider()..

And then edited it.. since I am still learning jQuery and javascript.. so I made changes to the controls... usually the elements for design.. all I did was that..

The first problem was how to make it center like the one on the vogue.. so it was done...

Second the masking problem.. I had alot of trouble thinking how I am going to do this.. because whenever I used absolute position on masks and the controls, everything is messed up on all browser..

So my problem primarily was how to make the effect like vogue mask, so what I did was used opacity on the list... and add a class active that regains the opacity 1 on the middle part of the slider.. so that was done..

My follow up problem is whenever I am navigating through the slider.. I add the "active" class on the next item on the list.. up until there I am fine.. but when I am at almost at the end, at the 5th slider, I am not getting the active class? and after a couple of clicks on the "next".. it wont navigate through...

here's the code for the next button:

Code:

// this gets the current location of the active slider on the list..

$("a#"+options.nextId).click(function(e){	
var id= $('.active').attr('id');

//this removes the "active" class on the slider.. and then goes to the next item on the list.. and then add the class "active" to the next image slide..

$("ul li:nth-child("+(id)+")").removeClass('active').next().addClass('active');

// this is the plugin's animation to move to the next slide..
animate("next",true);

Heres' the code for the animate

Code:

function animate(dir,clicked){
    if (clickable){
clickable = false;
var ot = t;				
switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break;
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						
						$("ul",obj).animate(
							{ marginLeft: p}, 
							{ queue:false, duration:speed, complete:adjust,
							
							  }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};

heres the adjust code function

Code:

function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};

I am very still new to this jQuery thing.. but I am trying my best to learn..

Hope someone could teach me and help me on this...

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 am using chained combox in a form. in coda-slider. but (not first) in other tab chained combobox is not run (mycodes is in attachment)




my codes is in attachment

Hi everyone please i want to make a menu like the attached image
i tried to make it with many software but i did not get the same view


so can anyone help me?

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

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

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

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?

Hi there. I recently put a news ticker on my work's homepage and it works fine. The only problem is that the drop-down menus above it are appearing behind the news ticker. I tried trouble-shooting for the last couple days to no avail. I am hoping someone might be able to give me some hints or a way to resolve this. Here is a link to the beta page, and below is the newsticker javascript I used. This is my first time posting here and I'm really new to the world of scripting so please let me know if there is anything else you might need to help me crack this thing. Thanks to everyone in advance.

Code:

// Create namespace
if (at == undefined) var at = {};
if (at.bartelme == undefined) at.bartelme = {};

// Newsticker Class
at.bartelme.newsticker = Class.create();
at.bartelme.newsticker.prototype = {
	initialize: function()
	{
		// Get elements
		this.interval = 10000;
		this.container = $("newsticker");
		this.messages  = $A(this.container.getElementsByTagName("li"));
		this.number_of_messages = this.messages.length;
		if (this.number_of_messages == 0)
		{
			this.showError();
			return false;
		}
		this.current_message = 0;
		this.previous_message = null;
		// Create toggle button
		this.toggle_button = document.createElement("a");
		this.toggle_button.href = "#";
		this.toggle_button.id = "togglenewsticker";
		this.toggle_button.innerHTML = "Toggle";
		Event.observe(this.toggle_button, "click", this.toggle.bindAsEventListener(this), false);
		
		this.hideMessages();
		this.showMessage();
		// Install timer
		this.timer = setInterval(this.showMessage.bind(this), this.interval);
  	},
	showMessage: function()
	{
		Effect.Appear(this.messages[this.current_message]);
		setTimeout(this.fadeMessage.bind(this), this.interval-2000);
		if (this.current_message < this.number_of_messages-1)
		{
			this.previous_message = this.current_message;
			this.current_message = this.current_message + 1;
		} else {
			this.current_message = 0;
			this.previous_message = this.number_of_messages - 1;
		}
	},
	fadeMessage: function()
	{
		Effect.Fade(this.messages[this.previous_message]);
	},
	hideMessages: function()
	{
		this.messages.each(function(message)
		{
			Element.hide(message);
		})
	},
	toggle: function()
	{
		Effect.BlindUp(this.container, 1000);
	},
	showError: function()
	{
		if (this.container.getElementsByTagName("ul").length == 0)
		{
			this.list = document.createElement("ul");
			this.container.appendChild(this.list);
		} else {
			this.list = this.container.getElementsByTagName("ul")[0];
		}
		this.errorMessage = document.createElement("li");
		this.errorMessage.className = "error";
		this.errorMessage.innerHTML = "Could not retrieve data";
		this.list.appendChild(this.errorMessage);
	}
}

Event.observe(window, "load", function(){new at.bartelme.newsticker()}, false);