Escalar DIV automaticamente

joaquinrot · #1 (**permalink**) 14/12/2012, 19:09

Hola gente,
es la primera vez que posteo en este foro, es muy interesante y siempre me ayuda a despejar dudas, pero esta vez no eh dado con lo que estoy buscando en post ya realizados, paso a contar mi problema:

Yo tengo un contenedor, tipo caja de herramientas, como una barra desplegable, usando jQuery para animarla y tengo otro contenedor que es el principal, al lado, el problema es que cuando oculto esa "caja de herramientas" se viene todo el DIV para donde se esta ocultando la "caja", lo que estoy tratando de hacer es que con la nueva área que me queda (todo el ancho de la pantalla) ese DIV se adapte a la misma y me la ocupe toda, y cuando vuelva a abrir la "caja" que se adapte nuevamente a un tamaño mas reducido.

Bueno espero haya sido claro, si no entienden trataré de explicar nuevamente. Espero sus respuestas, muchas gracias!!!

David · #2 (**permalink**) 14/12/2012, 19:17

Bienvenido.

Será más fácil ayudarte si vemos cuál es el marcado HTML con que tienes problemas.

joaquinrot · #3 (**permalink**) 14/12/2012, 19:35

Gracias por la rapida respuesta, dejo la parte en discusión, como ven hay un sidebar y un main, cuando oculto sidebar con js, quiero que el contenido de "main" se ajuste al tamaño de pantalla que ha quedado con sidebar oculto, cuando lo muestro, que se adapte al nuevo tamaño. Gracias!

Código HTML:

Ver original<html lang="es">
 
<head>
    <meta charset="utf-8"/>
    <title>Panel de Administrador</title>
    
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/ocultarmostrar.js" type="text/javascript"></script>
    <script src="js/barramovil.js" type="text/javascript"></script>
    <!--<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>-->
    <script type="text/javascript" src="js/jquery.equalHeight.js"></script>
    <script type="text/javascript">
    $(document).ready(function() 
        { 
          $(".tablesorter").tablesorter(); 
     } 
    );
    $(document).ready(function() {
 
    //Cuando la pagina carga...
    $(".tab_content").hide(); //Ocultar todo el contenido
    $("ul.tabs li:first").addClass("active").show(); //Activar la primera opcion
    $(".tab_content:first").show(); //Mostrar el contenido de la primera opcion
 
    //On Click Event
    $("ul.tabs li").click(function() {
 
        $("ul.tabs li").removeClass("active"); //Elimina cualquier clase "active"
        $(this).addClass("active"); //Da clase "active" a la opcion seleccionada
        $(".tab_content").hide(); //Oculta todo el contenido de la opcion
 
        var activeTab = $(this).find("a").attr("href"); //Encuentra el atributo href para identificar la opcion active
        $(activeTab).fadeIn(); //fadeIn
        return false;
    });
 
});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
 
</head>
 
 
<body>
 
    <header id="header">
        <hgroup>
            <h1 class="site_title"><a href="index.html">Website Admin</a></h1>
            <h2 class="section_title"></h2><div class="btn_view_site"><a href="http://www.medialoot.com">View Site</a></div>
        </hgroup>
    </header> <!-- fin barra de encabezado -->
    
    <section id="secondary_bar">
        <div class="user">
            <p>Joaquin Rotharmel (<a href="#">3 Mensajes</a>)<span id="alinearBtnOcultar"><input type="submit" id="btnSlide" value="Ocultar Barra"></span></p>
            <!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
        </div>
        <div class="breadcrumbs_container">
            <article class="breadcrumbs"><a href="index.html">Website Admin</a> <div class="breadcrumb_divider"></div> <a class="current">Panel</a></article>
        </div>
    </section><!-- fin de barra secundaria -->
    
    <aside id="sidebar" class="column">
        <div id="slideIzq" class="column">
        <form class="quick_search">
            <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
        </form>
        <hr/>
        <h3>Contenido</h3>
        <ul class="subMenu">
            <li class="icn_new_article"><a href="#">Nuevo Articulo</a></li>
            <li class="icn_edit_article"><a href="#">Editar Articulos</a></li>
            <li class="icn_categories"><a href="#">Categorias</a></li>
            <li class="icn_tags"><a href="#">Tags</a></li>
        </ul>
        <h3>Usuarios</h3>
        <ul class="subMenu">
            <li class="icn_add_user"><a href="#">Agregar Usuario</a></li>
            <li class="icn_view_users"><a href="#">Ver Usuarios</a></li>
            <li class="icn_profile"><a href="#">Mi Perfil</a></li>
        </ul>
        <h3>Media</h3>
        <ul class="subMenu">
            <li class="icn_folder"><a href="#">Administrar Archivos</a></li>
            <li class="icn_photo"><a href="#">Galeria</a></li>
            <li class="icn_audio"><a href="#">Audio</a></li>
            <li class="icn_video"><a href="#">Video</a></li>
        </ul>
        <h3>Admin</h3>
        <ul class="subMenu">
            <li class="icn_settings"><a href="#">Opciones</a></li>
            <li class="icn_security"><a href="#">Seguridad</a></li>
            <li class="icn_jump_back"><a href="#">Logout</a></li>
        </ul>
        
        <footer>
            <hr />
        </footer>
        </div>
    </aside>
        <!-- fin de sidebar -->
    
    <section id="main" class="column">
        
        <h4 class="alert_info">Bienvenido, esto es un mensaje informativo.</h4>
        
        <article class="module width_full">
            <header><h3>Estadisticas</h3></header>
            <div class="module_content">
                <article class="stats_graph">
                    <img src="http://chart.apis.google.com/chart?chxr=0,0,3000&chxt=y&chs=520x140&cht=lc&chco=76A4FB,80C65A&chd=s:Tdjpsvyvttmiihgmnrst,OTbdcfhhggcTUTTUadfk&chls=2|2&chma=40,20,20,30" width="520" height="140" alt="" />
                </article>
                
                <article class="stats_overview">
                    <div class="overview_today">
                        <p class="overview_day">Hoy</p>
                        <p class="overview_count">1,876</p>
                        <p class="overview_type">Clicks</p>
                        <p class="overview_count">2,103</p>
                        <p class="overview_type">Vistas</p>
                    </div>
                    <div class="overview_previous">
                        <p class="overview_day">Ayer</p>
                        <p class="overview_count">1,646</p>
                        <p class="overview_type">Clicks</p>
                        <p class="overview_count">2,054</p>
                        <p class="overview_type">Vistas</p>
                    </div>
                </article>
                <div class="clear"></div>
            </div>
        </article><!-- fin de stats -->

joaquinrot · #4 (**permalink**) 15/12/2012, 05:33

Ya lo solucioné muchachos, lo hice con un evento toggle. Dejo el codigo

Código Javascript:

Ver original$(document).ready(function() {
 
    $('#btnSlide').toggle(function() {
        $("#sidebar").animate({width: "toggle"});
        $("#main").animate({width: "95%"});
        },
        function(){
        $("#sidebar").animate({width: "toggle"});
        $("#main").animate({width: "77%"});
    });
});