Develop Reference

How to make scroll keep down, but don't want to lock

I am making Shoutbox. So I want that when it retrieves data it keep scroll down. Just like in facebook the scroll keep remains down. I am using javascript for it but goes lock, so it prevent from scroll top.
I am using this code :
document.getElementById('txtHint').scrollTop = 10000;
<div id="txtHint" style="width:700px;height:500px;overflow:auto;" >
<!-- Here data will be displayed -->
</div>
The only problem is that, it prevents me from scrolling up.

Try using the offsetTop property. I suggest putting a hidden div at the end of the div in which the text will scroll down(hidden div should alwasy be at the bottom), and then you should apply the scrollTop
document.getElementById('txtHint').scrollTop = document.getElementById('s_hidden').OffsetTop;
<div id="txtHint" style="width:700px;height:500px;overflow:auto;" >
<!-- Here data will be displayed -->
<div id="s_hidden"></div>
</div>

How to move fixed div 200px up when reaching the end of the page (when scrolling)?

I have a page with two columns(sidebars).
The left one is fixed (contains google ads) and remains nonchanged even when I scroll down the page.
The right one contains posts and is positioned relative so scrolling is ok.
However I have a footer after right column(sidebar).
This footer's width is 100% of the page.
The problem is that the footer goes to the left sidebar when I scrolled to the bottom.
I would like to move the left sidebar 200px to the top when I reach 200px from the end of the page when scrolling down.
And return back when srolling back to the top.
<div id="main">
<div id="left">Google Ads here</div>
<div id="right">Content posts here</div>
</div>
<div id="footer">
footer here
</div>

You can use jQuery scroll . most websites use this to load content for their sites.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}

You can do this using plain CSS instead of javascript.
Read this for details. A Demo here

Div scolling with scrollview plugin

I am using jquerymobile, and i want to scroll my each div individually, something like :
<div data-role="content">
<div id="1"></div>
<div id="2"></div>
</div>
Now i want that, div#1 scroll left - right & div#2 scroll top - bottom . I am using scrollview plugin but i am not able to do this. Can anybody help me out with a little example code?

I assume you are using this with the experimental jQuery Mobile scrollview.
You can set a value for the data-scroll attribute as data-scroll="y" or data-scroll="x" to set the scrolling direction as vertical or horizontal.

how to scroll 2 divs at the same time with iScroll

I have 2 divs that both uses iScroll. Now I would like both divs to scroll when one of them are scrolled.
I want them to scroll simultaneously
Is this possible?

You can use scrollTo method to scroll the second div at a specified position on scrolling any div. It takes three arugments out of which timeout is optional.
scrollTo(x, y, timeout) - scrolls to any x,y location inside the scrolling area.

Try structuring the div as follows :
<div id=wrapper>
<div id="scroller">
<div id="div1">
<div id="child1"></div>
</div>
<div id="div2">
<div id="child2"></div>
</div>
</div>
</div>
Then define iscroll for #wrapper and you get to scroll both the div simultaneously. This is the easy way.
Or you can try to get the onScroll event. Though it is not possible to exactly get on scroll position during scroll but you can still get is in on onScrollMove and onScrollEnd. Hope this helps you.

Shifting elements in a div with overflow auto

I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?

You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..