Flexible div layout

I'm trying to write a layout where I have a toolbar and a main div. When the window Y axis is smaller than window X axis, the toolbar is on the left side. And when the window X axis is smaller than the window Y axis the toolbar is on the top. I've positioned the toolbar absolute at the top:0 and left: 0 and tried changing width and height properties on resize. But my code is not working.

Javascript:

window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;   
console.debug("x axis:" + winW  + "y axis:" + winH);

if(winW < winH){
   var elem = document.getElementById('div1');

    console.debug("test" + elem.style.width);

   var a = elem.style.height;
   elem.style.height = elem.style.width;
   elem.style.width = a;

}
else{
   var elem = document.getElementById('div1');

    elem.style.height = elem.style.height;
    elem.style.width = elem.style.width;
}
}

CSS:

#div1{
background: red;
position:absolute;
height:100%;
width:20px;
top:0;
left:0;
}
#div2{
width:100%;
height:500px;
background-color:green;
margin-left: 20px;
}

jsFiddle Example Here

Answers


Upvote for the media ratio ;)

More browser-compatible:

window.onresize = function(event) {
    winW = window.innerWidth;
    winH = window.innerHeight;

    console.debug("x axis:" + winW  + "y axis:" + winH);

    document.getElementById("div1").className = ( winW < winH ? "verticalMenu" : "horizontalMenu" );
}

// optionally invoke window.resize() once manually for setting it default. Or set a defaultClass on the div itself in HTML

and

.horizontalMenu {
    height:20px;
    width:100%;
}
.verticalMenu {
    height:100%;
    width:20px;
}

See this CodePen.


You can do this using @media screen and (min-aspect-ratio: 1/1) { ... }. Any styles inside this query will only activate when the window is as wide, or wider than it is high.

DEMO

I added this code, and removed all the JavaScript:

@media screen and (min-aspect-ratio: 1/1) { 
    #div1 {
        width: 100%;
        height: 20px;
    }

    #div2 {
        width: 100%;
        margin: 0;
     }                
}

Information can be found here on the MDN

Support for Media Queries can be found here, but as you can use JavaScript I would recommend using Respond.js to make them work for all users.


Need Your Help

Decimal <li> CSS (1.2)

css

I'm seeing on this site: http://www.modernizr.com/docs/ how they have a decimal list item that actually shows the decimals. I've used firebug and can't seem to determine exactly how it's done. It's

How to display html table single column into multiple columns?

javascript html css table

I have a simple table with 1 big column. I want to display this single columns into multiple columns. Currently I have like as follows

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.