100% Height and Collapsible Sidebar
schone
I'm trying to create the following layout:
`- Header
`- Tab Panel
`- Sidebar
`- Workspace
`- Sidebar
`- Workspace
`- Toolbar
`- Workspace Area
Where the:
* Tab Panel fills the whole area (width and height)
* Toolbar is fixed position
* Sidebar, Workspace Area contains scrollable content within the
browser
I have tried doing this so far and I can get the layout going
perfectly but just not with 100% height, I have uploaded what I have
done so far here: http://www.prashantraju.com/pat/. Is there something
I'm missing here?
Also,
I'm trying to create a link that will toggle the sidebar area, is
there a way of combining a $('#sidebar').toggle() with elastic.js so
that it recalculate the layout?
I have been assessing a lot of frameworks and jQuery plugins for
layouts and so far elastic css seems to be the most lightweight and
"just makes sense" one out there - just hoping it can do the above as
well :)
Thanks in advance!
fernando trasvina
ok replace what you have in the body of you document for this:
<div class="unit">
header
</div>
<div class="unit">
tabs
</div>
<div class="unit elastic-height" style="background-color: red;">
<div class="container full-height">
<div class="on-2 columns full-height">
<div class="fixed column full-height main-sidebar" style="width: 300px; background-color: blue;">
sidebar
</div>
<div class="elastic column full-height" style="background-color: orange;">
content
</div>
</div>
</div>
</div>
<div class="unit">
footer
</div>
This will give you the basic layout you are looking for. i did not understand very well the rest of your needs so please be more specific if something is missing.
Now for the collapsible this is the most simple way to accomplish it:
$('.main-sidebar').bind('click', function(){
$(this).css('width', 0);
Elastic.refresh();
});
for the toogle well just do the same but set the width to the desired one.
> --
> You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
> To post to this group, send email to elastic-cs...@googlegroups.com.
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.
>
Prashant Raju
schone
After revisiting this I finally worked out that I was missing out on a
key CSS snippet :)
html,
body { height: 100% }
My final markup now looks like this and works across all browsers (and
is awesome!):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
<title>PAT</title>
<link rel="stylesheet" href="css/elastic.css" type="text/css"
media="all" charset="utf-8" />
<link rel="stylesheet" href="css/elastic.print.css" type="text/
css" media="print" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"
language="javascript" charset="utf-8"></script>
<script src="js/elastic.js" type="text/javascript"
language="javascript" charset="utf-8"></script>
<style type="text/css">
html,
body {
height: 100%;
}
#sidebar {
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#toggler').click(function(){
var width = $('#sidebar').width();
if(width == '0') {
$('#sidebar').width('300');
Elastic.refresh();
}else{
$('#sidebar').width('0');
Elastic.refresh();
}
return false;
});
})
</script>
</head>
<body>
header
</div>
<div class="unit">
tabs
</div>
<div class="unit elastic-height" style="background-color:
red;">
<div class="container full-height">
<div class="on-2 columns full-height">
sidebar
</div>
<div class="elastic column full-height"
style="background-color: orange;">
<a href="#" id="toggler">Toggle sidebar</a>
</div>
</div>
</div>
<div class="unit">
footer
</div>
</html>
No need for bloated javascript layout managers when you can use this
lightweight alternative!
Great work guys! I will keep you updated on the progress of my
application.
Prashant
On Oct 31, 8:48 am, Prashant Raju <prashant.g.r...@gmail.com> wrote:
> HI there,
>
> Thanks for the reply - I was able to get it working.
>
> However it breaks in both IE7 and IE8.
>
> Any ideas as to why this would be happening?
>
> Regards
> Prashant
>
> > .
> >http://groups.google.com/group/elastic-css-framework?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Elastic CSS Framework" group.
> > To post to this group, send email to
> > elastic-cs...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > .
> >http://groups.google.com/group/elastic-css-framework?hl=en.
>
> --
> Prashant Raju
fernando trasvina
> To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.