Develop Reference

reduce div width if sibling expands

I have two divs side by side within a parent div - the left div will contain text, while the right div will contain an image, and on button click, the right div can expand, or reduce back to its original width.
<style>
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
</style>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
javascript to expand/reduce the div:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$("#button1").attr('value','Expand');
}
});
Right now, when I increase the width of the right div, it slides underneath the left div. But what I want is for the left div to reduce in size accordingly, and take on the remaining width available within the parent, with left and right div remaining side by side.
JSFiddle
My css is weak, and I'm guessing this is something I can do in css, without having to use javascript to resize the left div too. Suggestions appreciated as always.

Your left div just wasn't being updated with the correct size so your container was more than 100%. I've fixed it here:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$(".left").animate({width:"38%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$(".left").animate({width:"60%"});
$("#button1").attr('value','Expand');
}
});
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>

not really good myself, but maybe something like http://jsfiddle.net/fd9pos8m/ ? not smooth though
<div style="padding:2px; width:500px; background: #FFFFFF ">
<div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div>
<div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div>
<div style="clear:both"></div>
<input type="button" id="button1" value="expand">
</div>
<script>
$('#button1').click(function(){
var val = $(this).val();
if(val == 'expand') {
$('.right').animate({width:'60%'});
$(this).val('reduce');
} else {
$('.right').animate({width:'38%'});
$(this).val('expand');
}
});
</script>

Here try this does this work? http://jsfiddle.net/CFNUJ/917/ the #right-bg { is staying to the #left-bg
the first is using just css

How about using css flexbox? You don't have to worry about that .left or .right jumps down when there's no enough space for them, it just handles that situation for you.
Do remember to check the browser support for flexbox though.
I only tweaked the css:
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
display: flex;
}
.left{
width: 60%;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
}
jsfiddle
http://jsfiddle.net/sen3t6vk/74/

Border or dotted line to connect 2 divs

I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:
JS fiddle code
and image of what I want to achieve:
Is this possible? If yes, then what should I add or change in my code?
Thanks.
Best regards,

Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.
https://jsfiddle.net/m3zoz34f/8/
.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}
.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>

Please check below:
P.S.: No Js, Just Css
.container{
position:relative;
}
.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="container">
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="line">
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
</div>

please fiddle I work on for you ... its little advance JS
but you can reuse it every where .
https://jsfiddle.net/m3zoz34f/6/
if you want to add new lines over here in html add
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
<path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555; fill:none; " />
##### over here add new <path like the one up and put special name ID
</svg>
</div>
then in the JS
function connectAll() {
// connect all the paths you want!
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
}
see this
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
#myNewPath : path name you put in html
#fromLine : ID or class of the first block
#toLine : ID or class of second block ....
and you can link as much blocks as you want
its responsive BTW .

Child div not resizing properly on change

i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE

Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo

You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle

jQuery Text Editor (JQTE)

I recently incorporated the jQuery Text Editor plugin (here), in my development of an MVC project.
It was straightforward to add the plugin. However when executing my View the text editor renders as follow:
This is the code I'm using in my View:
JS references (omit the greater than and less than characters due to it's not rendered in the question):
<script src="~/Scripts/jquery-1.11.1.min.js">
<script src="~/Plugins/jQuery-TE/jquery-te-1.4.0.min.js">
<link href="~/Plugins/jQuery-TE/jquery-te-1.4.0.css" rel="stylesheet">
HTML:
<div class="row">
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
Executive Summary
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<textarea name="textarea" class="jqte-test" placeholder="Enter some text">
</textarea>
</div>
</form>
</div>
</div>
</div>
</div>
Script for the JQTE:
$('.jqte-test').jqte();
// settings of status
var jqteStatus = true;
$(".status").click(function () {
jqteStatus = jqteStatus ? false : true;
$('.jqte-test').jqte({ "status": jqteStatus })
});

I change the CSS rule
.jqte_tool.jqte_tool_1 .jqte_tool_label {
position:relative;
display:block;
padding:3px;
width:70px;
height:16px; /* change it to 20px; */
overflow:hidden; }
That's how it worked for me.

Maybe for someone else:
.jqte_tool.jqte_tool_1 .jqte_tool_label {
position:relative;
display:block;
padding:3px;
width:70px;
height:21px; /*change*/
overflow:hidden;
}
.jqte_tool_label{
padding-top: 1px !important; /*add*/
height: 25px !important; /*add*/
}
works for me!

.tab_point_decr, .tab_point_decr img, .tab_point_decr div {
overflow: visible !important; /*change*/
}
.jqte_toolbar {
overflow: auto !important;
padding: 3px 4px;
background: #EEE;
border-bottom: #BBB 1px solid;
position: inherit;
overflow: visible !important; /*add*/
height: 35px; /*add*/
}
.jqte_fontsizes {
height:auto; /*change*/
}
.jqte_cpalette {
z-index:20; /*add*/
}

New div slide down on click

Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}

this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/

Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none

Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}