Is it possible to (temporarily) hide the main window (vertical) scrollbar (the one on body/html) without (slightly) moving centered content?
Setting overflow: hidden on body, html hides the scrollbar but the centered content is moved half of the scrollbars width to the right when doing this. I could add padding-right: <width-of-scrollbar> but that varies, and also would move the content if there is no scrollbar to begin with.
You could position the centered piece relatively (left: 50%) and use javascript to set the position fixed in pixels afterwards. In jQuery:
$(".centered").offset({left : $(".centered").offset().left});
See it in action here: http://jsfiddle.net/willemvb/jP3PK/4/
Related
I have seen a "push-down" notice coming from the top, as in this site:
http://www.yokogawa.com
Notice that it pushes the other content down, not lays on top of it.
What I want to do seems a bit trickier but I hope possible. I would like to have an info bar push up, and not be considered part of the scrollable area.
In other words, suppose the viewport is 500px high, and the 50px info bar pushes "up". The scrollable area of the viewport would be 450px high, and the scrollbar height on the right goes from 0 to 450px.
So in effect, the scrollable viewport reduces from the bottom, and when scrolled all the way down, the bottom of the page content is right on the top of the info bar.
I'm concerned with animating it but would first like to see the CSS of such a div in position.
Add the style "position: absolute" to your "push-down".
Basically what I'm going for is what http://pinterest.com does when you click an image on the homepage.
How would one make the page unscrollable, but the new content overlayed scrollable?
You can use the css position for the container holding the initial page and set it to fixed. This plus a fixed height will get you a page that keeps position (also, be sure to set overflow: hidden).
Then the container you want on top used fixed position also but give it a margin to make it sit in the center of the page. For this one set overflow: scroll or overflow: auto
More information on positions can be found here with examples:
http://www.w3schools.com/cssref/pr_class_position.asp
I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.
When I expand one of my nodes, and the data goes down below the bottom of the window, the scrollbar appears and makes the top bar squish up a bit. Is there any way I can make the scrollbar only show in the bottom white area. Also, can I make it always show even if it's not needed, so it doesn't appear and disappear?
Give the white area a fixed height and set overflow to either auto or scroll.
I would just use a css 'min-height' on an element that can be larger than the window; body { min-height: 101%; } might do it.
I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.