We Keep Coding

Apple timeline style scrolling on mouseover

I would like to build a slider like Apple did: http://www.apple.com/30-years/
I have no idea how to scroll on mouseover like on the link above. I know I have to decrease the translateX value by X, but what is X? :)
// scroll animation
function scrollAnimation(){
$('ul').css({
'transform' : 'translateX(-' +mouseX+ 'px)'
});
scrollAnimation();
}
I would like to scroll the images continuosly, with a speed what depends from the mouse's position.
Here is my full code: http://jsfiddle.net/M8cnV/light/
I'm new here, so I appreciate any comments about my code.

Here's what I came up with:
http://jsfiddle.net/5nTpS/
I added some new variables to keep track of how far from the left or right edge the cursor is, which direction to scroll and how fast to scroll:
var scrollSpeed = 0;
var hotEdgeWidth = 200;
var animationSign = "-";
And modified your mousemove function so that it works out if the cursor is close enough to the left or right of the container that you want the images to scroll, which direction you want them to scroll in, and how fast you want them to scroll:
$(container).mousemove(function(e) {
if(e.pageX > $(this).width() - hotEdgeWidth){
scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX);
animationSign = "-";
}
else if(e.pageX < hotEdgeWidth){
scrollSpeed = hotEdgeWidth - e.pageX;
animationSign = "+";
}
else{
scrollSpeed = 0;
}
scrollAnimation();
}).mouseout(function(e){
scrollSpeed = 0;
});
Then, change scrollAnimation to use the .animate function, and add a complete function to call the scrollAnimation function again once the animation has finished. It only animates if no animation is already happening to prevent a feedback loop happening:
function scrollAnimation(){
if (!$('li').is(':animated')){
$( "li" ).animate({
"left": animationSign + "="+scrollSpeed+"px"
},
500,
function(){
scrollAnimation();
});
}
}

Prepending content

What is the best way to repeat the content in this slideshow, so when you click .left and the carousal starts moving, you get a neverending loop? At the moment, if you click .left, the carousal starts moving and leaves behind empty space.
http://jsfiddle.net/tmyie/mZRQx/1/
var loop;
var moveRight = function(){
$('.box').animate({left: '-=10'}, 100);
};
var moveLeft = function(){
$('.box').animate({left: '+=10'}, 100);
};
$('.right').mousedown(function(){
loop = setInterval(moveRight, 200);
}).mouseup(function(){
clearInterval(loop);
});
$('.left').mousedown(function(){
loop = setInterval(moveLeft, 200);
}).mouseup(function(){
clearInterval(loop);
});
Any help would be great.

Here's a demo for your 'left' movement (though I think you got directions confused):
var moveLeft = function(){
$('.box').animate({left: '+=10'}, 100, function(){
var $last = $('.box').last();
if ($last.css('left') == '100px') {
$last.prependTo('.container').before('\n\r');
$('.box').css('left','0px');
}
});
};
It checks whether elements shifted by 100px and if so - moves the last element before first. Note I am also adding CrLf there to keep original formatting and distance between the DIVs (remove it if u don't need it).
"Left" Demo: http://jsfiddle.net/mZRQx/3/

How to Stop a Navigation Button From Being Pressed Until Animation is Completed?

I'm an idiot, so here it goes...
The problem:
I'm using a slideshow type navigation system for looking through products. All is well and good until the next/previous arrows are clicked more than once before the animation has finished. Clicking it more than once causes the thing to completely bug out and sends the divs into an irreversible horizontal spiral through Hell. I was wondering if there were a way to stop the user from clicking the next/previous arrows more than once so that the slideshow navigation doesn't whack out.
The code:
var SlideWidth = 305;
var SlideSpeed = 1000;
$(document).ready(function () {
// set the prev and next buttons display
SetNavigationDisplay();
});
function CurrentMargin() {
// get current margin of slider
var currentMargin = $("#slider-wrapper").css("margin-left");
// first page load, margin will be auto, we need to change this to 0
if (currentMargin == "auto") {
currentMargin = 0;
}
// return the current margin to the function as an integer
return parseInt(currentMargin);
}
function SetNavigationDisplay() {
// get current margin
var currentMargin = CurrentMargin();
// if current margin is at 0, then we are at the beginning, hide previous
if (currentMargin == 0) {
$("#PreviousButton").hide();
}
else {
$("#PreviousButton").show();
}
// get wrapper width
var wrapperWidth = $("#slider-wrapper").width();
// turn current margin into postive number and calculate if we are at last slide, if so, hide next button
if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
$("#NextButton").hide();
}
else {
$("#NextButton").show();
}
}
function NextSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() - SlideWidth;
// slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { SetNavigationDisplay() });
}
function PreviousSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() + SlideWidth;
// slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { SetNavigationDisplay() });
}
And the navigation buttons:
<img src="IMGS/arrow2.png"><img src="IMGS/arrow.png">
Any help = sex worship from me.
Thank you!

