We Keep Coding

Responsiveness layout - reorganizing divs

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>

jQuery Math Don't work [duplicate]

This question already has answers here:
Adding two numbers concatenates them instead of calculating the sum
(24 answers)
Closed 5 years ago.
I'm trying to do quantity system and my code is :
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>
<script>
$('.ddd-plus').click(function(){
var $old = $('.quntity-input').val();
var $plus =($old +1);
// var $minus = $old - 1;
$('input').val($plus);
console.log($plus,$old);
});
</script>
<style>.sp-quantity {
width:124px;
height:42px;
font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
font-family:"ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
</style>
(by the way this code works only when I put the jquery to console,else it does not work.
So when I click plus, it should add 1 to input's value (example: if value of input it 1, it should 2 but it makes it 11)
How can I fix that? Thanks

You have to force the result to number, using unary operator.
var $plus = +$old + 1;
Another solution is to use parseInt method.
var $plus =parseInt($old,10) + 1;
Solution
$('.ddd-plus').click(function(){
var $old = $('.quntity-input').val();
var $plus =+$old +1;
$('input').val($plus);
});
$('.ddd-minus').click(function(){
var $old = $('.quntity-input').val();
var $plus =$old -1;
if($plus<0){
return;
}
$('input').val($plus);
});
.sp-quantity {
width:124px;
height:42px;
font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
font-family:"ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>

You can use the Unary plus (+) operator .
The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.
Unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number.
Code:
var $input = $('input'),
val = +$input.val();
$('.ddd-plus').click(function() {
$input.val(++val);
});
$('.ddd-minus').click(function() {
val && $input.val(--val);
});
.sp-quantity {width:124px;height:42px;font-family:"ProximaNova Bold", Helvetica, Arial;}
.sp-minus {width:40px;height:40px;border:1px solid #e1e1e1;float:left;text-align:center;}
.sp-input {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid black;float:left;}
.sp-plus {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid #e1e1e1;float:left;text-align:center;}
.sp-input input {width:30px;height:34px;text-align:center;font-family:"ProximaNova Bold", Helvetica, Arial;border: none;}
.sp-input input:focus {border:1px solid #e1e1e1;border: none;}
.sp-minus a, .sp-plus a {display: block;width: 100%;height: 100%;padding-top: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff">
<a class="ddd-minus" href="#">-</a>
</div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff">
<a class="ddd-plus" href="#">+</a>
</div>
</div>

$('.quntity-input').val() return string and you need to convert input values to number,
var $old = Number($('.quntity-input').val());
So your code should be,
$('.ddd-plus').click(function(){
var $old = Number($('.quntity-input').val());
var $plus =($old +1);
// var $minus = $old - 1;
$('input').val($plus);
console.log($plus,$old);
});
Make sure you check for isNaN because Number or parseInt will return NaN for invalid numbers

Or use parseInt:
var $old = parseInt($('.quntity-input').val(), 10);

Becuse you are using val() function of jquery, normally val() returns array containing value but if this not find anything it return null;
source:
http://api.jquery.com/val/
you can check your program from this link :
$('.ddd-plus').click(function() {
var old = $('.quntity-input').val();
var plus =(parseInt(old) +1);
$('.quntity-input').val(plus);
});
$('.ddd-minus').click(function() {
var old = $('.quntity-input').val();
var plus =(parseInt(old) -1);
$('.quntity-input').val(plus);
});
.sp-quantity {
width: 124px;
height: 42px;
font-family: "ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid black;
float: left;
}
.sp-plus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-minus {
width: 40px;
height: 40px;
border: 1px solid #e1e1e1;
border-left: 0px solid #e1e1e1;
float: left;
text-align: center;
}
.sp-input input {
width: 30px;
height: 34px;
text-align: center;
font-family: "ProximaNova Bold", Helvetica, Arial;
border: none;
}
.sp-input input:focus {
border: 1px solid #e1e1e1;
border: none;
}
.sp-minus a,
.sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
<div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1">
</div>
<div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></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

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image

Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet

Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}

Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

wrapping text in css div

Hi guys for some reason my text is not wrapping in Div, I have three divs placed inline-block and floating left. If i don't use floating left the the divs gets pushed down.
CSS code
#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}
#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;
text-align:left;
word-wrap: break-word;
float:left;
}
#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
}
HTML code here
<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">
testtesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">
</div>
</div>
<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>

#Section{display:inline-block;}

Fix can be found here: DEMO
Used word-wrap:break-word; on your innerSection with width:100%;