How to reorder divs / alter markup at breakpoints - javascript

I have two divs displayed inline-block beside each other, each with 45% width. At a certain break-point their widths are both changed to 100%, causing them to stack. This is obviously super simple. My question is this: how can I alter the markup at said break-point to cause what would be the bottom div to appear on top?
My existing markup relies heavily on inline-block level display, and I'd prefer to not switch things over to flexbox site-wide at this time. Thus, I am after a solution which uses inline-block.
Consider this simple example:
.left, .right {
display:inline-block;
width:45%;
text-align:center;
}
.left {
background-color:tomato;
}
.right {
background-color:aquamarine ;
}
p {
padding:50px 0;
}
#media only screen and (max-width: 550px) {
.left, .right {
width:100%;
}
}
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
Everything works great here, but my desired result is that the RIGHT div appears on top of the LEFT div after the break-point. I can obviously achieve this using flexbox to reorder the divs, but that would require hours and hours of work to switch everything over to support this display property. I need an inline-block solution. Thoughts appreciated.

You can use display: flex; css property. The basic approach would be to set the parent element (e.g., container) to display: flex; this generates the flexbox and allows you to set different parameters for the children like
.right{
order: 1;
}
.left{
order: 2
}
Depending on what browsers you need to support your website, you could use the flex-box. check the flex box support here
.left,
.right {
display: inline-block;
width: 50%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 100px 0;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
.container {
flex-direction: column
}
.right {
order: 1;
}
.left {
order: 2
}
}
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Update
You can use rotate() transform functions to get your desired result. Working demo below:
.left,
.right {
display: inline-block;
width: 45%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 50px 0;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
.container {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.container>div {
display: block;
margin: 0 auto 5px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
}
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>
Update 2 Using jQuery
$(window).resize(function() {
if ($(window).width() <= 550) {
$('.left').remove().insertAfter($('.right'));
} else {
$('.left').remove().insertBefore($('.right'));
}
})
.left,
.right {
display: inline-block;
width: 45%;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: aquamarine;
}
p {
padding: 50px 0;
}
#media only screen and (max-width: 550px) {
.left,
.right {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class="left">
<p>LEFT</p>
</div>
<div class="right">
<p>RIGHT</p>
</div>
</div>

Use float to specify the placement of the div, then switch the divs on your html so that the right is above of the left
.left, .right {
display:inline-block;
width:45%;
text-align:center;
}
.left {
background-color:tomato;
float:left;
}
.right {
background-color:aquamarine ;
float:right;
}
p {
padding:50px 0;
}
#media only screen and (max-width: 550px) {
.left, .right {
width:100%;
}
}
<div class="right">
<p>RIGHT</p>
</div>
<div class="left">
<p>LEFT</p>
</div>

I would suggest you can use display flex since they provide a lot of benefits in aligning, positioning etc.
I've created a solution for your problem, By wrapping the .left and .right inside a flex container, and changing the flex-direction accordingly.
.container
{
display:flex;
flex-direction:column;
justify-content:flex-start
}
#media only screen and (max-width: 550px) {
.container
{
display:flex;
flex-direction:column-reverse;
justify-content:flex-start
}
}
I've created a working fiddle for better understanding: https://jsfiddle.net/Baliga/pqo69s3t/2/

If you want a solution without using flex, they the only way you can achieve by using css is by making the div absolute positioning, but the height and top|bottom value has to be defined accordingly.
Otherwise, Using javascript is the only way to do it. Example:
leftDiv = document.getElementById( 'left' );
rightDiv = document.getElementById( 'right' );
fd.parentNode.removeChild( leftDiv );
sd.parentNode.insertAfter( leftDiv, rightDiv );
You can trigger this at a particular viewport width and get your div's order switch.

Related

Centering via setAttribute for Firefox [duplicate]

How can I horizontally center a <div> within another <div> using CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
With flexbox it is very easy to style the div horizontally and vertically centered.
#inner {
border: 0.05em solid black;
}
#outer {
border: 0.05em solid red;
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
To align the div vertically centered, use the property align-items: center.
Other Solutions
You can apply this CSS to the inner <div>:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
If you don't want to set a fixed width on the inner div you could do something like this:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
That makes the inner div into an inline element that can be centered with text-align.
The best approaches are with CSS3.
The old box model (deprecated)
display: box and its properties box-pack, box-align, box-orient, box-direction etc. have been replaced by flexbox. While they may still work, they are not recommended to be used in production.
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
According to your usability you may also use the box-orient, box-flex, box-direction properties.
The modern box model with Flexbox
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Read more about centering the child elements
CSS Box Model Module Level 3
Box model (CSS2)
box-align on MDN
And this explains why the box model is the best approach:
Why is the W3C box model considered better?
#centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
<div id="outer" style="width:200px">
<div id="centered">Foo foo</div>
</div>
Make sure the parent element is positioned, i.e., relative, fixed, absolute, or sticky.
If you don't know the width of your div, you can use transform:translateX(-50%); instead of the negative margin.
With CSS calc(), the code can get even simpler:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
The principle is still the same; put the item in the middle and compensate for the width.
I've created this example to show how to vertically and horizontally align.
The code is basically this:
#outer {
position: relative;
}
and...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
And it will stay in the center even when you resize your screen.
Some posters have mentioned the CSS 3 way to center using display:box.
This syntax is outdated and shouldn't be used anymore. [See also this post].
So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.
So if you have simple markup like:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
...and you want to center your items within the box, here's what you need on the parent element (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
If you need to support older browsers which use older syntax for flexbox here's a good place to look.
If you don't want to set a fixed width and don't want the extra margin, add display: inline-block to your element.
You can use:
#element {
display: table;
margin: 0 auto;
}
Centering a div of unknown height and width
Horizontally and vertically. It works with reasonably modern browsers (Firefox, Safari/WebKit, Chrome, Internet & Explorer & 10, Opera, etc.)
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Tinker with it further on Codepen or on JSBin.
Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways. Don't be afraid to experiment; it's not like you'll break anything.
It cannot be centered if you don't give it a width. Otherwise, it will take, by default, the whole horizontal space.
CSS 3's box-align property
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
The way I usually do it is using absolute position:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
The outer div doesn't need any extra properties for this to work.
I recently had to center a "hidden" div (i.e., display:none;) that had a tabled form within it that needed to be centered on the page. I wrote the following jQuery code to display the hidden div and then update the CSS content to the automatic generated width of the table and change the margin to center it. (The display toggle is triggered by clicking on a link, but this code wasn't necessary to display.)
NOTE: I'm sharing this code, because Google brought me to this Stack Overflow solution and everything would have worked except that hidden elements don't have any width and can't be resized/centered until after they are displayed.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
For Firefox and Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
For Internet Explorer, Firefox, and Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
The text-align: property is optional for modern browsers, but it is necessary in Internet Explorer Quirks Mode for legacy browsers support.
Use:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Another solution for this without having to set a width for one of the elements is using the CSS 3 transform attribute.
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
The trick is that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.
Here's a Fiddle showing horizontal and vertical alignment.
More information is on Mozilla Developer Network.
Chris Coyier who wrote an excellent post on 'Centering in the Unknown' on his blog. It's a roundup of multiple solutions. I posted one that isn't posted in this question. It has more browser support than the Flexbox solution, and you're not using display: table; which could break other things.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
I recently found an approach:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Both elements must be the same width to function correctly.
For example, see this link and the snippet below:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
If you have a lot of children under a parent, so your CSS content must be like this example on fiddle.
The HTML content look likes this:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Then see this example on fiddle.
Centering only horizontally
In my experience, the best way to center a box horizontally is to apply the following properties:
The container:
should have text-align: center;
The content box:
should have display: inline-block;
Demo:
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
See also this Fiddle!
Centering both horizontally & vertically
In my experience, the best way to center a box both vertically and horizontally is to use an additional container and apply the following properties:
The outer container:
should have display: table;
The inner container:
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box:
should have display: inline-block;
Demo:
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
See also this Fiddle!
Flexbox
display: flex behaves like a block element and lays out its content according to the flexbox model. It works with justify-content: center.
Please note: Flexbox is compatible all browsers exept Internet Explorer. See display: flex not working on Internet Explorer for a complete and up to date list of browsers compatibility.
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Text-align: center
Applying text-align: center the inline contents are centered within the line box. However since the inner div has by default width: 100% you have to set a specific width or use one of the following:
display: block
display: inline
display: inline-block
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Margin: 0 auto
Using margin: 0 auto is another option and it is more suitable for older browsers compatibility. It works together with display: table.
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Transform
transform: translate lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. To center horizontally it require position: absolute and left: 50%.
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center> (Deprecated)
The tag <center> is the HTML alternative to text-align: center. It works on older browsers and most of the new ones but it is not considered a good practice since this feature is obsolete and has been removed from the Web standards.
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
This method also works just fine:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
For the inner <div>, the only condition is that its height and width must not be larger than the ones of its container.
The easiest way:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
Flex have more than 97% browser support coverage and might be the best way to solve these kind of problems within few lines:
#outer {
display: flex;
justify-content: center;
}
If width of the content is unknown you can use the following method. Suppose we have these two elements:
.outer -- full width
.inner -- no width set (but a max-width could be specified)
Suppose the computed width of the elements are 1000 pixels and 300 pixels respectively. Proceed as follows:
Wrap .inner inside .center-helper
Make .center-helper an inline block; it becomes the same size as .inner making it 300 pixels wide.
Push .center-helper 50% right relative to its parent; this places its left at 500 pixels wrt. outer.
Push .inner 50% left relative to its parent; this places its left at -150 pixels wrt. center helper which means its left is at 500 - 150 = 350 pixels wrt. outer.
Set overflow on .outer to hidden to prevent horizontal scrollbar.
Demo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
You can do something like this
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
This will also align the #inner vertically. If you don't want to, remove the display and vertical-align properties;
Here is what you want in the shortest way.
JSFIDDLE
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
You can use display: flex for your outer div and to horizontally center you have to add justify-content: center
#outer{
display: flex;
justify-content: center;
}
or you can visit w3schools - CSS flex Property for more ideas.
Well, I managed to find a solution that maybe will fit all situations, but uses JavaScript:
Here's the structure:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
And here's the JavaScript snippet:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
If you want to use it in a responsive approach, you can add the following:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
One option existed that I found:
Everybody says to use:
margin: auto 0;
But there is another option. Set this property for the parent div. It
works perfectly anytime:
text-align: center;
And see, child go center.
And finally CSS for you:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}