Set a flag called animating that you set to true when the animation starts and false in the animation end callback function. Then just test the state of the flag to determine whether you trigger the next/prev logic.
var animating = false;
// ...SNIP...
function NextSlide() {
if (!animating) {
animating = true;
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() - SlideWidth;
// slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { animating = false; SetNavigationDisplay() });
}
}
function PreviousSlide() {
if (!animating) {
animating = true;
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() + SlideWidth;
// slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { animating = false; SetNavigationDisplay() });
}
}

Have a variable defined as var animationFinished = "no"; and once complete, let it be animationFinished = yes;. Then have a conditional saying if (animationFinished == "yes") for once the click process is done.
It's better to make it a boolean variable, so that it's bool animationFinished = false; or true
Or the proper way to do it is.
$("#PreviousButton").click({
$("#PreviousButton").fadeOut(300);
$("#slider-wrapper").animate({
marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic',
), 5000, function() {
// Animation complete.
SetNavigationDisplay();
$("#PreviousButton").fadeIn(300);
};
});
A better way to do it, is to use the .addClass and .removeClass function, and have conditionals for that.
jQuery I don't think has a function to check if every animation have finished. You just have to use the callback that the .animate function has, by what's inside the subsequent function(){ } braces.

Two elements of javascript are clashing in Internet Explorer

There are two elements on this page that have Javascript attached. The donate box on the left, and the image slider in the centre. The image slider just rolls round on a time delay while the donate box changes its left-position on hover, then returns when hover is released. This works OK in FF and Chrome.
In IE there seems to be some sort of clash between the two elements. As soon as I run the hover command the slider stops working. The hover also only works once, and needs a page refresh before it'll run again.
Is there any way to fix this?
This is the code for the image slider:
<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}, {
duration: 2000,
easing: 'easeInOutQuad'
})
}
//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>
and this is for the donate box:
$(document).ready(function() {
$('#donatebox').hover(function() {
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
});
});
It's beyond me so I've worked round it another way that doesn't need parsing (which I really don't understand...)
$(document).ready(function() {
$('#donatebox').mouseenter(
function() {
$('#donatebox').animate({"marginLeft": -5}, 1000, "easeOutBounce");
});
});
$(document).ready(function() {
$("#donatebox").mouseleave (
function() {
$(this).animate({"marginLeft": -5}, 20).animate({"marginLeft": -305}, 700, "easeOutQuad");
});
});

Something's causing a Javascript error in your jQuery "easing" plugin, when the div has eased back into its slot. This is why no scripts are running after you use the Donate box once.
If you use Developer Tools in IE, you'll find that the error is caught. Then (although the animation is decoupled so you can't just go up the callstack) it is deducible that the issue is in the animation that you instigate from your custom.js:
$('#donatebox').animate({
'left': parseInt($(this).css('left'),10) == 295 ?
$(this).animate({'left': '0px'}, 1000,'easeOutQuad') :
295
});
^ Doesn't look right to me.
You also have duplicate HTML node IDs overimage. IDs are unique; perhaps you meant to use classes?

Maybe it help you.
Ticket on jQuery Bug Tracker

This is caused by Invalid Argument exception on Line: 8538 of jquery-latest.js

Jquery calculate position of div after animation

Hey i have a div moving via a jquery animation and i am trying to calculate that divs position. The position is calculated on click but then the position before the animation is calculated and not after the animation.
Sooo basically how would i go about having the animation happen and then have the position calculated and make the appropriate buttons hidden?
Here is a example of what i have thus far. It is practically there except for the var galleryItemLeft being calculated before the animation completes. http://www.ehbeat.com/test/
<script type="text/javascript">
$(document).ready(function(){
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();
$('.MoveRight').hide();
$(".MoveRight").click(function(){
$(".GalleryItem").animate({"left": "+=100px"}, "slow");
$(".GalleryItem2").animate({"left": "+=140px"}, "slow");
});
$(".MoveLeft").click(function(){
$(".GalleryItem").animate({"left": "-=100px"}, "slow");
$(".GalleryItem2").animate({"left": "-=140px"}, "slow");
});
$(".Controls").live("click", function() {
position = $(".GalleryItem").position();
galleryItemLeft = position.left;
if(galleryItemLeft >= "0") {
$('.MoveRight').hide();}
else{
$('.MoveRight').show();
}
if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();}
else{
$('.MoveLeft').show();
}
});
});
</script>

.animate() allows you to have a callback function once the animation is complete.
eg.
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete. do stuff here
});
});
to find the position of a div, just do:
var leftPos = $('#mydiv').css('left');