We Keep Coding

jQuery - left to right animation

I am trying to do something similar this guy did here
However, I want my animation to go from left to right as opposed to right to left.
Now since all divs are actually positioned inline i have tried to specify direction: rtl on the parent div, but it still does not work. (my view remains on the left side on the page, I would like to see the rightmost div first and then when I slide the left divs they move to the right).
Thank you.
L.E: Here is the solution for those interested http://jsfiddle.net/oq4p28wg/

From moving left to right in the example referenced they add margin-left to move between slides, until reaching a maximum number of slides. In your case to move in the opposite direction you will need to start with the maximum margin-left and substract margin to move from right to left in the slides until reaching the first slide and therefore margin-left:0.

JQuery Overflowed Div, animate shifting

Not sure how to word this, so a little jsfiddle work:
http://jsfiddle.net/UwEe2/
That's the basic idea for what I need done, except that I am in need of the image to be centered (so that the very center, horizontally and vertically, of this image, appears in the little 250x250 window and is capable of being scrolled in all four directions to the edges of the image.
What I have, which would work if I would get the exact height and width of the image halved, http://jsfiddle.net/UwEe2/599/, which uses a second div inside the first with style="position:relative; top:-330px; left:-330px;", which shifts the image more to where I need it, but disallows the scrolling of the image left and up any further than the initial screen.
Hopefully this makes sense...I'm rather at a loss right now.

All you need to do is set the initial scrollTop and scrollLeft to the size of the image minus the container divided by two.
$('#container').scrollTop(($('#container img').height()-$('#container').height())/2).scrollLeft(($('#container img').width()-$('#container').width())/2);
http://jsfiddle.net/UwEe2/600/

how to scroll 1 element at a time (to block free scroll)

Scroll bar moves freely pixel by pixel which i don't need .What i need to do is a scroll bar scrolls the table 1 element right or left .Whatever i try schooling should not divide elements . Is it possible to make a scroll-bar that scrolls let say 200px at a time?

use scrollBy(xnum,ynum)
look at this
http://www.w3schools.com/jsref/met_win_scrollby.asp
update
using this : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
i was partially able to do it. it kind of works with the mouse. it might be improved.
http://jsfiddle.net/btevfik/EZpdA/

How do I set scroll top of a web page

I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.

use jQuery('html,body').scrollTop('other things here');

Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)

How to Keep a Block in Center when using jQuery Masonry

Lets assume I have 10 blocks for jQuery Masonry, each block(div) width 200px, so at 1024x768, will look like this after Masonry
[000] [111] [222] [333] [444]
[555] [666] [777] [888] [999]
So, if I change screen resolution to 640x480, it will look like this
[000] [111] [222]
[333] [444] [555]
[666] [777] [888]
[999]
If I change screen resolution to 1600x190, it will look like
[000] [111] [222] [333] [444] [555] [666] [777]
[888] [999]
What I to achieve is: to make the first block([000]) always positioned in the center of the screen.
How?

PRTFM: "Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall". You can not fix one Masonry element in the center of a browser's window with all other elements arranging fluidly around it - you can have a fixed element top right or top left, called a "corner stamp".

you need to use:
$('.container').css('width','1024px');
$('.container').css('height','768px');
or
$('.container').css('width','640px');
$('.container').css('height','480px');
or
$('.container').css('width','1600px');
$('.container').css('height','190px');
to change the area of the boxes then the boxes will appears like what you want.