28/08/2011, 21:42
|
 | | | Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 5 meses Puntos: 21 | |
 acordeon al tamaño de panatalla
hola amigos tengo un problema
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:
<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>
y este es mi body
Código:
<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-->
solo he podido logra que el contenedor tome el tamaño de pantalla pero aun
no se comop bajar las secciones 
Uploaded with ImageShack.us
espero sus comentarios
__________________
gerardo |