Transition for side menu in mobile version has problem when I press close

On the website down below, when I close the side menu in mobile, I can see the body of the menu close faster than the texts and search icon. Why did this happen? Why they don't close together?
I used the Divi plugin on WordPress but I think there isn't any conflict.
It opens and closes smoothly and well on the desktop.
https://wordpress-602494-1949747.cloudwaysapps.com/
<script>
let isMenuOpen = false;
const menuHandler = document.querySelector('.menu_left_handler');
const menuTitle = document.querySelector('.menu_left_title');
const menuRight = document.querySelector('.menu_right');
menuHandler.addEventListener('click', () => {
isMenuOpen ? menuRight.classList.remove('menu_right__open') : menuRight.classList.add('menu_right__open');
isMenuOpen = !isMenuOpen;
menuHandler.innerText === '☰' ? (menuHandler.innerText = '✕') : (menuHandler.innerText = '☰');
menuTitle.innerText === 'MENY' ? (menuTitle.innerText = 'STÄNG') : (menuTitle.innerText = 'MENY');
});
let x = window.matchMedia("(max-width: 768px)")
function mediaQ(x) {
if (x.matches) {
menuHandler.addEventListener('click', () => {
let mobileMenu = document.getElementById("menuId")
mobileMenu.classList.toggle("menu_right__open");
});
}
}
#menuId {
background: #171717;
border-radius: 0 1rem 1rem 0;
padding: 1rem;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
color: #fff;
font-family: 'museo-sans', sans-serif !important;
height: 30rem;
}
.menu {
height: 25rem;
}
#menu a {
color: #fff;
}
.menu_right {
max-width: 0;
overflow: hidden;
transition: max-width 0.3s;
}
.menu_right__open {
max-width: 100rem !important;
height: 25rem;
transition: max-width 2s;
}
.menu_right ul {
list-style: none;
width: 20rem;
padding-top: 5rem;
padding-left: 2rem;
line-height: 35px;
}
.menu_right ul a {
display: block;
text-decoration: none;
margin: 1rem 0;
font-size: 20px;
}
.menu_right ul a:hover {
color: #F7B660 ;
}
.menu_left {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
font-size: 20px;
}
.menu_left_title {
font-family: 'museo-sans', sans-serif !important;
font-size: 20px;
writing-mode: tb-rl;
transform: rotate(-180deg);
margin-top: 1rem;
padding: 0.3rem;
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 35px;
}
#media screen and (max-width: 768px) {
#menuId {
height: 5rem;
}
.menu {
height: 5rem;
}
.menu_left_title {
display: none;
}
.menu_right__open {
height: 26rem !important;
overflow-y: none !important;
border-radius: 2px;
transition: max-width 4s;
}
.menu_right {
transition: max-width 0.3s;
}
.menu_right ul a {
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 18px;
}
}
<body>
<div id="menuId" class="menu">
<div class="menu_left">
<div class="menu_left_handler">☰</div>
<div class="menu_left_title">MENY</div>
</div>
<div class="menu_right">
<div class="et_pb_with_border et_pb_module et_pb_search et_pb_search_0_tb_header et_pb_text_align_left et_pb_bg_layout_light et_pb_hide_search_button">
<form role="search" method="get" class="et_pb_searchform" action="https://wordpress-602494-1949747.cloudwaysapps.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" name="s" placeholder="" class="et_pb_s">
<input type="hidden" name="et_pb_searchform_submit" value="et_search_proccess">
<input type="hidden" name="et_pb_include_posts" value="yes">
<input type="hidden" name="et_pb_include_pages" value="yes">
<input type="submit" value="Search" class="et_pb_searchsubmit" style="">
</div>
</form>
</div>
<nav>
<ul><strong>
<li>Robotlösningar</li>
<li>Made by Andon</li>
<li>Eftermarknad</li>
<li>Kontakt</li>
<li>Om Andon Robotics</li>
</strong>
</ul>
</nav>
</div>
</div>
</body>
This will because you are not transitioning the height when you are closing the div causing it to snap closed, as you are just transitioning the max-width this will cause the width the issue you are facing.
Firstly i would add your transition to your div with the ID of menuID rather than the actual class you are adding on click. Play around with it but you need to transition the height as well as the width otherwise the height is just going to snap. Maybe look into doing your transitions something like this. The example im giving you isnt a 100% fix but it is going to point you in the direction you need to go in order to understand your issue
transition:max-width 0.4s, height 0.4s;
as #Stevo stated below this, that is mainly the problem. However, if you intend to animate the whole menu altogether as its expanding smoothly and consistently from one point of origin I'd suggest you either use transform:scale(); to animate its growth, or you translate the whole panel from top-left to bottom-right fading the content as it comes into the viewport.
The problem with this:
transition:max-width 0.4s, height 0.4s;
Is that you are only stating the time or the animation to run but your width and height are different. Therefore it will not expand consistently.
Also, do not try to make it expand synchronously by editing the time values because it is 1) a terrible approach, and 2) all works fine until you add something to the menu and the height changes.

