I have a div which has like 200 lines of data (goes of the page). this div is positioned using css position:absolute.
After scrolling down, I would like to get the position of top of this div. currently it is giving me 0. which is wrong according to me as its outside the viewable screen area. it should be some negative numbers right?
No, the position is still 0, because that is where you positioned it. The top of the document is where 0 is, not the top of the current viewport. I think what you want is the window.scrollY, which will tell you how far down the page the user has scrolled from the top. The negative of this (-scrollY) will provide you the number you want.
Related
I have a scrollable DIV that has lines of information (textarea's), as DIVs,
one of top of another.
The scroll is something like 300 x 400 px, but it can have a lot of lines in it (DIV elements).
For each DIV line of information I have another small DIV that basically
lets an user click on YES / NO to delete that line of information.
I hide all of these "deletion" DIVs, but show only one of them, when
an user clicks on "delete" button for a particular line of information.
Problem comes because I position nicely the "deletion YES/NO div" above each line of information, with position:absolute. relative and fixed do not work well for me because they break the nice alignment I have in the "outer" DIV that holds all this.
For the 1st visible to the eye entries (lines of information) the "deletion" DIV for each of them looks ok (with position:absolute), but when I scroll down
the DIV, they don't show up no more. So this is the main problem.
How can I deal with this problem ?
I needed to cast my "nicely done delete DIV", which I kept position:absolute into another DIV, which had set position:relative, just that, as styling.
This way the "outer" DIV positioned relative was keeping the track with the other elements in the main scrolling DIV, and the absolute which was inside it would now position nicely on top, with margin-left, or margin-top etc.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I have an html page with a z indexed dropdown menu. I have this dropdown menu positioned absolutely.
with some given left and top values. The problem is the dropdown menu is at its place when the window is full screen but when the window is changed in size ( made lesser than the pc window the z indexed element shifts in position which makes it look awkward. I know it is due to absolute positioning.
can anybody please tell me how to fix this ? how to make the dropdown stay always in place. attached is the image.
Make sure that the containing element has 'position: relative;' set on it, the top / left values are based on the first containing element with a position set. If the containing element does not have a position set, it will try the next parent, and so on until it finally defaults to the body.
Here's an example:
http://jsfiddle.net/erinfreeman/AHWS2/
div with the id of 'one' has position relative, so the child div bases its bottom / right co-ordinates from that. the div with id of 'two' doesn't have position set so the child div goes to the next parent
This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
what I want on my site is a div that follows when you scroll, well, this is not so difficult as there are many sites that explain how to do it. But what I could not find was how I could set a start and end position.
I want the sidebar to start to float when the top of the window touches it and I want it to stop when it is at the bottom of the container, now it floats over the footer.
Thanks.
I figured it out, with jQuery I calculated the scrollTop(); and when it reached the point, for example 250px I did addClass('fixed'); to make it fixed and stay at the page.
To let it stay at the bottom at a certain point I calculated the bottom margin and when it reached the given bottom margin I did removeClass('fixed').css({position: 'absolute', bottom: '0px'}); to let it stay on the bottom of it's parent 100% height div.
I hope you understand.