We Keep Coding

Jquery : animate navbar to top on scoll

I want to animate my navbar to animate to top: 0 on page scroll. Right now my nav is coming after slider image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() === 100) { // this refers to window
$('.navbar').animate('top': 0);
} else {
$('.navbar').animate('top': 300);
}
});
})
But this code is not working.

Jquery animate function is wrong
$('.navbar').animate({top: "0px"});
$('.navbar').animate({top: "300px"});
In css you need to have position fixed or absolute

click on a link to scroll to a particular div (jquery)

When i click a link and try to scroll to a particular div with slow animation the whole page get scrolled instead of that particular div.
I am sharing the link to the plnkr below open it in full screen mode.
http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview
for full screen loading
http://run.plnkr.co/HV426GUKePHeJPfS/
The problem is that when the content present in the right hand side panel is clicked (only recommendation and cme & Attended is to cliked) the middle-panel should be scrolled to show that particular div on the top.
Instead what's happening is the whole page is getting scrolled thus making the UI not much of use.
I have tried using the following two javascript code for showing some animation and scrolling the middle_profile div or mm div but none of them is working.
for scrolling middle_profile div
$("#bb").click(function() {
$('.middle_profile').animate({
scrollTop: $("#recommendationDiv").position().top
}, 'slow');
});
$("#bb1").click(function() {
$('.middle_profile').animate({
scrollTop: $("#CMEDiv").offset().top
}, 'slow');
});
for scrolling mm div
var scrolled = 0;
$("#bb").on("click", function() {
scrolled = scrolled - 300;
$(".mm").animate({
scrollTop: scrolled
}, 50);
});
Is there another way of doing it through jquery or some other library is to be included for smooth scrolling the page?

You just need to put inside the $(document).ready() your code, and set in your css the position: relative; top:0; to your div who will be focus.
$(document).ready(function(){
$("#bb").click(function() {
$('html,body').animate({
scrollTop: $("#recommendationDiv").offset().top
}, 'slow');
});
$("#bb1").click(function() {
$('html,body').animate({
scrollTop: $("#CMEDiv").offset().top
}, 'slow');
});
// var scrolled = 0;
// $("#bb").on("click" ,function(){
// scrolled=scrolled-300;
// $(".mm").animate({
// scrollTop: scrolled
// },50);
// });
})

Slide in from the left

This is basically my current website:
https://jsfiddle.net/s0wgnvk2/
And now I have the problem in the #About section when I click right it goes to #right section and, you can't see it in fiddle but in my webpage the transition is really smooth and I like it how it is, but I just don't know how to make it work for the left side since it is positioned left:-100%.
$(function() {
$('#About a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
I know about the fullPage.js plugin but I'd like to have my own solution and web layout even thought fullPage is probably a lot better.
I would appreciate if you could help me out
EDIT
Fiddle corrected: https://jsfiddle.net/s0wgnvk2/1/

scrollLeft denotes the scroll bar position from the left, see ref here. So it cannot be negative (the left most position is 0).
What you need might be marginLeft, try:
$('html, body').animate({ marginLeft: '100%' });
Here is a working jsfiddle example. Note that I have make the header position: fix, so that it knows where to anchor and how to width itself when the left margin of the element changes.

Use animation not scroll
see what issue you face when you use scroll https://jsfiddle.net/kevalbhatt18/s0wgnvk2/4/
And as you said in your site animation is working smoothly and not in fiddle
that is because you haven't selected jauery from droupdown which is
present in left side of fiddle editor so your animation is not working so if you see your console it will give you Uncaught ReferenceError: $ is not defined in your example https://jsfiddle.net/s0wgnvk2/
Left right animation Example: https://jsfiddle.net/kevalbhatt18/vunL9ec2/
$('#About a').bind('click', function (event) {
var $anchor = $(this);
if ($anchor.context.innerHTML === "RIGHT" ) {
$($anchor.attr('href')).stop().animate({
left: '-=100%'
}, 1000);
} else if ($anchor.context.innerHTML === "LEFT") {
$($anchor.attr('href')).stop().animate({
left: '+=100%'
}, 1000);
} else {
console.log($(this).context.offsetParent.id )
$('#'+$(this).context.offsetParent.id ).stop().animate({
left: $(this).context.offsetParent.id ==='right'?'+=100%':'-=100%'
}, 1000);
}

Scrolling on webpage with mouse location - hover on side elements

So I have this layout here .
<div class="content">
<div class="direction_left"></div>
<div class="direction_right"></div>
<div class="direction_up"></div>
<div class="direction_down"></div>
</div>
<div id="game">
<div id="pos"></div>
</div>
4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!
On mouse hover on any of the four divs inside the content will scroll the page accordingly.
Important h_amount is horizontal and v_amount is for vertical
function scroll_h() {
console.log('scrolling left and right'+h_amount);
$('#game').animate({
scrollLeft: h_amount
}, 100, 'linear',function() {
if (h_amount != '') {
scroll_h();
}
});
}
function scroll_v() {
console.log('scrolling up and down'+v_amount);
$('#game').animate({
scrollTop: v_amount
}, 100, 'linear',function() {
if (v_amount != '') {
scroll_v();
}
});
}
and then on hover I call
$('.direction_right').hover(function() {
console.log('scroll right');
h_amount = '+=50';
scroll_h();
}, function() {
h_amount = '';
});
$('.direction_up').hover(function() {
console.log('scroll up');
v_amount = '-=50';
scroll_v();
}, function() {
v_amount = '';
});
FULL fiddle here
The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!

I think I found my answer, please correct me if I am wrong!
Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both).
Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.
*
P.S. Don't really know if its actually working or "working".
*
new fiddle here
Also changed that gradient background because it made me dizzy!

Animate or scale from center

Any ideas on how to animate the width and height of a div from the top center?
Tried using effect('scale') but this is based on a show/hide so snaps back after completion.
Then tried a normal animate:
$('.box').animate({'width':200px,'height':200px,margin-left:-100px});
This works, but as there is a line of .box, I want the others to react and push to one side.

Fine Tuned
FIDDLE
$('.day').hover(function() {
if($(this).index()==0){
$(this).animate({'width':400,'height':400}, 500);
}else{
$(this).animate({'width':400,'height':400}, 500);
$(this).parent().stop().animate({'margin-left':'-100'} , 500);
}
}, function() {
$(this).animate({'width':200,'height':200}, 500);
$(this).parent().stop().animate({'margin-left':'0'}, 500);
});

Maybe like this:
$('.day').hover(function() {
$(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});
}, function() {
$(this).animate({'width':200,'height':200, 'margin': '0 10px'});
});
Fiddle: http://jsfiddle.net/dmYY3/3/ ?