Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});
Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/
Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle
Related
I want to hover over div2 and make container bigger, but for some reason hover doesnt work, any idea ? is it with :has() ? any help is appreciated
.box {
width: 200px;
aspect-ratio: 1;
display: inline-block;
border: 1px solid red;
}
.box > .box-inside {
margin-left: 40%;
margin-top:40%;
height:30px;
width:30px;
border: 3px solid green;
cursor: pointer;
}
/* when div2 is hovered make container bigger */
.container:has(#div2:hover) .container {
transform: scale(1.2);
transition: all 1s;
}
<div class="container">
<div class="box">
<div class="box-inside" id="div2">div2
</div>
</div>
</div>
Because your selector .container:has(#div2:hover) .containe selects the container inside the container. Simply remove the second .container selector:
.box {
width: 200px;
aspect-ratio: 1;
display: inline-block;
border: 1px solid red;
}
.box > .box-inside {
margin-left: 40%;
margin-top:40%;
height:30px;
width:30px;
border: 3px solid green;
cursor: pointer;
}
/* when div2 is hovered make container bigger */
.container:has(#div2:hover) {
transform: scale(1.2);
transition: all 1s;
}
<div class="container">
<div class="box">
<div class="box-inside" id="div2">div2
</div>
</div>
</div>
Please note that :has() does not work in some browsers, e.g. Firefox
The aim is to code the design below with 3 boxes appearing on top of a straight vertical line (Horizontal on desktop).
I have tried creating this using :: before pseudo selector.
Here is the code:
HTML
<div className={clsx(styles.container__box, styles['container__box--1'])}>
Box 1
</div>
<div className={clsx(styles.container__box, styles['container__box--2'])}>
Box 2
</div>
<div className={clsx(styles.container__box, styles['container__box--3'])}>
Box 3
</div>
CSS
&__box {
width: 25rem;
height: 25rem;
&:not(:last-child) {
margin-bottom: 5rem;
}
&--1 {
background-color: red;
z-index: 100;
}
&--2 {
background-color: green;
position: relative;
&::before {
content: "";
background-color: black;
color: red;
font-weight: bold;
height: 85rem;
width: 1rem;
display: block;
position: absolute;
top: -120%;
left: 50%;
}
}
&--3 {
background-color: yellow;
z-index: 100;
}
}
I'm unable to hide the pseudo selector behind the parent div.
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.container{
position:relative;
}
.container span{
background:black;
height:300px;
display:block;
width:10px;
position: absolute;
left:47%;
top:20px;
}
.box1,
.box2,
.box3{
background:greenyellow;
width:100px;
height:100px;
border:1px solid blue;
margin:10px 0px;
position: relative;
}
<body>
<div class="container">
<span></span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
try setting the parent divs position to relative then setting the before pseudo element's z-index to -1
.parent-div {
position: relative;
}
.parent-div::after {
content: "";
position: absolute;
z-index: -1;
}
Is there any way to go from desktop layout to mobile layout as shown on the image below using CSS? (responsiveness layout).
On the image below, every square is a div including the red square (anonymous).
I have the following divs: {A, B, C, D, red}.
On my requirements it is not possible to move the div A inside the red div (html source code). I just need the rendering takes care to put div A after div B.
Below you have a sample you can run by yourself.
Also you have the jsfiddle here: https://jsfiddle.net/tjztgn5d/
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
Any idea on how to achieve this without Javascript?
Yes, this can be done without altering the HTML or using Javascript. The trick is to use absolute positioning. It can work in your case because you are using fixed sizes anyway.
https://jsfiddle.net/anzL79py/
This is what I have added:
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
And the full snippet.
* {
font-family: Arial;
}
#red {
float: left;
border: 1px solid #F00;
padding: 10px;
}
.header {
padding: 10px auto;
text-align: center;
}
#A {
float: left;
width: 140px;
height: 210px;
border: 1px solid #D79B00;
}
#A > .header {
background-color: #FFE6CC;
border-bottom: 1px solid #D79B00;
}
#B {
width: 140px;
height: 188px;
border: 1px solid #6C8EBF;
}
#B > .header {
background-color: #DAE8FC;
border-bottom: 1px solid #6C8EBF;
}
#C, #D {
width: 140px;
height: 88px;
}
#C {
border: 1px solid #B85450;
margin-bottom: 10px;
}
#C > .header {
background-color: #F8CECC;
border-bottom: 1px solid #B85450;
}
#D {
border: 1px solid #9673A6;
}
#D > .header {
background-color: #E1D5E7;
border-bottom: 1px solid #9673A6;
}
#media (max-width: 512px) {
/* erase inline styles. dont use them anymore! */
#B {
float: unset !important;
margin-right: unset !important;
}
#B + div {
float: unset !important;
}
#A {
position: absolute;
left: 19px;
top: 218px;
}
#B {
margin-bottom: 230px;
}
}
<div id="A">
<div class="header">A</div>
</div>
<div id="red">
<div id="B" style="float:left;margin-right:10px;">
<div class="header">B</div>
</div>
<div style="float:left;">
<div id="C">
<div class="header">C</div>
</div>
<div id="D">
<div class="header">D</div>
</div>
</div>
</div>
In your case by not using JS, it would be better to use
Bootstrap Column + Flexbox in Media Query
.contain{
max-height:800px;
}
.A{
color:white;
font-size:100px;
background:red;
height:100vh;
border:10px solid white;
}
.B{
color:white;
font-size:100px;
background:green;
height:100vh;
border:10px solid white;
}
.C{
color:white;
font-size:100px;
background:blue;
height:50vh;
border:10px solid white;
}
.D{
color:white;
font-size:100px;
background:pink;
height:50vh;
border:10px solid white;
}
#media only screen and (max-width: 768px) {
.contain{
display:flex;
flex-direction:column;
}
.A{
order:2;
border:0px;
}
.B{
order:1;
border:0px;
}
.three{
order:3;
border:0px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class="row contain">
<div class="col-sm-4 A">1</div>
<div class="col-sm-4 B">2</div>
<div class="col-sm-4 three">
<div class="row">
<div class="col-sm-12 C">3</div>
<div class="col-sm-12 D">4</div>
</div>
</div>
</div>
</div>
.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
Hello,
I have one question, is possible to detect focus and blur into div (class="box"). I would like to click in div class="box" (when div is active) and the red box (class="window") fadeOut and then when click outside "box" "window" fadeIn ?
Thank you for your time :)
You could do that using jQuery focus and blur event handler, .box on focus it hides .window and on blur it shows .window.
$(document).ready(function(){
$('.box').on('focus',function(){
$('.window').hide(200);
});
$('.box').on('blur',function(){
$('.window').show(200);
});
});
.container
{
width:500px;
height:500px;
background-color:grey;
}
.box
{
width:150px;
height:30px;
background-color:white;
position:relative;
top:130px;
left:10px;
color:black;
}
.window
{
height:300px;
width:250px;
background-color:red;
position:absolute;
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
You can detect focus/blur events on the .box and in those event handlers you can take the appropriate actions.
var boxEl = document.querySelector('.box');
boxEl.addEventListener('focus', function(e) {
console.log('focused');
});
boxEl.addEventListener('blur', function(e) {
console.log('blurred');
});
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
This can be done w/o using script, here in combination with the :focus pseudo class and the immediate sibling selector +
Note, for an element other than form elements to get focus, it need the tab-index set.
Stack snippet
.container {
width: 500px;
height: 500px;
background-color: grey;
}
.box {
width: 150px;
height: 30px;
background-color: white;
position: relative;
top: 130px;
left: 10px;
color: black;
}
.window {
height: 300px;
width: 250px;
background-color: red;
position: absolute;
left: 200px;
transition: opacity 1s;
}
.box:focus + .window {
opacity: 0;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div tab-index="1" class="box" contenteditable="true">
</div>
<div class="window">
</div>
</div>
I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>
You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}
You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}