Change min-height of a div to browser height [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a div for my content on my page with an id of "wrapper" (see curtainandblinddevotion.co.uk). There is also a nav bar at the top and a footer at the bottom.
I need the wrapper to be the height of the browser window, minus the height of the nav and footer. How do I do this with javascript?
The point of the script is so that large browser windows dont have the footer floating away from the bottom, and the wrapper's background should strech right to the footer.
Thanks in advance for any help,
Connor

Here I am going to give you a very basic example of how to keep the footer always bottom even in a big screens. Read Here to Know more about How it Works
HTML
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">My Content</div>
<div id="footer">This my footer</div>
</div>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:green;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
}
DEMO

I just created this JSFiddle: http://jsfiddle.net/5ur87/
If your goal is to make the footer always at the bottom of the page even on large screens, you can use position:fixed; with bottom:0px;, like below:
footer{
position: fixed;
bottom: 0px;
width: 100%;
height: 20px;
background-color: green;
color: white;
}

Related

Putting a caption and an image inside of a centered div that slides down from the top of the screen

I want to make a gallery in HTML/CSS/jQuery. I have a bunch of thumbnails that all represent different images of varying sizes and orientations. When the thumbnail is clicked, I want the image to slide down from the top of the screen. The image should be as large as possible but still fitting in the window, taking into account margins and the like.
I have gotten all this to work properly in the past. However, now I want to add a caption below the image.
My solution was this. I have a div container that is fixed and is positioned with top:-96% and bottom:100% When a thumbnail is clicked, jQuery moves that to top:2% and bottom:2%
Previously I had a border that surrounded the image. Now I want to make that border actually part of a div instead, so that the border can go around the caption which should be below the image and centered, and said image.
Nothing I am doing is working, however. The image will not fit into the viewport, and will always be its max size no matter what I change the percent to.
I'm completely lost, I have no idea how to make this all work out. If you need code, I can give it to you, but as I said, it doesn't work. Thank you all in advance.
EDIT: Added code
HTML:
<div id=imgHoverCont>
<div id=imgBg>
<img id=imgHover src="" alt="">
<div id=commentHover></div>
</div>
</div>
CSS:
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
}
#imgHover{
display:block;
height:100%;
width:auto;
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;
max-height:100%;
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
JS: Thumbnails are stored in an array of objects with their ID and their source.
for(let i in thumbnails){
$(thumbnails[i].id).on("click",function(livingHell){
return function(){
$("#imgHover").attr("src",thumbnails[livingHell].src)
$("#imgHoverCont").css("display","block");
$("#commentHover").html(thumbnails[livingHell].comment);
$("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
}
}(i));
};
I've made some changes to your CSS
if I understood your question it works like expected, look here: https://jsfiddle.net/cratgjks/
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
width:100%; /*new rule*/
}
#imgHover{
display:block;
height:100%;
width:100%;/*changed rule*/
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;/*changed rule*/
max-height:100%;
width:1500px
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Can I let my fixed header scroll, the moment a collapsible header is no longer on page? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
We've all seen the collapsible headers a lot now a days. I really like the effect it brings to a page, it gives a lot more dept.
I would like to achieve this dept effects, but I don't really need the functionality of a fixed header.
Now I've seen collapsible headers done, with the fixed header becoming smaller as soon as the collapsible header is off the page.
Is it possible to make the fixed header no longer fixed, the moment the collapsible header is off the page? And make it scroll off the page with the rest of the content?
I have tried it and I hope this is what you want.. Click the link below for Demo..
Demo
This is the HTML
<div id="headerSlideContainer">
<div id="headerSlideContent">
Header content goes here!
</div>
<div id="new">
Other Contents
</div>
</div>
n here goes CSS..
#headerSlideContainer {
position: absolute;
top:0px;
width: 100%;
height:1000px;
background: black;
}
#headerSlideContent {
width: 900px;
height: 50px;
margin: 0 auto;
color: white;
background:Red;
z-index:10000;
position:fixed;
}
#new{
top:60px;
z-index:2;
height:100px;
background:Orange;
position:absolute;
color: white;
}
n this is the Javascript..
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '5px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});

How do I vertically align text in a colorbox? [duplicate]

This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Closed 9 years ago.
How do I vertically align text that is inside of the cboxTitle-div (e.g. close-Box(text))? I use colorbox for making modal popups.
The div-structure is this:
<div id="cBoxContent">
<div id="cBoxTitle"></div>
</div>
CSS code:
#cboxContent{overflow:hidden; background: #121219;
}
#cboxTitle{position:absolute; top:0; left:0; text-align:left; width:100%; color:#999; height: 38px;}
You can vertically center text by setting its line-height property to the height of the element it's sitting in.
#cboxTitle{
position:absolute;
top:0;
left:0;
text-align:left; width:100%;
color:#999;
height: 38px;
line-height: 38px;
}
This trick will only work if you know the height of your div, of course. There are other methods, but they're more complex.
Another method that isn't linked is to set the div containing your text to position: relative;, then setting top to 50% minus the one half the height of the element. This is best done in Javascript.

Remove an element from page flow similiar to a fixed position

I was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won't scroll.
Example - currently even though it goes beyond the screen it doesn't increase the size of the document, but if position is changed to absolute / relative it will.
I would like for the position to be absolute (although relative will work), yet not increase the document size.
I'm looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).
Depending what else you have on the page, this might do the trick.
body {
height:100%;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
If you want other elements to overflow the body, use this code.
<div class="wrapper">
<nav></nav>
</div>
body {
height:100%;
}
.wrapper {
position:absolute;
top:0;
bottom:0;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}

Categories