Java Script - Jquery help

[AlenD]

<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>



<script type="text/javascript">

$(document).ready(function() {







//Set Default State of each portfolio piece



$(".paging").show();



$(".paging a:first").addClass("active");







//Get size of images, how many there are, then determin the size of the image reel.



var imageWidth = $(".window").width();



var imageSum = $(".image_reel img").size();



var imageReelWidth = imageWidth * imageSum;







//Adjust the image reel to its new size



$(".image_reel").css({'width' : imageReelWidth});







//Paging + Slider Function



rotate = function(){	



	var triggerID = $active.attr("rel") - 1; //Get number of times to slide



	var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide







	$(".paging a").removeClass('active'); //Remove all active class



	$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)







	//Slider Animation



	$(".image_reel").animate({ 



		left: -image_reelPosition



	}, 600 );







}; 







//Rotation + Timing Event



rotateSwitch = function(){		



	play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds



		$active = $('.paging a.active').next();



		if ( $active.length === 0) { //If paging reaches the end...



			$active = $('.paging a:first'); //go back to first



		}



		rotate(); //Trigger the paging and slider function



	}, 6000); //Timer speed in milliseconds (3 seconds)



};







rotateSwitch(); //Run function on launch







//On Hover



$(".image_reel a").hover(function() {



	clearInterval(play); //Stop the rotation



}, function() {



	rotateSwitch(); //Resume rotation



});	







//On Click



$(".paging a").click(function() {	



	$active = $(this); //Activate the clicked paging



	//Reset Timer



	clearInterval(play); //Stop the rotation



	rotate(); //Trigger rotation immediately



	rotateSwitch(); // Resume rotation



	return false; //Prevent browser jump to link anchor



});	







});



//Image Hover



$(function() {

    $('img[data-hover]').hover(function() {

        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');

    }).each(function() {

        $('<img />').attr('src', $(this).attr('data-hover'));

    });;

});

</script>

 

Heres all of my Javascript, basically good sirs is that it just scrolls images on a time basis. It works perfectly fine, but sometimes when I leave the page and switch back to it the timer is fucked and it scrolls too fast. How do I fix this? 

[Omirion]

Can upload a test page somewhere so i can see the script in action.

Also can you remove all the white space lines please it's really irritating to read.

 

What browsers is this tested on.

Do all of them give this issue.

 

Any console msgs?

[AlenD]

Okay sorry for posting like that I was really sleepy.

 

Here is the code again:

<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){	
	var triggerID = $active.attr("rel") - 1; //Get number of times to slide
	var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
	$(".paging a").removeClass('active'); //Remove all active class
	$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

         	//Slider Animation
	$(".image_reel").animate({ 
		left: -image_reelPosition
	}, 600 );
}; 

//Rotation + Timing Event

rotateSwitch = function(){		
	play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
		$active = $('.paging a.active').next();
		if ( $active.length === 0) { //If paging reaches the end...
			$active = $('.paging a:first'); //go back to first
		}
		rotate(); //Trigger the paging and slider function
	}, 6000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
	clearInterval(play); //Stop the rotation
        }, function() {
	rotateSwitch(); //Resume rotation
});	

//On Click
$(".paging a").click(function() {	
	$active = $(this); //Activate the clicked paging
       
               //Reset Timer
               clearInterval(play); //Stop the rotation
               rotate(); //Trigger rotation immediately
              rotateSwitch(); // Resume rotation
              return false; //Prevent browser jump to link anchor
});	

});

</script>

 

Here is a sample test server:

 

http://www.skylightinfinity.com/dev/nm/nmrender/index.php

 

I have tested in IE, Firefox, and Chrome, and happens on all of them occasionally.

 

What do you mean by console messages?

[Omirion]

Firefox has a built in error console you can access it by:

WebDeveloper(tab) -> console

 

Really useful for debugging.

You should download some JS error console app on your other browsers.

 

I'll see what's up with your script... bb in q few

[Omirion]

I guess you are messing around cause it stoped working altogether.

 

I get this error now.

[04:53:49.755] GET http://www.skylightinfinity.com/dev/nm/nmrender/scripts/paging_bg2.png [HTTP/1.1 404 Not Found 250ms]

 

also theese [04:53:37.111] ReferenceError: $active is not defined

 

I think i'm closing in on the problem but i need more time. Please upload a seperrate test page with the original working code for me to explore.

 

I think it has something to do with global variables. When you ommit the var VarName it becomes global.

Your script needs global vars to wotk though so i suggest you start from there. Encapsulate your vars to your function.

Or have just one with all the needed values.

Eg:

main = {
var1:"something string",
var2:2324, // (number)
}

so on.

 

And at the begining of your script make something like.

if(main){
main = false;
}

 

If main exists, nulify it.

Then on the next line construct main again.

in your main var you should hold the setInterval values and so on. and work with those.

 

Re if you have any progress.

[Omirion]

Now it works... are messing around or is my browser buging out?

[Omirion]

i am currently refactoring your code to work in a recursive rather than a iterative way. I think the problem is there.

 

Will post it when it's done, i have to meet some deadlines today so it might be a little late.

[AlenD]

Yeah I was messing with it, pardon for the hang-ups, must be when I'm re-uploading files. I'll try your suggestions now, thanks!

[Omirion]

How's it going man, got it figured out yet.

 

Sorry i can't find the time to complete that code. I'm just swamped with projects at the moment, and the deadlines are creeping up.

 

So i have some more advice, i think i found the culprit.

One possibility is this line

rotateSwitch(); //Resume rotation
});	

 

this is in the Hover event. I suspect sometimes it swticjes to manu elements at ones, because we end the animation, the next obj is selcted, we start the animation with rotateSwitch and select the next element to the next.

I might be wrong though this is theoretical.

 

Otherwise setInterval might be the issue. Those are really buggy functions, always were.

I du suggest you rewrite your code to work recursivly with setTimeout.

It's not a whole lot diffrent than setInterval.

 

This is the structure you need to follow:

 

1:start the rotation

2:at the end of the rotation ,inside the function, you need to setTimeout(func,time) and keep the instance in a var, same as interval. func being you  rotate function, time being the number of MS delay to function start

  2a: Basicly the same as setInterval.

3:on hover clearTimeout on the stored refrence

3a on hover out start the func manualy

 

 

Good luck, sorry for not being able to help again..