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.
Related
Suppose I have the following html/css
<div class="A">
<div class="B" style="height:50px">
...
</div>
</div>
<div class="D">
...
</div>
What I want to do is: When the user scrolls far enough so that div B is off the screen (not visible), change the height of B to 0px. Essentially this means that when D is at the top of the screen, the following jQuery will run:
function changeBHeight() {
$('.B').css("height","0px");
}
The only problem is, when this happens, the page is now shorter, so the browser rapidly scrolls down the page by 50px. How can I stop this?
The user should not realize that B has collapsed unless they scroll back up to the top of the page.
I am using scrolltop to move to the bottom of the scroll:
// Auto-scroll to the bottom
$("#test_div").scrollTop($("#test_div")[0].scrollHeight);
Here is the div element:
<div class="dialog">
<div id="test_div" class="conversation">
</div>
</div>
For some reasons, the scroller is not moving to the bottom of the list. I am not sure whether anything is wrong here.
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.
I have two div elements, box_1 and box_2:
<div id="box_1" style="position:absolute;top:0;left:0;width:500px;height:500px;border:1px solid gray;z-index:2;">
</div>
<div id="box_2" onclick="alert(1);" style="position:absolute;top:0;left:0;width:300px;height:300px;background-color:red;z-index:1;">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>
Check it >>> demo
How to activate box_2 ? (do not inner #box_1,and z-index less than box_1)
activate == show alert(1) when click box_2
I don't fully understand your question. The way you've got those boxes styled, the only way to get that <div> to be clickable is to give it a "z-index" value larger than 2.
Alternatively, you could give the other <div> a "z-index" value less than 1, or hide it.
If you can't change the markup, then the only thing you can do is catch events on the top <div> and forward them to the covered-up <div>. That's pretty easy with jQuery — just add handlers to the top <div> and use ".trigger" to forward the events.
edit — like this maybe:
$('#box_1').click(function() {
$('#box_2').trigger('click');
return false;
});
Now that's going to catch events from all over the top <div>. You could check the event mouse coordinates to see whether they're inside the bottom <div> before triggering the event.
You've done the right thing except box_1 is transparent so box_2 is showing through. If you give box_1 a background color like blue you'll see it appears on the top.
<div style=";width:500px;height:500px;border:1px solid gray;z-index:2;background:blue;" id="box_1">
</div>
<div style="width:300px;height:300px;background-color:red;z-index:1;" id="box_2" onclick="alert(1);">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>
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 ..