Scale transition in four divs

This question is related to one that i have already created transition-in-div . I didnot get answer for my next issue there so i decided to create new question.
I have four boxes and i want the transition effect in all four boxes.
What i want is whenever i click on any box, the width of that box must increase from its side to the left and right to fit the full width. Right now it only fills some portion of width.
My Code is
<html>
<head>
<title>Transition</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 25% 75%;
}
#third {
background-color: aqua;
transform-origin: center center;
}
#fourth {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(4);
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
<div id="fourth" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
});
</script>
Jsfiddle
There's a small mathematical error, you are scaling each div to 4x when their size is 20% so their new size is now 80% instead of the full 100% width.
Please consider the following fiddle: https://jsfiddle.net/m157u2yw/7/
For previewing purposes I've made it so if you click on an expanded box it resets back so you can quickly play with it.
I'm using width instead of scale as it will be useful in case these squares actually have some content inside (scaling would distort it).
I'm also adding another class .scale-down to the not-clicked divs to make sure they also animate out leaving the full space to the expanded one.
Just tweak around your CSS a lil bit:
Since your .box width is 20%, your scaleX() is 5,
Then just go ahead and fix your Transform-origins so it covers out correctly:
https://jsfiddle.net/m157u2yw/8/
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 33.33%;
}
#third {
background-color: aqua;
transform-origin: 66.66%;
}
#fourth {
background-color: blue;
transform-origin: 100%;
}
.scale {
transform: scaleX(5);
}
Why not put the boxes in containers and animate the width, something like this:
https://jsfiddle.net/pt1vk0c1/
<div class="container">
<div id="first" class="box-container">
<div class="box"> </div>
</div>
<div id="second" class="box-container">
<div class="box"> </div>
</div>
<div id="third" class="box-container">
<div class="box"> </div>
</div>
<div id="fourth" class="box-container">
<div class="box"> </div>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.box-container {
width:25%;
height: 200px;
}
.box {
width:80%;
height: 200px;
transition: width .5s;
transform-origin: 0 0;
}
#first .box {
background-color: red;
}
#second .box {
background-color: green;
transform-origin: 25% 75%;
}
#third .box {
background-color: aqua;
transform-origin: center center;
}
#fourth .box {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
width:100%;
}
Here's a solution that will work regardless of the number of boxes or their width. Better to avoid any magic numbers if possible.
Transition width instead of transform. You won't need any transform origins and it will work with any number of boxes regardless of the box size.
To make the width of the other boxes 0. You can add a class to the container.
Than use
.container.open .box:not(.scale) {
width: 0;
}
to set the width of any box without the class .scale to 0
http://codepen.io/flurrd/pen/xqmwLN
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 20%;
height: 200px;
transition: width .5s;
background-color: tomato;
}
.box:nth-child(odd) {
background-color: aquamarine;
}
.scale {
width: 100%;
}
.container.open .box:not(.scale) {
width: 0;
}
JS
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).toggleClass('scale');
$(".container").toggleClass('open')
});

