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.
Related
I have three divs: left, midle and right. Middle is for the contents, while the left div and the rightdiv is used only for a button that will scroll the middle div. The content of the middle div is going to be lists of pictures. So, if the user want to see the pictures that is still hidden in the right side of the middle div, they can click the right div to scroll it to the the right.
I hope my question can be understood.
This script is not working for my divs. I think anyone here can give me another script that can control those divs.
Here is only the script that I cannot use
$(document).ready(function () {
$("#left").click(function () {
var leftPos = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
});
$("#right").click(function () {
var leftPos2 = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
});
});
FIDDLE:
Scroll Left to Right with Button
Thanks in Advance
It looks like your script is accurate. I think the problem you're running into is two-fold:
You must have a width set on the container div
Your content in the middle div must exceed the current width of the div, otherwise jQuery won't scroll it
Here's a DEMO
.DivDataMain {
width:100%;
overflow:hidden;
display:block;
background:#000;
height:400px;
margin:auto;
position: relative;
}
You could just float and fix your right colomn to the right side with absolute layout.
And let the browser scroll right to left natively. Just margin pad the outer content to the same width as the right column div the same width as the right div. That way when they scroll all the way to the right the right div isn't hiding the remaining content.
as John says script is fine ... you might consider using slide in whole 's rather than animating the div by 250px ... that limits your choices of picture later ... try this https://github.com/eamonnkillian/Slide-in-Frames
I want to get the position of the scroll bar (not the scrolltop position) but all I see is only $(document).scrollTop(). Can someone help me with this. For my understanding, the $(document).scrollTop() gives the top most visible position of the window, but I want the exact position where user's scroll bar slider is.
EDIT: I have added more explanation. I need to get the position of the scroll bar itself so as I can put some div (as the one with arrow in the image) follow the scroll bar.
As per your requirement, I thought you need to maintain the arrow button always in the center of the page. If this is your need means, you can apply the fixed position for the arrow div, like below:
.arrow {
position: fixed;
top: 50%;
}
So that, the arrow element always maintained in the page center position even the page scrolls.
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/
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.