I am trying to position an element in the same way as a jQuery-UI dialog.
When a dialog is opened, it sits nicely wherever you have specified its position to be (relative to the viewport). If however you scroll the page, the dialog moves along with the rest of the page content.
How is this done with CSS?
To clarify - the element I wish to position is hidden and I show it using $("#element").show();
I want it to appear in relation to the viewport and to behave just as a dialog does (will then move as you scroll the page).
Use position:fixed; on the dialog box, then use top and left to position is where you need. This way, it will scroll with the page.
A fixed position will cause the dialog to remain in the same place on your browser's screen, even if you scroll. CSS:
position: fixed;
An absolute position will cause the dialog to stay in the same place in relation to your content, so when you scroll up it will move up with your content. CSS:
position: absolute;
Here is an example of both: http://jsfiddle.net/sRkbf/
Reading up on UI dialog, they use the UI position() plugin. I imagine that they scroll with the page when they are modal.
I have close enough to what I want by using the same. I have "alerts" for both a dialog and for the page itself. For the dialog alerts, I used position() to place the alert in the center of the dialog and the center of the viewport for page alerts. Their position is fixed, but since they are precisely placed its ok.
It would be nice to be able to display an element in relation to the viewport and then have it scroll with the page, like a mix of absolute and fixed, but I have not been able to find anybody who has done it.
Related
There may be 2 ways to do tooltips or pop-ups -- one is using JavaScript, and the other is using CSS.
The CSS method has some elegance to it, but what about the case of, if the tooltip will show below a link or button, and the tooltip will not be visible inside of the window? (because the user scrolled to such position). If using JavaScript, the tooltip can actually be shown above instead of below in such case. Can CSS achieve the same effect?
Regarding CSS depending of the layout for you popup/tool-tip.
You could consider positioning your element with position: fixed;.
You element will be positioned relative to the view-port, this means it always stays in the same place even if the window is scrolled.
Regarding the stack order of an element you could use CSS z-index Property.
For my forms that are within a modal, I've opted to use the bootstrap modal footers to display any errors related to the form. This is causing some frustrations when the errors inevitably make the footer take up more height than the footer has available. I'm fine with it needing more height, but I want it to add the height to the top and have the modal body's height reduced so the modal as a whole stays the same height. If it adds it to the bottom it ends up pushing content off the screen. The modal body accounts for content that's too "tall" and adds vertical scroll bars which is why I'm willing to give up modal-body height to accomodate the modal footer height.
I've added a link to an image of what I'm referring to. The modal footer expands to the content as expected, but adds that height to the bottom so the rest of the modal footer becomes inaccessible when its pushed off screen. I want to steal height from the body so the footer's added height gets added to the top and the modal's total height stays the same size.
I'm sure there's a simple fix I haven't found yet but I thought I'd ask while I continue to look in case someone else has already found a solution they want to share. Any help would be much appreciated. Thanks in advance.
Normally bootstrap modal uses fixed positionong. In case when content is to large scrollbars appears inside the modal.
If you want to have long modals with no scrollbars you must first change modal positioning to absolute. But if your site content is long you must add some top property value. It's because now modal is vertically positioned to whole site, not to current browser view, so % top will not work anymore.
.modal {
position: absolute;
top: 100px;
}
Now to scroll you just use browser scrollbar.
Next to get rid of modal scrollbars you add max-height: inherit to modal-body class. Now modal will get larger depending on a content without scrollbars.
.modal .modal-body {
max-height: inherit;
}
Yes this has some disadvantages. The biggest one is that if you launch modal on the bottom of the page you might not even see it because it will popup on the top of the page.
For this issue you can add js scroll top script after modal is fired.
$('#myModal').on('show', function () {
$("body").animate({
scrollTop:0
});
});
Hope that helps!
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.
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.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.