I'm working on some jquery code using the scrollTop method to implement an infinite scroll (please, don't suggest jQuery plugins, I know they exist) and I don't quite understand what this value means.
Given this fiddle: https://jsfiddle.net/ve8s5fdx/
<div id="outter">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div id="scroll"></div>
#outter {
height: 100px;
width: 100%;
overflow-y:auto;
}
.inner {
height: 150px;
width: 50%;
border: dashed black 2px;
background-color: grey;
}
It makes sense that the value is 0 when the scrollbar is at the very top of the element, but why "208" when it's at the bottom ? The #outter div is 100px high, its content a bit more than 300px.
What #Rory McCrossan said.
If you scrolled down 100px, the .scrollTop will display 100.
The scrollTop will measure the space between the window and the element. So it doesn't matter how high your element is, it will always be the space above it that counts.
Since your .inner is missing the css-rule box-sizing: border-box; the border will be added outside the div, and it's 2px wide. Which in your case means that every .inner element is 154px high. You have 2 of those, so the content of .outer is 308px.
Your .outer-element is 100px high so 100px will always be visible. So when your window is scrolled to the very bottom, the scrollTop displays 308px - 100px = 208px.
If you change your .outer to the height of 50px, the scrollTop will display 258px when scrolled to the bottom.
$.scrollTop:
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.
Inspecting your fiddle, you can see that your two .inners have a combined height of 308 px. Your outer (scrolling) div is 100 px tall.
So your .scrollTop(), the number of pixels that are hidden from view above the scrollable area is total inner height - visible height, or 208 px.
Related
working demo with strange behavior: http://crawfordcomputing.com/AkadineWebOS/#/
If you grab the right div-window border and resize horizontally, It goes wonky vertically. Same for all the windows you can open with the icons. Everything is draggable too, and Jetris works. (check link for info)
This is an Angular single page app. My div-window is defined:
<div ng-repeat="pane in panes">
<div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
<div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
<span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
</div>
<div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
</div>
</div>
So the window div id="{{pane.windID}}" has two children, a title bar and a content pane. So when resizing the window I tried asloResize the content pane. That was weird since it did not account for the titlebar. So I did this: (all variables are defined previously if not defined in the function)
objParent.resizable({
handles: "n, e, s, w",
minWidth: 250,
minHeight: fullHeight,
//fullHeight is parents height, don't wanna colapse one liners
//titlebar (child0) resizes just fine due to floating
//child0 size bugs alsoResize child1, let's also it manually
resize: function (event, ui){
//subtact title height from parents height
contentHeight = objParent.innerHeight() - objChild[0].innerHeight();
//width is fine
contentWidth = objParent.innerWidth();
objChild[1].css({'width':contentWidth, 'height':contentHeight});
}
});
Now see, when resizing, I aslo want to asloResize just the content pane, not the title bar. So I am trying to set the content pane's size manually, width is fine, but content pane height equals parents height minus the title bars height.
The problem is that if you resize horizontally first, the vertical goes wonky. Once you grab the bottom and resize vertically the bug goes away, you can then resize however you want perfectly without problems. It only happens if you resize horizontally first.
Why does this happen? I doubt the bug is actually in the draggable resize function because you can stop the bug by resizing vertically first, and then it works perfect. This happens on all browsers.
Does anyone have a clue?
The div with id window100-obj951 does not have a css height set initially. The contained div with compile="pane.content" does not either.
Resizing vertically changes the css height property of both these divs.
Resizing horizontally changes the width of both, but the height only of the contained div.
The containing div has overflow:hidden, so if its height is set, the height of the contained div is not significant. Hence, having the height of the containing div set masks the fact that the height of the contained div is actually being changed to be wonky.
[All this can be seen using Firebug and inspecting the element while resizing]
How should i set a div's height to be what's left of the viewport from its start minus 20 pixels? Parent DIV is 100% of the viewport, and i need the child to expand until the parent's end.
Parent div's jquery:
$(document).ready(function(){
windowHeight = $(window).height() - 0;
$('.slide').css('min-height', windowHeight);
});
If I understand your question correctly, you have a parent div with a 100% height, and inside it you have something that's 20px high and then something that should stretch to the bottom? (Please be clear in your question, or include a code example as a jsfiddle and/or a screenshot).
Look at this simple example
<div class="wrapper">
<div class="header">
Heading
</div>
<div class="strecth">
Stretching content
</div>
</div>
The styles to achieve what I think you mean:
.wrapper {
height: 100%;
}
.header {
height: 20px;
}
.stretch {
height: 100%;
padding-top: 20px;
margin-top: -20px;
}
The padding of 20px is rendered as part of the 100%, so effectively the contents of your .stretch will be 100% - 20px high (which is what you want), but there is an offset of 20px (the padding) that pushes it down. Then I use the negative margin to undo the offset by pulling the div back up 20px. The effect is that the visible contents are exactly 100% - 20px of height, which is what you wanted.
See the live code (I added some colors for emphasis, and had to set some extra height to body and html because jsFiddle will not do that automatically, you should not need that):
]http://jsfiddle.net/48aET/
I am trying to create a fixed div in the middle of a page that is scrollable, but I'm not able to get the div to scale to the page size properly. It's set to take 70% of the page (AKA, stopping around 20px from the bottom of the browser) but when you make the height of the browser less, it doesn't seem to react properly.
I can't seem to figure out why this is, suspect it's related to fixed positioning a div and then attempting to use a percentage height but I am sure there is a way around it.
To see what I mean, there is an example website here for this. Drag the window up from the bottom and eventually the div does not resize anymore. :(
The CSS for the div is:
.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}
And the structure of the HTML is:
<div class="container">
<div class="container">
[This is the fixed width box I want to size]
</div>
</div>
One idea I had was to use javascript to determine the height of the browser dynamically and set the fixed with to a specific pixel height but I doubt that's the best way to solve this.
Your page is calculating the height of the .singlepost div correctly. It is always 70% and it is adjusting when the page height gets smaller.
The problem is the .singlepost div sits after some content that is a fixed height. So when the content above the .singlepost div is greater than 30% of the page height, the .singlepost div does not exceed the bottom of the page. But when you make the page height smaller, the top content gets less than 30% of the page, and at that point the bottom of the .singlepost div will drop under the bottom of the page.
Rather than setting the height, you can set the top and bottom:
CSS
.singlepost {
position: fixed;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
top: 270px;
bottom: 20px;
}
This assumes that your top content is 270px high.
Outline position becomes wrong if I applay resizable function on a div.
The ui-resizable-handle-s (shown gray in demo) expands the outline (red) though their positions are set to absolute.
How can I fix it? The problem appears only in FF.
Take a look at the demo.
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100 % ;
bottom: -5px;
left: 0;
}
This css rule binds the ui-resizable-s size to its parent size.
width:100%
bottom:-5px;
left:0;
These 3 mean:
Have the full width of the parent
Top edge stays 5px bellow the parents bottom edge on y-axis
Left edge stay on 0 from parents left edge on x-axis
With those 3 together it will always fallow parent on resizeing and moreover they do work exactly beacause position is absolute
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.