We Keep Coding

How do I create flexible div containers that marry float behavior with dynamic widths and heights?

I'm trying to create the below situation where the content_container's width reaches the right side of the screen and automatically scales depending on whether the expandable pane is collapsed or not. If I put width: 100% on .content_container it goes past the width of the screen, creating an unnecessary scroll bar as well as shifts to being under the expandable pane. Also you can see that the expandable_pane's height does not reach the full extent of the parent, but the content_container's does.
There is obviously something I'm not understanding on a fundamental level as I will admit that my grasp of various display types and behaviors is not solid and I'm still learning. Any help would be appreciated.
$(document).ready(function(){
$("#expandable_pane").click(function(){
if(this.className.search("collapsed") != -1){
this.className = this.className.replace("collapsed", "extended");
} else {
this.className = this.className.replace("extended", "collapsed");
}
})
})
.expandable_pane{
float: left;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
overflow: hidden;
white-space: nowrap;
height: 100%;
padding: 2px;
transition: width .5s;
}
.expandable_pane.collapsed {
width: 10px;
}
.expandable_pane.extended {
width: 500px;
}
.flex_container {
height: 300px;
}
.content_container{
float: left;
padding-left: 10px;
height: 100%;
}
.content_pane {
padding: 10px;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
<div class="expandable_pane collapsed" id="expandable_pane">
Menu Icons/Links would go here.
</div>
<div class="content_container">
<div class="content_pane">
Information for page here.
</div>
</div>
</div>

You aren't that far off with your code. First of all, your .flex_container class is missing display: flex. Secondly, if you want your container to take up the remainder of the space, it needs to be able to flex. If you give the container flex: 1 100px, which is a shorthand property, it tells the container to flex-grow: 1 with a flex-basis of 100px. With flexbox, you no longer need float: left in this scenario.
Try playing around with the values to get a better grasp of how flexbox can work and I also recommend reading the MDN articles on the property. MDN Flex
$(document).ready(function(){
$("#expandable_pane").click(function(){
if(this.className.search("collapsed") != -1){
this.className = this.className.replace("collapsed", "extended");
} else {
this.className = this.className.replace("extended", "collapsed");
}
})
})
.expandable_pane{
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
overflow: hidden;
white-space: nowrap;
height: 100%;
padding: 2px;
transition: width .5s;
}
.expandable_pane.collapsed {
width: 10px;
}
.expandable_pane.extended {
width: 500px;
}
.flex_container {
display: flex;
height: 300px;
}
.content_container{
padding-left: 10px;
flex: 1 100px;
height: 100%;
}
.content_pane {
padding: 10px;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
<div class="expandable_pane collapsed" id="expandable_pane">
Menu Icons/Links would go here.
</div>
<div class="content_container">
<div class="content_pane">
Information for page here.
</div>
</div>
</div>

How to change background of another div without affecting the first one

I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes
var Color = "#FF0";
function theFunction() {
if (Color == '#FF0') {
Color = '#F00';
} else {
Color = '#FF0';
}
document.getElementById('choose').style.backgroundColor = Color;
}
div#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
<div id="gameboard">
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
1
</div>
<div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
2
</div>
</div>
So what shall I do for the second div? Thanks

The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class.
function theFunction(e) {
e.classList.toggle("clicked");
}
#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
#gameboard div {
width: 240px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
background-color: #FF0;
cursor: pointer;
font-size: 130px;
text-align: center;
}
#gameboard div.clicked {
background-color: #F00;
}
<div id="gameboard">
<div onclick="theFunction(this);">
1
</div>
<div onclick="theFunction(this);">
2
</div>
</div>
This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.
You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.

Try this.
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">

First you gotta change
onclick="theFunction();"
to this
onclick="theFunction(this);"
And then your function will accept a parameter
function theFunction(element) {
[...]
element.style.backgroundColor=Color;
}
That parameter is the clicked element.

