We Keep Coding

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!

cant toggle slide the div left

I am having trouble sliding a div from the left side, I have done this before and it worked fine but i'm not sure this time for some reason it doesnt really slide at all.
it seems to slide a couple milimeters then appears to .show the rest of the div.
I have tried
$('#menu_area').toggle('slide', { direction: 'left' }, 1000);
and
var left = $('#menu_area').offset().left;
$("#menu_area").css({left:left}).animate({"left":"140px"}, 500, function(){
this is my link
http://2click4.com/new/place2.php?id=CoQBcQAAAGqvOgbp0tJu7kVVn9hxur12lk85dSxYZiWj_2w8aL8yzahacGeo1h9ZZ0cAn2enEK7LirrOR8KBCzDhEdmpRbzlJt8000Ufvbct6lP4VUYQkSDXHq6YdFH_w799dw4HUcIz8pimNOdnIRS3hF8DoAt6RfZn7zC-cLgVvnSH7KdrEhDN4vYCBQkmmat2HkYPJ1S6GhRxB-UeiOXywY_f5qRgL19SVKUCag

DEMO http://jsfiddle.net/BywL4/
try to animate width if oyu want sliding effet as show in above link
$(document).on('click','button',function(){
if($("#expand").css('width') == '0px') {
$("#expand").animate({"width":"500px"}, "slow");
} else {
$("#expand").animate({"width":"0px"}, "slow");
}
});

javascript, animate and fadeout together

I need to animate an image and fade it out at the same time.
The image is situated in the right of the page, I need to move it to the left and fade it out so that when it reaches the left it is totally disappeared. I tried to combine .fadeOut and .animate (see example below) but actually the image moves, stops and then fadeout. Can you help me?
<script>
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px"
}, 1500).fadeOut(1600);
});
</script>
Thank you

Change the opacity of the element. By settings this to zero, the element will fadeout to the duration of the animation.
Code:
$('#link').click(function() {
$('#image').animate({
marginLeft: '-100px',
opacity: 0
}, 1500);
});
Example: http://jsfiddle.net/QqfLL/

Set opacity of #image to 0 and try this :
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px",
opacity: 1
}, 1500);
});
You will have to check if this work correctly in IE.

How to implement jquery like slideDown() in zepto

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.
I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?
PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.
Thanks in advace!!

Demo: http://jsfiddle.net/6zkSX/5
JavaScript:
(function ($) {
$.fn.slideDown = function (duration) {
// get old position to restore it then
var position = this.css('position');
// show element if it is hidden (it is needed if display is none)
this.show();
// place it so it displays as usually but hidden
this.css({
position: 'absolute',
visibility: 'hidden'
});
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};
})(Zepto);
$(function () {
$('.slide-trigger').on('click', function () {
$('.slide').slideDown(2000);
});
});​
​

This worked for me:
https://github.com/Ilycite/zepto-slide-transition
The Zepto Slide Transition plugin add to Zepto.js the functions bellow :
slideDown();
slideUp();
slideToggle();

Speransky's answer was helpful, and I'm offering a simplified alternative for a common drop-down navigation list, and separated into slideUp and slideDown on jsfiddle: http://jsfiddle.net/kUG3U/1/
$.fn.slideDown = function (duration) {
// show element if it is hidden (it is needed if display is none)
this.show();
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};

This would work for what you need:
https://github.com/NinjaBCN/zepto-slide-transition

Mouseover event handler brings up both divs when I want only one

I am trying to do a mouseover event for one picture where when you mouseover a div comes up and animates on the picture. When I do my mouseover though, it brings up both divs for separate pictures when I only want one at a time. Here is my code. The first part is the mouseover. Second is mouseout.
$('.portfolio img').mouseover(function(){
$(this).css('cursor', 'pointer');
$(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
$("div.folio").animate({ height: '+=25px', top: '-=24px' }, 100, function() {
$("div.folio span").animate({ opacity: 1 }, 500);
});
});
});
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 800, function() {
$("div.folio span").animate({ opacity: 0 }, 500, function() {
$("div.folio").animate({ height: '-=25px', top: '+=24px' }, 100);
$("div.folio").css('top', '-9px');
});
});
});
<div class="portfolio">
<h2>The Portfolio</h2>
<p class="slideTwo">Check out some of our recent projects.</p>
<ul>
<li><img src="portfolioOne.jpg"></img><div class="folio"><span>thesite.com</span></div></li>
<li><img src="portfolioOne.jpg"></img><div class="folio"><span>mysite.com</span></div></li>
</ul>
</div>

Using jQuery's $("div.folio") will return all divs with a class of "folio". Since you are seeing this animation on both images, rather than just the one you've moused-over, I'm assuming they both have the same class on the div they want to animate. In order to only animate one, you'll need to be more specific when selecting it with jQuery. Including $(this) on the path to the div to animate usually works, but I can't tell you the exact code without the corresponding HTML.

You need to cancel the bubble up event by returning "false" from your event handler.
$('.portfolio img').mouseover(function(){
// Your logic here...
return false;
});

There are a couple of concerns that I have about this which may or may not be problematic depending on what else is going on that you haven't shown.
You're doing $(this).parent().find('img:first') inside of a jQuery onmouseover function where $(this) should already be representing the img that you care about. Did you find that was necessary for some reason?
You could be more specific in your selector. Try doing $(".portfolio>ul>li>img")
img_grayscale is only mentioned once in your markup in your question so I'm not sure how that class gets applied but I'm assuming it does.
You could just add the class portfolio (or some unique identifier) to your images directly and probably have an easier time figuring out exactly why it isn't working as you expect. Then your mouseover selector could just be $(".specialClass")
You should definitely try posting a jsfiddle.net; you could borrow any two images off the web for testing.

Managed to figure this one out. I had to basically transverse the DOM through the following code. I referenced the image and then I went to the parent then to the next element in the DOM which was my div of div.folio. Then I went to the child of that object to fade it in. I did the same thing in reverse basically on the mouseout.
$('.portfolio img').mouseover(function(){
$(this).css('cursor', 'pointer');
$(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
$(this).parent().next().animate({ height: '+=25px' }, 100, function() {
$(this).children().animate({ opacity: 1 }, 100);
});
});
});
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 800, function() {
$(this).parent().next().children().animate({ opacity: 0 }, 100, function() {
$(this).parent().animate({height: '-=25px' }, 100);
});
});
});