I have a table whith many divs above it:
<div></div>...<div></div>
<div id="tablecontent">
<table>...</table>
</div>
I want my table scroll only in screen (the bottom of table is in the bottom of windows). So I need to set height and scroll=auto for #tablecontent.
To set heigth I calculate it as:
var pos=$("#tablecontent").position().top;
var heigth=$( window ).height()-pos;
$("#tablecontent").css("height",heigth+'px');
But this is not working correctly. It is larger than I need. Can you help me calculating the right value.
On the div in your CSS you'll want to set overflow: scroll, that with the fixed height should create a scroll bar on your div when the contents are larger than the container.
Related
I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?
I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.
I have a <table> element with a lot of rows and a max-height attribute.
I need to find the real height displayed for the <tbody> element. Normally I can just take the difference between <table> height and <thead> height
var tbodyDispalyHeight = $("table").height() - $("thead").height();
This works unless horizontal content is too much and an horizontal scrollbar appears (and can't remove it because... I need it!). I should remove its height from tbodyDispalyHeight but... how can I do?
First problem: I don't really know when this bar is displayed
Second prolbem: Each browser implement scrollbar in a different way
Here is a JSBIN example to understand what I mean. Try to resize page horizontally until the scrollbar appears, there the dislayed tbody height should be lower...
Sounds like you are looking for the clientHeight.
(But this seems to be to easy.)
Have a look to MDN
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
You may try:
$("table")[0].clientHeight
Currently you have your table with overflow:auto. But you could wrap it with a DIV with "overflow:auto". Then you can simply determine if you have a horizontal scrollbar by comparing the width of your div with the width of your table.
I have been trying to implement scroll bars to scroll through the content of a canvas.
What I have done is basically create a div with overflow set to scroll for the scroll-bar, and an inner div with varying width/height according to the width/height of the content of the canvas.
When I get an onscroll event on either of the two scroll-bars, I can use scrollLeft and scrollTop properties to set how many pixels I need to shift the canvas content.
I noticed that while the vertical scroll-bar was working as intended, changing the inner width of the horizontal scroll-bar was not doing anything.
I was under the impression that something like;
<div id='outer'>
<div id='inner'>
</div>
</div>
<style>
div#outer {
width : 500px;
height : 50px;
overflow-x : scroll;
}
div#inner {
width : 20000px;
}
</style>
would create a div block of width 500px, with a horizontal scroll-bar, allowing us to scroll through the width of the inner div, 20000px.
But for some reason it does not work for a horizontal scroll-bar(example), while working perfectly for a vertical scroll-bar(example).
Why does this happen? Is this something to do with how I am using style.width for the inner div?
What can I do to get a working horizontal scroll-bar?
It works if you give a minimum height or add content to the inner element with larger width than the container.
bar.style.minHeight = '1px';
Fiddle
For the reason, my bet is that a block element with no content (0px height) is displayed similarly to a display:none element.
I wish to give my users only vertical scroll and that too up to a automatically calculated height, not up to the entire length of the page.
Is it possible to fix the limit of vertical scroll that i wish to give to users. can it be done by jQuery. ???
You can have a div with static height and overflow-y:auto
This will show the scrollbar only when the content inside the div goes beyond the static height
div
{
height:400px;
overflow-x:hidden;
overflow-y:auto;
}
I did this part by hiding the underlying div and showing it just before I need it. So, I don't need to set the vertical scroll to a particular height.
I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?
is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.