JAVASCRIPT: make class visible after other class has been clicked

I am making a simple php chatbox and am starting with the css/javascript first. What I want to do is when I click the header of the chat, the main part of the chat will slide up and show, and when I click the header again, it will go down, similar to the Facebook chat. I have tried things like
$(".chatheader").on("click", function () {
$(".chatcontainer").style.display = 'visible';
}
but none of them work, here are my codes
HTML
<div id="chatbox">
<div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
<div class="chatcontainer">
test
</div>
</div>
CSS
#chatbox {
right: 0;
bottom: 0;
position: absolute;
padding-right: 50px;
}
.chatcontainer {
height: 360px;
width: 320px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
float: right;
top: 100%;
display: none;
}
.chatheader {
font-family:'PT Sans';
background: #00b4ff;
width: 322px;
height: 51px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
bottom: 360;
}
.chatheadertext {
padding-top: 15px;
padding-left: 15px;
color: #fff;
}
DEMO
I have display: hidden; on my .chatcontainer and I would like to use javascript to make the display visible when .chatheader is clicked. Thanks in advance to anyone who can help!

You can use .slideToggle():
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
Updated Fiddle
Final code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".chatheader").on("click", function () {
$("#chatcontainer").slideToggle();
});
});
</script>

Use the jQuery slideDown() method:
$(".chatcontainer").slideDown();
And use slideUp() to hide it later.

How to get Content Editable div width while writing text inside it?

I am working on a project of HTML and javascript. I have follwing code:-
<html>
<head>
<style type="text/css">
.mainDiv
{
border:1px solid black;
width:500px;
height:340px;
left:400px;
position: absolute;
}
.textOutsideDiv
{
border: 1px dashed black;
position: absolute;
display: none;
width:20px;
height: 20px;
}
.textInsideDiv {
position:absolute;
display:none;
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: Arial,Helvetica;
line-height: 1em;
margin: 0;
min-height: 1em;
min-width: 1px;
outline: medium none;
padding: 2px;
position: relative;
white-space: nowrap;
z-index: 2;
}
</style>
<script type="text/javascript">
function makeTextCanvas(e)
{
var mouseX=e.pageX-401;
var mouseY=e.pageY-9;
var existOrNot=document.getElementById('textOutsideDiv').style.display;
if(existOrNot=="" || existOrNot=="none")
{
var outerContainer=document.getElementById('textOutsideDiv');
var innerContainer=document.getElementById('textInsideDiv');
outerContainer.style.display='block';
outerContainer.style.left=mouseX+'px';
outerContainer.style.top=mouseY+'px';
innerContainer.style.display='block';
}
}
function makeDiv()
{
//alert("Write Inside");
var outerContainer=document.getElementById('textOutsideDiv');
var innerContainer=document.getElementById('textInsideDiv');
var h=innerContainer.offsetHeight;
outerContainer.style.height=h+'px';
}
</script>
</head>
<body>
<div id="mainDiv" class="mainDiv" onclick="makeTextCanvas(event);">
<div id="textOutsideDiv" class="textOutsideDiv">
<div id="textInsideDiv" class="textInsideDiv" contenteditable="true" onkeyup="makeDiv();" style="font-size: 1em; color: rgb(0, 170, 0);"></div>
</div>
</div>
</body>
</html>
On changing content inside div, i am increasing outerContainer div's height but i am facing a problem in getting width of Content Editable div. How can i solve this problem?

First of all you say that you want to get width of the inner div, but actually you are trying to get innerContainer.offsetHeight. Second, adding text to an element that has its width set to auto does not stretch it if its parent element has fixed width.
If I understood correctly what you were trying to achieve, you want to expand your pseudo-textbox while the user is typing. Here is how you can expand it: http://jsfiddle.net/LwCWM/1/ , but there should be a better way of getting width of the text since non-monospace fonts have letters of various widths.

Width absorbing HTML elements

