I want to implement the effect below:
I try to set the footer part (yellow part in the picture):
<style>
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
</body>
but it will cover the inner box (green part in the picture), so how to make the yellow part under the green part. The height of the green part is not fixed.
Add position: relative + z-index: 1 to list-container
.main {
background-color: blue;
padding: 0 20px;
}
.list-container {
background-color: green;
z-index: 1;
position: relative;
}
.footer {
height: 80px;
background-color: yellow;
margin-top: -30px;
}
<div class="container">
<div class="main">
<div class="list-container">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
....... more items
</div>
</div>
<div class="footer"></div>
</div>
Related
I have a hamburger side menu and header element and when I click that hamburger menu I want the header to be displayed initial and the header's width grows slowly to left how do I do that.
header {
width: 0px;
background-color: black;
padding-bottom: 10px;
display: none;
position: absolute;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header>.</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
You can use css transition to animate when header width goes from 0 to 100%
document.getElementById('main').onclick = function() {
document.getElementById('header').classList.add('show');
}
html,
body {
padding: 0;
margin: 0;
}
header {
width: 0px;
background-color: black;
position: absolute;
transition: all 0.5s;
overflow: hidden;
}
header.show {
width: 100%;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header id="header">
<div style="padding: 1em;">
header
</div>
</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!
I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>
great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>
[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>
EDIT: Alignment fixed by adding floats. Height still doesn't fill 100% though. Updated look: https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd
I have a footer container in which I want to have 3 columns (I have made them green, white and red for now so it's easier for you to see). Currently they're stacking vertically but I want them to be beside eachother and have a height of 100% to fill the height of whatever the container's height is. Here is an image of what it looks liek at the moment, please ignore the large black boxes, these are just so I can see where stuff is on the page but will evenutally be transparent etc. https://gyazo.com/12d0642e5fd9518a663606668ec06311
They each have a width of 33% because I want to follow responsive practices and I've currently tried removing all padding and margins etc from every div.
Any help would be greatly appreciated, thank you.
HTML:
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
CSS:
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
max-height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
height: 100%;
float: left;
background-color: darkolivegreen;
padding: 0;
}
#footerCenter {
width: 33%;
height: 100%;
float: left;
background-color: white;
padding: 0;
}
#footerRight {
width: 33%;
height: 100%;
float: left;
background-color: firebrick;
padding: 0;
}
Add display: flex to the #footerContainer rule, and change max-height: 100%; to height: 100%; in #footerContainer
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: flex;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
background-color: darkolivegreen;
}
#footerCenter {
width: 33%;
background-color: white;
}
#footerRight {
width: 33%;
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
Here is a version where I simplified both markup and CSS
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
display: flex;
justify-content: center;
}
#footer > div {
width: 20%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- Footer -->
</div>
<!-- Page -->
One for older browsers, using display: table
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: table;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerContainer > div {
display: table-cell;
width: 33%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
<!-- Footer -->
</div>
<!-- Page -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#div1 {
width:33%;
display:inline-block;
float:left;
height:100%;
}
#div2 {
width:33%;
display:inline-block;
height:100%;
}
#div3 {
width:33%;
display:inline-block;
float:right;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>
If the second div isn't perfectly aligned, try setting #container text-align to center. Is very important to use the comments to delete the space between the divs.
Add float: left to the 3 elements.
Don't repeat the properties, combine the selectors with comma.
To stretch the elements you will need to change max-height to height on #footerContainer.
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft,
#footerCenter,
#footerRight {
float: left;
width: 33%;
height: 100%;
padding: 0;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
</div>
<!-- Page -->
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>
Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>