How to cut off div gradually

How do I cut off "A Outer" or others such as div/img/some elements as the browser screen goes under "A"?
A pic is better than thousand words, so here's a pic...
A and A outer are the same class. it just A outer is the area that expand by the children.
If, as you said, the width of divs are fixed values, then you can use #media queries for this very easily.
#media (max-width=...px){
}
Andrew not sure if this is what you are trying to accomplish, but take a look at this fiddle - https://jsfiddle.net/moojjoo/ppz8et2r/2/
I made the width to be 300px instead of 100px. Simply resize the Window to see the effects. Your outer columns will be hidden.
HTML
.container {
width: 100%;
}
#left {
width: 33%;
float: left;
}
#middle {
width: 33%;
float: left;
}
#right {
width: 33%;
float: left;
}
#media screen and (max-width: 500px) {
body {
background-color: lightblue;
}
#left {
visibility: hidden;
}
#middle {
width: 100%;
float: left;
}
#right {
visibility: hidden
}
}
<div class="container">
<div id="left">This is my left outer div</div>
<div id="middle">This is my middle div</div>
<div id="right">This is my right outer div</div>
</div>

Responsive CSS div positioning priority

first of all I would like to thank the members of this community for the huge amount of help I
found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks.
Right now I got a problem with a responsive layout where I need your kind help:
I got a layout like this:
http://codepen.io/Buzzjump/pen/tfeys
<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>
Now the current CSS
div{
display:inline-block;
background-color:#cdcdcd;
margin:0px; 0;padding:0px;width:150px}
.d1{
float:right;
background: blue;
color: white;
}
.d2{
background: orange;
}
.mitte_rechts{
padding:0;
width:70.81%;
float: left;
margin-left:0px;
}
.sidebar_links{
height: 200px;
float: left;
background: red;
}
.outer{
height: 230px;
min-width: 80%;
background-color:yellow;
margin-left: 20px;
overflow: hidden;
}
There is an outer box (outer) and two inner boxes (Div1 and mitte_rechts). In 'mitte_rechts' there are two more boxes(Div 2, Div3) and they are all aligned. What I want is that when the window is scaled down to a breakpoint (768) first Div3 is display under Div2 in mitte_rechts. Maybe I'm just blockheaded but is there a solution for this?
To this point no JS is used.
Thanks in advance.
Try out the following:
.d1 {
float: right;
background: blue;
color: white;
}
.d2 {
background: orange;
float: left;
}
#media screen and (max-width: 768px) {
.d1, .d2 {
float: none;
display: block;
}
}
By the way: You don't need inline-block on your divs. Inline-block is an alternative to floating. So either use floating or inline-block. I'm not a fan of inline-block because IE6 and IE7 don't support it.
try the following:
1) remove width:70.81%;' from '.mitte_rechts
2) add the following styling:
.d1, .d2{
float:left;
}
#media (min-width: 768px){
.mitte_rechts{
width:70.81%;
}
.d1{
float:right;
}
}

Categories

Resources