Responsiveness layout - reorganizing divs - javascript

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>

Related

How to show 6 different images every time the website is loaded?

I'm having a div which contains 10 images, when any one visit or reload the page any of the 6 images should be displayed in a random arrangement. Finally I come with random arrangements but I can't control the number of images and also the images are going out of the div. Is there any way to show 6 different images when in load the website every time
$(".image-box").html($(".image-box").children().sort(function() { return 0.5 - Math.random() }));
});
.image-box {
height: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
margin-top: 10px;
white-space: nowrap;
overflow: auto;
}
.image-box-title {
padding: 10px;
width: 2200px;
border-bottom: 1px solid #e5e5e5;
border-top: 0p;
border-right: 0px;
border-left: 0px;
border-radius: 8px 8px 0px 0px;
background-color: #583d72;
color: #ff8e71;
}
.tester {
display: inline-block;
width: 212px;
height: 200px;
margin: 5px 0 0 5px;
}
#a {
background-color: black;
}
#b {
background-color: yellow;
}
#c {
background-color: red;
}
#d {
background-color: green;
}
#e {
background-color: pink;
}
#f {
background-color: skyblue;
}
#g {
background-color: orange;
}
#h {
background-color: grey;
}
#i {
background-color: darkgreen;
}
#j {
background-color: darkblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-box" id="images">
<div class="image-box-title">Images</div>
<div id="a" class="tester"></div>
<div id="b" class="tester"></div>
<div id="c" class="tester"></div>
<div id="d" class="tester"></div>
<div id="e" class="tester"></div>
<div id="f" class="tester"></div>
<div id="g" class="tester"></div>
<div id="h" class="tester"></div>
<div id="i" class="tester"></div>
<div id="j" class="tester"></div>
</div>
You could define with CSS that all images are hidden with display: none and only the first 6 images are visible (first child is the title):
.tester:nth-child(2),
.tester:nth-child(3),
.tester:nth-child(4),
.tester:nth-child(5),
.tester:nth-child(6),
.tester:nth-child(7) {
display: inline-block;
}
Furthermore your title has a width of 2200px which seems to be unnecessary because it has display: block defined. Therefor you could omit the width (that was the reason for the images going out of the div).
Because the title is also a child of the image box it is also shuffled. Therefor you should make it the first child after shuffling:
$(".image-box").prepend($(".image-box-title").detach());
Working example:
$(".image-box").html($(".image-box").children().sort(function() {
return 0.5 - Math.random()
}));
$(".image-box").prepend($(".image-box-title").detach());
.image-box {
height: 100%;
border: 1px solid #e5e5e5;
border-radius: 8px;
margin-top: 10px;
white-space: nowrap;
overflow: auto;
}
.image-box-title {
padding: 10px;
/*width: 2200px; not necessary? */
border-bottom: 1px solid #e5e5e5;
border-top: 0p;
border-right: 0px;
border-left: 0px;
border-radius: 8px 8px 0px 0px;
background-color: #583d72;
color: #ff8e71;
}
.tester {
display: none;
width: 212px;
height: 200px;
margin: 5px 0 0 5px;
}
#a {
background-color: black;
}
#b {
background-color: yellow;
}
#c {
background-color: red;
}
#d {
background-color: green;
}
#e {
background-color: pink;
}
#f {
background-color: skyblue;
}
#g {
background-color: orange;
}
#h {
background-color: grey;
}
#i {
background-color: darkgreen;
}
#j {
background-color: darkblue;
}
.tester:nth-child(2),
.tester:nth-child(3),
.tester:nth-child(4),
.tester:nth-child(5),
.tester:nth-child(6),
.tester:nth-child(7) {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-box" id="images">
<div class="image-box-title">Images</div>
<div id="a" class="tester"></div>
<div id="b" class="tester"></div>
<div id="c" class="tester"></div>
<div id="d" class="tester"></div>
<div id="e" class="tester"></div>
<div id="f" class="tester"></div>
<div id="g" class="tester"></div>
<div id="h" class="tester"></div>
<div id="i" class="tester"></div>
<div id="j" class="tester"></div>
</div>

How to insert div after other div with if else condition

I want to move div after another div, if outer div's width is less then 800
$(function() {
if ($('.main').width() < "800 px") {
$(".one").insertBefore($(".two"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="overflow: hidden; border:solid 1px red; text-align: right; ">
<div class="two" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:500px;">buttons</div>
<div class="one" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:300px;">dropdown</div>
</div>
jQuery doesn't understand the string "800 px", it requires just the number 800.
Also, like others mentioned, try to keep your styles in css and not inline if you're using classes, it's easier to follow along with the code and edit the code in the future.
$(function() {
if ($('.main').outerWidth(true) < 800) {
$(".one").insertBefore($(".two"));
}
});
.main {
overflow: hidden;
border: solid 1px red;
text-align: right;
}
.two {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 500px;
}
.one {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="two">buttons</div>
<div class="one">dropdown</div>
</div>

How to put label inside input and make alwas visible

I need to do input like this, and word "seconds" should always stay visible and
unchangeable. How can I do that?
No JavaScripting needed here,
.round {
border:1px solid grey;
border-radius: 4px;
padding: 8px;
}
.round input {
border:0px solid black;
width: 40px;
margin-right: 8px;
}
.round label {
color: grey;
}
.container {
width: 200px;
}
<div class="container">
<div class="round">
<label><input type="text">seconds</input></label>
</div>
</div>
HTMLDog's CSS tutorial is a great one to follow.
#test{
width:100px;
border:1px solid #E0E0E0;
display:inline-block;
border-radius: 5px;
border-top:1px solid #BBDEFB;
}
input{
width:25px;
float:left;
border:none;
}
label{
color:#BDBDBD
}
input:focus{
outline: none;
}
<div id="test">
<div>
<input type="text">
</div>
<div>
<label>Seconds</label>
</div>
</div>

Push other divs to the right

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

Flickering Lines when moving div from Javascript; pixel perfect CSS?

Please take a look at this JSFiddle:
https://jsfiddle.net/a08vkmew/light/
I created a compass with CSS/Html/Javascript that reacts to horizontal mouse movement on the page.
If you move the mouse slowly you will see that the lines change their width slightly which results in a flickering appearance of the compass.
I think this effect occurs when a line does not exactly match up with the according pixels on the screen, so that only half the width of the line can be shown.
In some GUI frameworks we can choose to display the GUI as pixel perfect. Is something like this possible within CSS?
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
}
.arrow.down {
margin-left:-0.5em;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 1em solid dodgerblue;
top: 0em;
}

Categories