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.
Related
I want to display div side by side. The inner div is dynamic means I am using knockout binding . so the number of inner div is unknown. I want as the number of div increases a horizontal scroll bar comes. I am using float left property. But instead it display vertically as soon as i give width to the middle div it works but the problem is i dont know the width beforehand
<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
<div data-bind="foreach:Members">
<div style="width:100px;float:left;">test</div>
</div>
</div>
<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
<div data-bind="foreach:Members" style="white-space:nowrap; overflow:auto">
<div style="width:100px;display:inline-block;">test</div>
</div>
</div>
display:inline-block makes sure more than one div can display on the same line
white-space:nowrap forces all the divs to be on one line
overflow:auto enables the scrollbar(s) if needed
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 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.
How do i make boxes similar to theses? I would like a X on the top right. Text on the left of it and the text below the image where the black area is. When i click on X it will remove these and the box on the right moves over and takes it place. How might i create this using jquery? is there some kind of GUI and container i could use to automate boxes moving when i close/delete them and etc
If you don't want any fancy animation effects with sliding and such, it's actually just a little CSS:
<style>
.itembox {float:left;}
</style>
If all the boxes' widths fit evenly into the container (say, they are each 100px and the container is 300px wide) then they will stack up next to each other until they reach the bounds of their container, and then wrap left and stack again.
<div class="itembox"> x ... </div>
<div class="itembox"> x ... </div>
<div class="itembox"> x ... </div>
Setting display:none will remove that one from the document flow and hide it, so the ones after it will collapse back. In JavaScript, on the click event for the close button, set the appropriate itembox's display to none:
$('.itembox .close').click(function() {
$(this).parent('.itembox').hide();
});
In jQuery, hide() sets display:none.
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 ..