I have a DIV that pops up in a set position via a jQuery function when you mouse over an image, there are quite a few of these vertically (say 1800px in total height)
The problem is that if i go down to the bottom of the page and mousover, the div appears too far up (out of the browser).
How can i get that div to not flow off the op of the page? IE stick to the top, instead of going off>
I think you're wanting to position it relative to the view port and not the page, is that correct?
If so, you need to use position:static on your element.
Related
I'm using a "homemade" php calendar in my site's right sidebar. The site's body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here's a visual representation:
The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.
Thanks.
Edit: Sorry, I forgot to mention the way I'm making the boxes show up. It's entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They're kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.
I don't want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor's screen size.
For Javascript:
Check for the size of the document (to find the right most pixel)..
Check for the right most pixel of the box
Subtract box.right from document.right and move box left by that amount
For CSS:
Make the position of the box absolute and right: -10;
This is more a CSS / Javascript question.
First way: assign {position:absolute; right:0} to the popup div and {position:relative} to the containing div, so it will be floating to the left all the time.
Second way: use javascript / jQuery to calculate the right edge location of the popup div, modify the left if the div is going to poke out of the edge.
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
Link to site in question: http://www.christopherwarrington.com/testing_ground
I have a start screen that is set to z-index 100 to make sure it is above all other DIVs. When you click the Enter button, the Start screen slides away.
The Main DIV is set to a z-index of 50.
The problem is that when the Start screen slides away, you can read everything within the Main DIV, but can not necessarily click the links. You can see this in effect at the end of the 3rd paragraph. If you scroll the mouse over the link, the left side will not allow you to click it, but the right side does.
Now, if I change the z-index of the Main DIV to be higher than that of the Start Screen, all links are accessible, but the Start screen slides up and down behind the Main DIV, which is not useful.
I am at a loss. I do not know why when the Start screen slides out of view, why it prevents the links from working. I am sure I am missing something obvious and I appreciate any advise from an extra pair of eyes. Thank you.
The start screen div is covering up the rest of the content so that clicks that appear to be over a link are actually over the start screen, and thus do nothing. Somehow the bottom area of the start div is transparent, so it is covering those links and making them unclickable even though you can't even see it. The easiest way to fix this would probably be getting rid of that transparent part. The easiest way to fix this would be to get rid of that transparent part, which is coming from the div with id="enter_btn_wrapper". The div is currently set to have a height of 500px and a width of 300px, which makes it come down right in the middle of the page over your content. It doesn't cover everything; notice how you can still click links that are farther down the page or far to one side with no problem.
Seeing as all this div does is provide a handle for you to position the actual div with the button as its background 75px about it, you can set its height to 0px and be good to go.
I can't seem to find a way to put a bottom margin on the page. What I want to happen is the following: when you click one of the buttons and the thumbnails appear, that list should have a bottom margin so it's not stuck at the bottom of the page.
A lot of stuff is positioned with JavaScript; I don't know if that messes around with stuff.
My page: http://bit.ly/JV5I0Z
Surely there must be a way to set a bottom margin. Any ideas?
To make something that is positioned at the bottom of the page, you have two options.
1 - position: absoulte; margin-top: 600px (example)
2 - Use javascript to get the browser height and then change the margin-top to what ever it should be.
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.