We Keep Coding

how to set a div made of 3 buttons that in the moment in which the broswer's window is shrunk turns into a pop-up menu

I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.

You can define #media in your css.
An example has been set here:
https://jsfiddle.net/jfgm9r2v/8/
The html code is like this:
<div class="hideOnSmall">
<button>Text1</button>
<button>Text2</button>
<button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
<button>MyHambuger</button>
</div>
The magic happens in the css:
.hideOnSmall {
display: block;
}
.displayOnSmall {
display: none;
}
#media only screen and (max-width: 768px) {
.displayOnSmall {
display: block;
}
.hideOnSmall {
display: none;
}
}

How to immediately update computed styles when a new media rule is applied?

I'm working on a dynamic responsive ad which has various media rules to account for different possible ad sizes. Depending on the size of the page, different content will show.
I've set up some JS conditions which will apply different styles when there's no price, if a media rule which is showing a particular element is active.
This works fine, unless the page is resized after loading. When the page width is modified enough activate a different media rule, the JS styles from the old media rule still remain, which I don't want.
Here is a very simplified/generic example:
var item = document.getElementById("item");
var itemPrice = document.getElementById("price");
var itemIntro = document.getElementById("intro");
var priceDisplayValue = itemPrice.style.display;
var introAlpha = window.getComputedStyle(itemIntro).getPropertyValue("opacity");
if ((introAlpha == "1") && priceDisplayValue == "none") {
item.style.background = "#0099cc";
itemIntro.style.fontSize = "3em";
}
.ad{
position: absolute;
width: 100%;
height: 100%;
background: #ccc;
font-size: 2em;
text-align: center;
color: #333;
}
.item{
position: absolute;
width: 100%;
height: 100%;
background: #AAA;
}
#intro {
opacity: 0;
}
#media (min-width: 600px){
#intro{
opacity: 1;
}
}
<div class="ad">
<div class="item item1" id="item">
<p class="intro" id="intro">Item1 intro text</p>
<p class="price" id="price" style="display: none;">Price</p>
<p class="details" id="details">Learn more</p>
</div>
</div>
When the page is wider than 600px, if the price isn't displayed, the background color changes from gray to blue and the font size will increase.
I'm just trying to figure out how to reset the computed styles if the media rule changes and the original condition is no longer true.
Any insight is much appreciated.

Make flexbox sidebar div width increase/decrease via drag

I have a simple 3 column layout with a left sidebar, content area, and right sidebar. I am using flexbox to handle widths. I would like to make it so that when a user drags the right border of the left sidebar, the div can be resized. I would prefer a css solution if it makes sense but am open to javascript or jquery. Whichever approach is easiest for me to understand : )

Here is a possible solution using the css resize property (click Run code snippet to see the result).
Notes:
The resize handler is in the bottom right corner of the left sidebar
The resize property is not yet fully supported by all browser (~74% see caniuse)
The styles for the resize handler are still limited (see this question)
.container {
height: 500px;
display: flex;
}
.left-sidebar {
display: flex;
flex-direction: row;
background-color: #364F6B;
color: #fff;
/* This is for resizing */
overflow: scroll;
resize: horizontal;
}
.center-aria {
background-color: #3FC1C9;
flex-grow: 2;
}
.right-sidebar {
background-color: #FC5185;
}
.left-sidebar, .right-sidebar, .center-aria {
padding: 8px;
}
<div class="container">
<div class="left-sidebar">
Left Sidebar - Resize me
</div>
<div class="center-aria">Center Aria</div>
<div class="right-sidebar">Right Sidebar</div>
</div>

fluid div next to two fixes div's (that have changing size)

I have three div's.
the first two are fixes width,but there width should not be set to permanent size because it could change. (base of the length of text that is there)
then next to those two I have a fluid div that will change his width dynamically when the user change his window size.
how can I set this kind of structure to work? even with the use of javascript
thanks.

I don't think you can have fixed width divs that resize dynamically unless you use javascript. Have you played around with min-width and max-width css attributes?

Have a look at this demo:
for a markup like this:
<div id="contentwrapper">
<div id="contentcolumn">
...
</div>
</div>
<div id="leftcolumn">
...
</div>
<div id="rightcolumn">
...
</div>
CSS
#contentwrapper {
float: right;
width: 100%;
margin-left: -430px;
}
#contentcolumn {
margin-left: 430px;
}
#leftcolumn {
float: left;
width: 230px;
background: #C8FC98;
}
#rightcolumn {
float: left;
width: 200px;
background: #FDE95E;
}
An example: http://jsfiddle.net/sw9422oy/
IF you don't want to set a fixed width then you should use a fluid-fluid-fluid approach like this one: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/

Table Cell won't align vertically and horizontally

Good morning everyone!
I was hoping if any you masters would be able to assist - I have a div on a site I am building which has been applied with a CSS of "height: 100%" and been given the "display: table" property. There is another div within this div with a "display: table-cell" and a "vertical-align: middle". However, this code is not centering vertically? Additionally, I have a "margin-left: auto" and a "margin-right: auto" applied yet it does not center horizontally either as it should - any thoughts?
I have 4 animations on the page but the one I am working on right now will only display for mobile phones, so you will either need to use this (http://mobiletest.me/#d=iPhone_5_portrait&u=http:// energyamplified.co.za/home.php) or make sure your view port when visiting (http:// energyamplified.co.za/home.php) is within 227-449 pixels wide.
The CSS:
#animation_wrapper {
height: 100%;
display: table;
}
#media only screen and (min-width: 227px) and (max-width: 449px) { /* Very Small Animation */
div #frameContainer_very_small {
display: table-cell;
vertical-align: middle;
padding-top: 25%;
margin-left: auto;
margin-right: auto;
}
div #frameContainer_very_small iframe {
width: 100%;
height: 100%;
display: block;
}
}
The HTML/JS (which in this viewport, the css elsewhere on the site loads the iframe "animation_very_small.html":
<div id="animation_wrapper">
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"
var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>"
var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>"
}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>
Your time and assistance would be greatly appreciated.
Kind regards,
Byron

Okay, one of the other divs was causing an issue and after I added the height as suggested, it is working now. Thank you for your direction Mr Lister - feel free to add this as an answer if you want me to mark it for you.