I want a div element, in a bottom of window. like a div in bottom page of old facebook.com. or like a chat div of initial facebook.com
You can use position: fixed; bottom: 0px. But won't work in IE6.
<style type="text/css">
#footer { position: fixed; bottom: 0px; }
</style>
<div id="footer">I am at the bottom of the window</div>
Try using this. The bottom bar here is made with a div element. I would imagine you can use any element you wish, just reference the CSS class. I have only tested the div element
/* HTML */
<div class='always-at-bottom'>Always at bottom!</div>
/* CSS */
.always-at-bottom {
height:40px;
position: fixed;
left: 0;
bottom: 0%;
width: 100%;
background-color: blue;
}
Related
I'm trying to get a sticky footer on a page with 100% heigth in every tag.
My problem is that, if the content is bigger than the display and I scroll downwards, the footer is no longer at the bottom of the page.
The footer stays at the position like this: Picture of the footer
Here is an example:(Sorry that was the wrong link..)
http://jsfiddle.net/qt3m1p4c/
<html style:"height: 100%">
<body style:"height: 100%">
A lot of Content
</body>
<footer style:"position: absolute; bottom: 0;">
Sticky Footer
</footer>
</html>
Does someone no how to fix this, without removing the heigth attributes?
You need to set position: fixed to your footer, this means whatever happens on your page, this element will stand in same place, here your code with changed position
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background:#ccc;
}
Put the footer INSIDE the content wrapper and change the CSS as follows:
.pageContentWrapper {
padding-bottom:100px;
min-height: 100%;
position: relative;
box-sizing: border-box;
}
.footer {
position: absolute;
[...]
}
Here's a fiddle: (EDITED, I forgot to add box-sizing: border-box; at first): http://jsfiddle.net/uc6y5dhs/1/
I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area)
-- width: 100% only fills the viewable screen
I prefer a CSS only solution but pure javascript is ok. I tried without success setting:
opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);
I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.
In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.
Thanks for any help.
<div class="page-container"></div>
<div id="opaque"></div>
body {
width:100%;
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:2500px;
margin:0 auto -50px auto;
border:solid #999;
border-width:2px;
background: lightblue;
}
#opaque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: grey;
filter: alpha(opacity=70);
opacity: 0.7;
}
Can use
#opaque {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
}
remove width:100% from body due to creates horizontal scrollbar
Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden
DEMO
You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).
Using javascript to set one elements height equal to anothers
var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');
o.style.height = window.getComputedStyle(p).getPropertyValue("height");
FIDDLE
My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});
I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?
Here is a jsFiddle demonstration, and here's the markup:
HTML
<div class="container">
<div class="overlay"></div>
<div class="content">
<p>Content here</p>
<p>Overflow content here</p>
</div>
</div>
CSS
div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }
and JS (load on DOM Ready)
$('div.container').click(function(){
$('div.overlay').toggle();
});
In order to achieve what you were asking for I did the following
CSS
.container {
/* setting this to relative means
overlay is positioned relative to its parent */
position: relative;
}
.overlay {
/* element taken out of normal flow */
position: absolute;
/* removed bottom and right properties otherwise
updating top property has no effect */
height: 100px;
/* When scrollbar appears width decreases to less than
100px hence having to set to 100% to allow automatic calculation */
width: 100%;
}
JavaScript
Using jQuery I now set the top property appropriately
$(".container").scroll( function( ) {
$(".overlay").css({ top: $(this).scrollTop( ) });
});
Fiddle here
Assuming you really want to cover only the visible portion:
http://jsfiddle.net/GNCaT/1/
<style type="text/css">
div.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height:100px; /* fixed height, set by CSS or javascript, no bottom */
background: #F00;
opacity: 0.5;
}
</style>
<script>
$('div.container').click(function(){
$('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});
</script>
This will position the overlay to the top of the visible portion of the container.
You can use the DOM property scrollHeight :
$('div.container').click(function(){
$('div.overlay').css("height", this.scrollHeight).toggle();
});
http://jsfiddle.net/p6k2Z/1/
EDIT :
In order to just overlay the visible portion, you can use this :
$('div.container').click(function(){
$('div.overlay').css({
top: this.scrollTop,
height: $('div.container').css("height")})
.toggle();
});
http://jsfiddle.net/p6k2Z/3/
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.