Multiple divs with sticky position overlapping each other - javascript

When i have multiple div's with sticky position the first div is overlapping the second div while at the end and not staying locked at the position without overlapping.
How do i make it lock at a position when it ends the corresponding div
Here is a copepen for that
HTML :
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
Codepen
Original problem in website
https://ibb.co/BCq4Pnd

First calculate the height of first element i.e( 80px including border and paddings ) in your case.
Give 80px top to the second element.
Third element will have a top of 160px and so on.
All elements will have position:sticky
Try this,
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>

First change the class of your body component, you gave it the wrong class and for me the result is good?

Related

Css Rescaling Fixed Banner

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

How to overlay one div over another?

When I hover my mouse over a div with id one, dialog box appears, but the div with id three moves to the right.
I want the dialog box to appear over div with id three without it moving to right.
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:300px;
border:1px solid #000000;
float:left;
margin-left:10px;
}
#one,#three{
position:relative;
}
#two,#four{
margin:0;
padding:0;
left:334px;
top:100px;
background-color:#3B3B3B;
border:none;
width:200px;
height:100px;
display:none;
position:relative;
left:14px;
}
#triangleone,#triangletwo{
margin:0;
padding:0;
width: 0;
height: 0;
border-color:transparent;
border-top: 8px solid transparent;
border-right: 14px solid #3B3B3B;
border-bottom: 8px solid transparent;
top:35px;
display:none;
position:relative;
}
#dialogboxone,#dialogboxtwo{
margin:0;
padding:0;
width:214px;
display:none;
border:none;
}
</style>
<script>
var timer;
function showDialogBox(idOne,idTwo,idThree){
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
timer=setTimeout(function(){
firstSideBar.style.display="block";
secondSideBar.style.display="block";
dialogBox.style.display="block";
},800);
}
function hideDialogBox(idOne,idTwo,idThree){
clearTimeout(timer);
var firstSideBar=document.getElementById(idOne);
var secondSideBar=document.getElementById(idTwo);
var dialogBox=document.getElementById(idThree);
firstSideBar.style.display="none";
secondSideBar.style.display="none";
dialogBox.style.display="none";
}
</script>
</head>
<body>
<div id="one" onmouseover="showDialogBox('two','triangleone','dialogboxone')" onmouseout=hideDialogBox('two','triangleone','dialogboxone')></div>
<div id="dialogboxone">
<div id="two"></div>
<div id="triangleone"></div>
</div>
<div id="three" onmouseover="showDialogBox('four','triangletwo','dialogboxtwo')" onmouseout="hideDialogBox('four','triangletwo','dialogboxtwo')"></div>
<div id="dialogboxtwo">
<div id="four"></div>
<div id="triangletwo"></div>
</div>
</body>
</html>
You need a wrapper to position the dialogboxes against:
<div class="wrapper">
<div id="one"></div>
<div id="dialogone"></div>
</div>
Then you'll need to position the wrapper relatively, and position them to your liking (eg. with float). The dialog can be positioned absolutely, for example: position: absolute; left: 100% to position them just outside the wrapper to the right.
JSFiddle example
Note: please try to format your code a bit more readable, with indents and spaces... Whenyouwriteinenglishyoualsousespaces,doyou?

How to have a scrollbar on body for scrolling content within a centered, middled div?

I need a fixed-height, fixed-width div centered (horizontally) and middled (vertically) on the viewport. There'll be a navigation bar which must be 'fixed' to the top of that div. I have content which overflows and requires a scrollbar. However, instead of the scrollbar on the div, I want it to resemble a more traditional scrollbar - on the right most position of the browser.
A close solution came from a related question, however their solution does not keep the content div fixed-height/width.
Here's what I have now. I would prefer a purely-CSS solution, but I understand Javascript might be necessary.
HTML
<div class="verMidOut">
<div class="verMidMid">
<div class="verMidIn">
<div class="scroller">
<div id="headerContainer" style="visibility: visible;">
<p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
</div>
<div class="mainContainer index">
<p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
</div>
</div>
</div>
</div>
</div>
CSS
html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
.scroller {width: 100%;overflow: auto;overflow-x:hidden;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
An early solution I had can be found here, which uses jQuery, however, the scrollbar only appears when the content overflows the body, and not the content div (black/red in the jsFiddle).
Then I added a spacer in the content div which dynamically changes its height depending on the window height and div height. This forces the scrollbar to appear even though there's nothing there.
HTML
<div class="verMidOut">
<div class="verMidMid">
<div id="headerContainer" style="visibility: visible;">
<p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
</div>
<div class="verMidIn">
<div class="mainContainer index">
<p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
<div class="spacer"></div>
</div>
</div>
</div>
</div>
CSS
html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;overflow:hidden;overflow-y:auto;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
.spacer {display:inline-block;visibility:hidden;}
jQuery
//When the window is more than the height of the black box, it will calculate the 'top' for the headerContainer
function posNav() {
if($(window).height() > $('.mainContainer').height()) {
var diff = (($(window).height() - $('.mainContainer').height()) / 2);
var newTop = diff + 15;
$('.spacer').css({'height': diff});
$('#headerContainer').css({'top': newTop});
}
}
$(document).ready(function(){
posNav();
$(window).resize(function(){
posNav();
});
});

Two fixed width divs, and another div with dynamic size between

The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.

Change dimensions of HTML/CSS boxes on hover

I've a web page having some equal-sized boxes. Some of them are hidden (.dummy), other are visible having class lets say .A,.B & .C as shown in the image below:[The dummy have only been shown here in the image for simplicity. In actual HTML code they don't have any background/border, hence invisible.]
Now, if a user clicks on link A, all boxes expect those of class '.A' will fadeOut. Similarly, for the other links as shown here.
I want only the div#1 box to change dimensions, when the pointer is hovered. However, when I apply the .hover command, the whole page gets distorted. I want every box to remain as it is and only the width of #div 1 gets increased. Similarly, only the height of #div 2 to increase. For this purpose, do I have to write separate classes for each effect?
EDIT #1
These are my relevant codes:
.dummy {
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
background:none;
}
.A, .B, .C{
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
If all of the Class A divs are under the same parent, you can try nth-of-type selector,
e.g.,
<html>
<head>
<style>
.A {
width: 50px;
height: 50px;
border: 1px solid #CCC;
}
#outer div:nth-of-type(1) .A:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div class="A"></div>
</div>
<div>
<div class="A"></div>
<div class="A"></div>
</div>
</div>
</body>
</html>
Regerence:
W3C CSS Selector Reference

Categories