acordeon al tamaño de panatalla estoy implementando un menu tipo acordeon
pero quiero que tome el alto de la pagina eh igual
cuando haga un resize
este es el menu
http://bassistance.de/jquery-plugins...gin-accordion/
demos
http://jquery.bassistance.de/accordion/demo/
este es mi script
Código:
y este es mi body
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="../jquery.accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// simple accordion
/*jQuery('#list1a').accordion({
fillSpace: true
});*/
jQuery('#list1a').accordion();
// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#list1a');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
//--------------------
var windowHeight = getWindowHeight();
var logo = ($("#opera").height());
//para el contenedor de menus general
var alto_pantalla = (windowHeight - logo - 5) + "px";//ajustamos para que no sean tan ajustados le quitamos 5 px mas
$("#list1a").css("height",alto_pantalla);
//para los modulos
//-----------------
/*$("[id^=sublista_]").each(function(i)
{
var ident = $(this).attr("id");
var alto_pantalla = (windowHeight - alto_pantalla) + "px";
$("#"+ident).css("height",alto_pantalla);
});*/
});
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
</script>
Código:
solo he podido logra que el contenedor tome el tamaño de pantalla pero aun<div id="opera" style="background:#0F0">
<div class="user">
<img src="img/avatar.png" width="44" height="44" class="hoverimg" alt="Avatar" />
<p>Logged in as:</p>
<p class="username">Administrator</p>
<p class="userbtn"><a href="#" title="">Profile</a></p>
<p class="userbtn"><a href="#" title="">Log out</a></p>
</div>
<div class="notifications">
<p class="notifycount"><a href="" title="" class="notifypop">10</a></p>
<p><a href="" title="" class="notifypop">New Notifications</a></p>
<p class="smltxt">(Click to open notifications)</p>
</div>
</div>
<div class="basic" style="float:left; background:#F00" id="list1a">
<a>There is one obvious advantage:</a>
<div id="sublista_1" style="background:#0C0; overflow:auto;">
<div id="opciones_1">
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
fsdfdfsdfsdsdf<br />
</div>
</div>
<a>Now that you've got...</a>
<div id="sublista_2">
<div style="background:#999;">
Period.
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period. r something completely different.<br/>
Period.
</div>
</div>
<a>Rent one bear, ...</a>
<div id="sublista_3">
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
<a>ultimo, ...</a>
<div id="sublista_4">
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
<a>ultimo, ...</a>
<div id="sublista_5">
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
<a>ultimo, ...</a>
<div id="sublista_6">
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div><!--fin contend-->
no se comop bajar las secciones
Uploaded with ImageShack.us
espero sus comentarios