Im trying to think how to do this with html elements.
There is nothing special about the colors, so I don't need to make them images.
Do note that the text is right aligned. Also, the color bar goes up to the text from the left.
So this could be implemented by having the text float right with background color white, and a div with the background color set right next to it (and then a clear).
Or instead of floats, I can do text align-right and get a similar effect.
Here is the kicker.
I'm using a javascript library (shouldn't matter which one) to create an animation. The animation is the bars shrink to the left, and end up like so:
The problem with the float or text-align methods are that too many values have to be changed to transition between the two states. The javascript animation effects tend to want to change a couple predefined values, like width or font-size. In order to transfer from picture 1 to picture 2 using the float or text-align methods, I must remove the floating/text-align then set the width of the bar color, but that doesn't work if I want to keep the javascript overhead minimal for such a simple task.
I've tried absolute positioning/widths, but I can't get anything to make the text right aligned AND have the bars meet at the same point on the left.
I'm hoping maybe I'm just blind of a simple solution, but as I see it, I need one element that has the text positioned to the right somehow, and an element that takes up as much room possible beside it for the color... AND the element that has the color should be able to take a width, while having the text follow beside it.
Thank you.

Here's my attempt. Note: to the horror of some anti-table zealots this does use tables. Floats just can't do "take up all available space" like tables can.
<html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("th").animate({ width: 0 }, 2000);
});
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>
I thought of a non-tables way of doing it that works pretty well, so here it is:
<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$(function() {
$("div.text").animate({ width: "90%" }, 2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>

This is tested and it works perfectly (no stupid tables and very simple CSS/jQuery):
<style type="text/css">
.crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; }
.crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; }
#red { background-color:red; }
#blue { background-color:blue; }
#green { background-color:green; }
#yellow { background-color:yellow; }
#pink { background-color:pink; }
#grey { background-color:grey; }
</style>
<script type="text/javascript">
$(function() {
$('.crazy_slider').hover(
function() {
var bar_width = $(this).width();
var $crazy_slider_text = $(this).children('.crazy_slider_text');
if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) {
var original_width = $crazy_slider_text.width();
$crazy_slider_text.data('original_width',original_width);
}
$crazy_slider_text.stop().animate({width:95+'%'},500);
},
function() {
var $crazy_slider_text = $(this).children('.crazy_slider_text');
var text_width = $crazy_slider_text.data('original_width');
$crazy_slider_text.stop().animate({width:text_width+"px"},500);
}
);
});
</script>
<div class="crazy_slider_text">FOO</div>
<div class="crazy_slider_text">BAR</div>
<div class="crazy_slider_text">BAZ</div>
<div class="crazy_slider_text">FOOBAR</div>
<div class="crazy_slider_text">FOOBARBAZ</div>
<div class="crazy_slider_text">BAZAGAIN</div>
Edit:
I was assuming you were tying to make some kind of navigation elements with these so I added the mouse interaction logic. In any case, it might be useful, haha?
Second Edit:
I've changed the code to be more efficient and more predictable... if anyone cares. ;)

Do the coloured bars need to be a particular width, or just fill the space between the words on the right and the origin on the left? Assuming that my assumption's correct:
<style>
#container {width: 50%;
margin: 0 auto;
}
span {width: 100%;
display: block;
text-align: right;
margin: 0.2em 0;
}
span p {text-align: right;
background-color: #fff;
color: #333;
display: inline-block;
padding: 0 0 0 0.4em;
line-height: 1.4em;
font-weight: bold;
}
span#foo {background-color: #f00;
}
span#bar {background-color: #0f0;
}
span#foobar {background-color: #00f;
}
</style>
<div id="container">
<span id="foo">
<p>foo</p>
</span>
<span id="bar">
<p>bar</p>
</span>
<span id="foobar">
<p>foobar</p>
</span>
</div>
Working demo: http://davidrhysthomas.co.uk/so/colouredfoobars.html