I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window. I need it to remain fixed there when the page scrolls (or at least update its position). I've tried
position: fixed; bottom: 0px; left: 0px
but to no avail. I can do this easily if I want the div at the top of the screen, I just update the div top to the value of document.body.scrollTop. Any help would be greatly appreciated.
Capture the window.onresize event. In that event handler, calculate the x,y position of the div based on the scroll position and of the window. Set the top and left attributes of the div to the x,y coordinates you calculated. You will also want to position the div using the window.onload event to make sure it starts out in the correct position.
Remember to set the doctype, then it should work fine... the following example works in ie7/ie8/firefox/chrome (it will not work for ie6) and probably more browsers:
<!DOCTYPE html>
<html>
<head>
<style>
#stay-at-bottom { position: fixed; bottom: 0; left: 100px; width: 500px; height: 200px; overflow: hidden; background: #f00;}
#stay-at-bottom iframe { width: 500px; height: 200px; position: relative; }
</style>
</head>
<body>
<div id="stay-at-bottom"><iframe src="http://google.com"></iframe></div>
</body>
</html>
Related
What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5
Right now the code for that div is:
.video_tag {
position: absolute;
z-index: 100;
top: 15%;
left: 5%;
width: 230px;}
Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/)
Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.
Cheers!
I opened your page in firefox's inspect and added this position: relative;:
#holder {
height: 100%;
width: 100%;
position: relative;
}
It is working, but I didnt test back in chrome
Set your container to relative positioning
#holder {
position: relative;
}
If this is not the right container then set it on the one you need
I'm having problem with pixels on web page. I have cover image on body and button on it. When page does resize, button is moving too. I want to stay button there where I put it even when screen changes. I'm trying to port website on mobile devices too, that's why I have that problem. P.S I'm new to web programming.
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>test page.</title>
<style>
body {
background:url("test.jpg");
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#mybutton {
position: absolute;
right:800px;
top:300px;
}
</style>
</head>
<body>
<button id="mybutton" onClick="javascript:alert('clicked!');">Click Me!</button>
</body>
</html>
Ok so your getting yourself confused here I believe. So position: absolute; says:
position this element relative to the top right hand corner of the
browser window
so if the browser window resizes so your position changes. the approach I believe you should actually take is to constrain the size of your "canvas". I.e. this is how big the background image is so I'm going to keep my "canvas" this size, i.e.
http://jsfiddle.net/bLUhL/1/
if you resize the screen in this fiddle you'll see the button stay in the same position relative to the "canvas" and this is always in the centre.
You can then position the button using margins:
input
{
margin-left:200px;
margin-right:300px;
}
make css property position as fixed of mybutton.
#mybutton {
position: fixed;
right:800px;
top:300px;
}
try tweaking this to your needs:
#mybutton {
position: fixed;
right: 150px;
top: 49%;
display: block;
}
or, in other words, use position:fixed
try this dude..position fixed is the best way. If you use absolute button will be go up when u scroll the page.. and
right:0; top:0;
will be help your button to keep top right..
#mybutton {
position: fixed;
right:0;
top:0;
width:100px;//what u want
height:30px;//what u want
}
if you want some margin from top and right use this
right:100px;//what u want
top:100px;//what u want
I think you should use left instead of right.
The absolute element will be positioned against first parent whose position is relative.
So you can have a button whose position is absolute. And on top it, there will be a div whose position will be relative. Then you can give position to your button, relative/against that div.
Which will be fixed, despite of screen size.
Fiddle
I have a search website that needs to have the search bar and logo centered vertically and horizontally in the index page as its the only items on the page.
What is the best and most effective way to implementing this
here's an easy way to do it, though it won't work in IE6, which doesn't support position:fixed. If you want IE6 support, use position:absolute, but ensure the page content isn't longer than the height of the viewport.
#box {
position: fixed;
left: 0;
top: 0;
width:100%;
height: 100%;
}
#box table {
height: 100%;
}
#box td {
vertical-align: middle;
text-align: center;
}
and the HTML:
<div id="box"><table><tr><td>
YOUR HTML CODE HERE
</td></tr></table></div>
THAT SAID...
You probably shouldn't do this though. You'd be better off simply adding 50-100 pixels of padding at the top if you're simply going for a look that avoids having your content hard up against the top of the page.
for css-only approach check out this fiddle. http://jsfiddle.net/jeffrod/nFthS/
it requires that the width and height of the center box be known. it positions the top left of the box in the middle and then, using margins, shifts it back so that the center of the box is at the center of the page.
<style>
div.center {
position: fixed;
width: 320px;
height: 240px;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -160px;
}
</style>
<div class="center"><!-- search bar --></div>
but I don't know if this is the best way
I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.
Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.
do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.
Problem:
My Client wants me to create a launch webpage for his product such that there should be no scroll on the page, be any browser or window dimensions.
Doubt: Is this possible using CSS and Javascript?
Some Early Diagnosis: This might be a little similar to this or this but the difference is that I want to resize the dimensions of each and every element in a particular ratio and not just adjust the height of a parent DIV.
So, the statement: I need to change the dimensions of each and every element (images, divs, text ... all) based on a ratio between the (current window size and a reference window size). Perhaps Javascript might have a cure for this?
Question: How to do this?
Just set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Proportional resizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
div {
position: absolute;
left: 30%;
top: 20%;
width: 40%;
height: 30%;
background-color: #ddd;
}
</style>
</head>
<body>
<div>divthing</div>
</body>
</html>
These percentages are relative to the containing block, which is, in this case <body>.
Update: To answer another question: scaling of background images is almost not supported yet. When the CSS 3 background-size property gains ground (see this table), things will be easier. For now, have a look at this answer (yes, that means: more markup).