We Keep Coding

Sticky navigation bar doesn't work properly

I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.

Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.

Elements refuse to move - jQuery .css

Here I have an odd problem. I'm building a simple helicopter game (the old type - click to go up, avoid obstacles). My problem is that the obstacles generate, but don't position correctly, and then they won't move. I'm trying to move them with jQuery's css() - the css method works fine on anything else but when used with top and left doesn't.
The problem functions (generate and move obstacles):
game.background.generateObs = function() {
var top = Math.floor(Math.random()*game.canvas.height);
var left = game.canvas.width-10;
var $obs = $("<div></div>")
$obs.addClass("obs").appendTo("#canvas");
$obs.css({
background: "black",
position: "absolute",
height: game.obstacle.height,
width: game.obstacle.width,
});
$obs.css("top", $("#canvas").offset().top + top )
.css("left",$("#canvas").offset().left + left);
game.obstacle.width = Math.floor(Math.random()*200);
if(game.gameState=="running") {
setTimeout("game.background.generateObs()",obsInterval);
}
else {
return;
}
}
game.background.moveObs = function() {
var currentPos = $("#canvas div.obs").css("left");
var newPos = currentPos - game.obstacle.frameWidth;
$("#canvas div.obs").css("left",newPos);
if(game.gameState=="running") {
setTimeout("game.background.moveObs()",interval);
}
else {
return;
}
}
The other thing is that jsFiddle is now telling me that game is undefined, when I have defined it right at the start.
Can anyone tell me what I'm doing wrong? Here's the fiddle.

$("#canvas div.obs").css("left") is returning auto in your fiddle, not a number.
Try using .offset().left instead.
Additionally, you should change your setTimeout calls like this:
setTimeout(game.background.moveObs,interval);

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

Js animate right and bottom

Hello I am having some difficulties animating right and bottom. I got the animate left code, but I am not able to animate right using javascript. Here is the code:
var right = $('#coolDiv').offset().right;
$("#coolDiv").css({right:right}).animate({"right":"0px"}, "slow");
Here is a link to jsfiddle:
http://jsfiddle.net/XqqtN/
http://jsfiddle.net/XqqtN/4006/
How can I animate right = 0 and bottom = 0?

The problem is that offset method return an object only with left and top properties.
So $('#coolDiv').offset().right is undefined.

Get the width of #cooldiv and it's parent, subtract the width of #cooldiv from its' parent width can do work for you. Something like this.
var parentTag = $('#coolDiv').parent().outerWidth();
var coolDiv = $('#coolDiv').outerWidth();
var res = (parentTag - coolDiv) + "px" ;
$("#coolDiv").animate({"left":res}, "slow");
Demo

Try This My Working code right to left div using click event
$(function(){
var c=0;
$("#coolDiv").click(function()
{
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});

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/