using one div to restrict the size of another

using one div to restrict the size of another - javascript

I have two divs, 'content-left' and 'content-right'. The content-left div can vary in height. The content-right div has a constant height.
UPDATE: content-left can not only vary in size, but it can vary in size from minute to minute, depending on what the user does.
I wish to have content-left contain a div scroll-bar. I dont want the browser-window itself to have a scroll bar.
I want the content of the content-right div to be always visible. content-right should never scroll off the page.
I came up with the code below, but I think it could be better.
I tested this in firefox and chrome. Internet Explorer is irrelevant to me.
In essence, I merely "hide" the left div, determine the difference between the top of the right div and the window size, and set the max-height property of the left-div. The scroll then happens by the overflow:auto
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
processLeftDiv();
});
$(window).resize(function() {
processLeftDiv();
});
function processLeftDiv() {
$('#content-left').hide();
windowHeight = $(window).height() ;
positionTop = $('#content-right').position().top ;
$('#content-left').css('max-height', ( windowHeight - ( positionTop + 20 ) ) );
// the 20 is padding
$('#content-left').show();
}
</script>
<title>Test</title>
<style type="text/css">
#header
{
width: 100%;
background: red;
}
#content-left
{
float: left;
margin-bottom: 5px;
width: 50%;
height: 100%;
max-height: 100%;
overflow: auto;
background: blue;
display:none;
}
#content-right
{
float: right;
width: 50%;
background: green;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="body">
<div id="content-left">
Content left
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
repeated 100 times
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
</div><!--close left div-->
<div id="content-right">
Content
<p>Content stuff</p>
</div><!--close right div-->
</div><!--close body div-->
</body>
</html>
Thoughts?

No need to complicate this with javascript, you can use CSS only, much more simple. Here's how you do it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
.header
{
width: 100%;
height: 100px;
background: red;
}
.wrapper
{
position: absolute;
top: 100px;
bottom: 0;
left: 0;
width: 100%;
}
.content-left
{
float: left;
width: 50%;
height: 100%;
overflow: auto;
background: blue;
}
.content-right
{
float: left;
width: 50%;
height: 100%;
background: green;
}
</style>
</head>
<body>
<div class="header">
<p>Header stuff</p>
</div>
<div class="wrapper">
<div class="content-left">
Content left
</div>
<div class="content-right">
Content right
</div>
</div>
</body>
</html>
Just a few tips since you're a newbie:
always try to use classes instead of ids in your html/css, your life will be much more simple in the long run (ids should only be used if you want to bind some javascript to just one element, no other good reasons imo)
always use some CSS reset block (I used the most simple one here on body tag). I know this is just an example, but in real applications this is a must. Google it, there are some great ones out there.

Related

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr

I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>

I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

How to make two sides equal height? One big div and some small divs

I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):
I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:
Here is the HTML:
<div class="row">
<div class="col-md-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- this four times -->
<div class="col-lg-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
<!-- this four times end -->
</div>
</div>
</div>
My jQuery attempts
// news section fix height
// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);
// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)
// 25 is the margin (i know it, but ofcourse it can be set from DOM)
var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;
//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);
The result is ok BUT it's not responsive and it's a bug if the left side is too small.

try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>

CSS only carousel

I am trying to change the CSS below so that I don't need the JavaScript snippet to achieve the same desired effect.
The JavaScript:
<script>
$(function() {
var pageCount = 2;
var pageWidth = 450;
$("#pages").css('width', window.innerWidth * pageCount);
$(".page").css('margin-right', window.innerWidth - pageWidth);
});
</script>
The HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#pages {
position: absolute;
top: 50%;
height: 200px;
width: 30000px;
margin-top: -100px;
left: 50%;
}
.page {
margin-left: -150px;
width: 300px;
background: blue;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="pages">
<div class="page">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
<div class="page">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
<div class="page">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</body>
</html>
Is there any way I can remove this JavaScript and do the same thing in CSS only? Originally I tried playing around with margin-right: 100% but couldn't get it to work.
Code Pen: http://codepen.io/anon/pen/gfxeh

Yes. You can use the following CSS:
.page {
counter-increment:section;
margin-left: -150px;
width: 300px;
background: blue;
float: left;
margin-right: calc(100%/3 - 300px);
}
#pages {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
left: 50%;
width: calc(100%*3);
}

Alternative solution that works with any number of pages and compatible with older browsers (calc is a new CSS feature)
There is however a limitation: the scroll bar is in the pages element. (there is a way to work around this which I will show bellow)
HTML
<div id="pages">
<div class="page">
<div class="content">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</div>
CSS
#pages {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.page {
width: 100%;
display: inline-block;
}
.page > .content {
width: 300px;
background: blue;
margin: 0 auto;
}
See Code Pen
If your page will only contain the carousel, you can replace #pages with body so that the scroll bar is the main scrollbar
See Code Pen
By the way, the CSS in the marked solution is not working. It should be
.page {
...
margin-right: calc(100%/3 - 300px);
}
Code Pen for the correction

Resizing Div and its content dynamically to fit the browser height

I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling

CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>

Why doesn't my sticky footer stick?

I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050

Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>

I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>

It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.

Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>

In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.

This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>

We Keep Coding

JavaScript is the programming language of the Web.

using one div to restrict the size of another - javascript

Related

How to re-create Facebook image modal?

How to make two sides equal height? One big div and some small divs

CSS only carousel

Resizing Div and its content dynamically to fit the browser height

Why doesn't my sticky footer stick?

Categories

Resources