Develop Reference

Position footer always on viewport bottom

I have a footer that contain the user name. I want to show it always on the bottom of the viewport. Like a fixed bottom bar but only on my sidebar.
I use the function
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
$('#footer').removeClass('invisible');
}
this inside:
$( function () {
setFooterStyle();
window.onresize = setFooterStyle;
}
But because I use a sidebar I thing the margin-top will place the footer the amount of pixel under the sidebar and not under the page top. So it is somewhere at the bottom of the document and I have to scroll to see.
Any idea what I do wrong to keep the text always on the bottom of the viewport, while resize ans while scroll?

The general term for what you are trying to do is "Sticky Footer". The trick is to make a wrapper div for your content above the footer that takes up 100% of the height of the viewport, then to use negative margins on the footer to move it up the same amount as the height of the footer. Then the footer is always at the bottom of the viewport. Then you need to add padding to the bottom of the content so that it never gets covered by the footer, now that the footer is not taking up space in the regular flow of the layout.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
https://css-tricks.com/couple-takes-sticky-footer/

How to vertically center jQuery Modal?

jQuery code:
function thumb(id,ths) {
if (<?=$loggedin?>) {
$.post(base_url+"index.php/myad/addthumbs", {uniqueid:id});
$(ths).addClass("red");
} else {
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
}
How can I center modal? Please help me and thanks in advance.
I find solution on google and on stackoverflow but question is asked for bootstrap based modal when it build by a pure jquery.

Give your popup a fixed css like this:
#pop {
position:fixed;
top:50%;
left:50%;
}
Then align it by it´s width and height in your JS:
$("#pop").css({
"margin-top":-($(this).height()/2),
"margin-left":-($(this).width()/2)
});

One method is you can adjust the percentage of margin-top style
.modal-dialog {
margin-top:10%; /* Based on your modal height adjust the percentage */
}
OR
.modal-dialog {
padding-top:10%; /* Based on your modal height adjust the percentage */
}

Without using jQuery, you can simply use display: table to the main content container together with margin: auto.
A working example of this centered modal is here.
Basically, these are the important rules:
.modal-content {
display: table;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 60%; /* here you can also use a fixed width */
overflow: auto;
z-index: 50;
}
Use JavaScript or jQuery to trigger the opening and closing of the modal.

Switch div from fixed to absolute at bottom of browser

Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}

If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.

I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black

You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.

Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>

If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.

How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?

I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.
The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.
This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.
Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.

I suppose I'll post this, since it seems to work:
div#header-div {
height: 90px;
background-color: lime;
margin: 0;
}
div#fixed-div {
position: fixed;
left: 0;
top: 0; /* <<< No offset */
bottom: 0; /* <<< Pull to the bottom for height */
margin: 120px 0 0; /* <<< Give it the 120px top */
width: 260px;
background-color: silver;
overflow-y: scroll;
}
http://jsbin.com/iqibew/13/

if you want your div to be sized as you like , i have an option for you
//Add this to <head> section , i thought you haven't one in the sample
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
function _resizeTDiv()
{
var p = $("#header-div");
var position = p.position();
var realheight = p.position().top+p.height();
$("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
_resizeTDiv();
//Resize our div on window resize?
$(window).resize(function() {
_resizeTDiv();
});
});
</script>

HTML CSS Remainder of space

How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.

You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony

I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.

You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.

Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)

No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)

Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.

If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>