I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}
Related
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):
#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
*html #sticky {
position: absolute;
bottom: 0px;
}
<div id="sticky">
Built by Me
</div>
Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?
Dave
Keep the fixed div.
And have the following javascript code which will take care of horizontal moving.
$(window).scroll(function(){
$('.fixed_div').css('left',-$(window).scrollLeft());
});
I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}
I want to show some dialog (absolute positioned div), and I want to show it above semitransparent 100% div, so everything on background will be dimmed.
I have managed it by
<div class='transpBox'></div>
.transparentBox
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #white;
opacity: 0.9;
z-index: 499;
}
This is all right, but when dialog height is more than browser height and you scroll down, you see that transparent div is not in full screen.
What is proper way to make such thing?
Instead of position: absolute, use position: fixed. (Use it with your dialog div too.)
absolute positions based on the page, fixed positions based on the window.
maybe you should try jquery modal dialogs. Rather than creating your own process in doing it. DOing so will give you the semitransparent background and a dialog foreground.