Develop Reference

Scroll HTML table horizontally using JS

How would I go about scrolling HTML table horizontally to a specified column using JS, I have overflow: scroll; on my table and I want to know if I could do something like:
myTable.scrollToColumn(column_ID_or_something_here);

You can use scrollIntoView
document.getElementById("column_ID_or_something_here").scrollIntoView(true);
If scrollIntoView somehow breaks DOM, use focus() method. Key point here if element don't have tabindex first you need add it.
In your case table column probably don't have tabindex, code will be:
element.setAttribute('tabindex', '999');
element.focus();
If you need this for Selenium here code (Java):
((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('tabindex', '999'); arguments[0].focus();", seleniumElement);

first of all, take any one element from that column using document.getElementsByClassName("class_name")[n].
Applying getBoundingClientRect() method will give you that elements' left and right properties with respect to their position on screen as follows,
document.getElementsByClassName("class_name")[n].getBoundingClientRect().left
document.getElementsByClassName("class_name")[n].getBoundingClientRect().right
if left is negative then you'll have to scroll on right or else you'll have to scroll on left.
table_Element.scrollBy (x, y) will help you to scroll the table.
Put y as 0 as you dont want to scroll vertically and put x as -1 * (value of left).

Scrolling in DropDownlist customize

im using this DropDownList for searching item and i have a problem my problem is how can i scrolling in this DropDownList with up and down in Keyboard?
JSfiddle

EDIT: Since my first solution wasn't working properly when more items were added i adjusted it a little. Here's the fiddle
What i did:
First of all, i checked the position of the storeTarget and #search_results and logged it into the console to figure out what was causing the problem.
(This is something you could've done by yourself btw...)
What i found out then was, that, after a couple of items, the top position of the storeTargetitem was higher than the visible area of the #search_results.
so i changed the parameter of
$("#search_results").scrollTop(storeTarget.offset().top);
to scroll a little further than the current position and to make it smoother changed the check in the if-clause:
if(storeTarget.offset().top>220){
$("#search_results").scrollTop($("#search_results").scrollTop()+40);
console.log(storeTarget.offset().top);
console.log($("#search_results").scrollTop());
}
I didn't check for the case when the user goes up, that's left up to you to figure out.
here's a working fiddle based on your code
END EDIT
What i did:
when moving up or down with the keys i check if the offset().top value of the storeTarget is greater or lesser than 200 (you may change that depending on the size of your list) and if so, we scroll the top of #search-results to the
top of your storeTarget :
if(storeTarget.offset().top>200){
$("#search_results").scrollTop(storeTarget.offset().top);
}

Scrolling layout - like facebook or google plus right sidebar

Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.

Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.

The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo

You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.

Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.

UI/DOM Sorting with jQuery

So, I have scoured the internet to find help on this...
I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.
So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?
I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!
Thank you!

You're right, you can't animate elements by sorting.
The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.
Then you have something that, when changed in the right way, will give an animated effect.
All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.
Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :
$(".bars").each(function(i, bar) {
var $bar = $(bar);
var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
var height = ........;//expression that calculates or fetches the new height property for bar i
$bar.animate({
'margin-left': marginLeft,
'height': height
);
})
There's no need to sort anything or to use the data attribute.

jScrollPane height refresh based on my content (not working)

I'm using the jScrollPane plug-in along with my SmartAutocomplete (https://github.com/laktek/jQuery-Smart-Auto-Complete) and i'm appending the Autocomplete results into my main containing div for jScrollPane so the user can scroll through them.
This works, but my problems is when a new set of data is appended to my jScrollPane the height (scroll area) does not update, it always stays the same height.. so items are either cut off or there is a large amount of white space at the bottom.
I've looked at the demo for their dynamic content example but can't get this to work: Demo here
Anyone have any ideas?

The property you are looking for is the autoreinitialize property. You need to call something like:
$('#idofyourcontainer').jScrollPane({ autoReinitialise: true });
when changes are being made to your container.