Tema: Escalar DIV automaticamente
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 14/12/2012, 19:35
Avatar de joaquinrot
joaquinrot
 
Fecha de Ingreso: diciembre-2012
Ubicación: Córdoba
Mensajes: 11
Antigüedad: 12 años
Puntos: 0
Respuesta: Escalar DIV automaticamente
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
  1. <html lang="es">
  2.  
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>Panel de Administrador</title>
  6.     
  7.     <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
  8.     <!--[if lt IE 9]>
  9.     <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
  10.     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  11.     <![endif]-->
  12.     <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
  13.     <script src="js/ocultarmostrar.js" type="text/javascript"></script>
  14.     <script src="js/barramovil.js" type="text/javascript"></script>
  15.     <!--<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>-->
  16.     <script type="text/javascript" src="js/jquery.equalHeight.js"></script>
  17.     <script type="text/javascript">
  18.     $(document).ready(function() 
  19.         { 
  20.           $(".tablesorter").tablesorter(); 
  21.      } 
  22.     );
  23.     $(document).ready(function() {
  24.  
  25.     //Cuando la pagina carga...
  26.     $(".tab_content").hide(); //Ocultar todo el contenido
  27.     $("ul.tabs li:first").addClass("active").show(); //Activar la primera opcion
  28.     $(".tab_content:first").show(); //Mostrar el contenido de la primera opcion
  29.  
  30.     //On Click Event
  31.     $("ul.tabs li").click(function() {
  32.  
  33.         $("ul.tabs li").removeClass("active"); //Elimina cualquier clase "active"
  34.         $(this).addClass("active"); //Da clase "active" a la opcion seleccionada
  35.         $(".tab_content").hide(); //Oculta todo el contenido de la opcion
  36.  
  37.         var activeTab = $(this).find("a").attr("href"); //Encuentra el atributo href para identificar la opcion active
  38.         $(activeTab).fadeIn(); //fadeIn
  39.         return false;
  40.     });
  41.  
  42. });
  43.     </script>
  44.     <script type="text/javascript">
  45.     $(function(){
  46.         $('.column').equalHeight();
  47.     });
  48. </script>
  49.  
  50. </head>
  51.  
  52.  
  53. <body>
  54.  
  55.     <header id="header">
  56.         <hgroup>
  57.             <h1 class="site_title"><a href="index.html">Website Admin</a></h1>
  58.             <h2 class="section_title"></h2><div class="btn_view_site"><a href="http://www.medialoot.com">View Site</a></div>
  59.         </hgroup>
  60.     </header> <!-- fin barra de encabezado -->
  61.     
  62.     <section id="secondary_bar">
  63.         <div class="user">
  64.             <p>Joaquin Rotharmel (<a href="#">3 Mensajes</a>)<span id="alinearBtnOcultar"><input type="submit" id="btnSlide" value="Ocultar Barra"></span></p>
  65.             <!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
  66.         </div>
  67.         <div class="breadcrumbs_container">
  68.             <article class="breadcrumbs"><a href="index.html">Website Admin</a> <div class="breadcrumb_divider"></div> <a class="current">Panel</a></article>
  69.         </div>
  70.     </section><!-- fin de barra secundaria -->
  71.     
  72.     <aside id="sidebar" class="column">
  73.         <div id="slideIzq" class="column">
  74.         <form class="quick_search">
  75.             <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
  76.         </form>
  77.         <hr/>
  78.         <h3>Contenido</h3>
  79.         <ul class="subMenu">
  80.             <li class="icn_new_article"><a href="#">Nuevo Articulo</a></li>
  81.             <li class="icn_edit_article"><a href="#">Editar Articulos</a></li>
  82.             <li class="icn_categories"><a href="#">Categorias</a></li>
  83.             <li class="icn_tags"><a href="#">Tags</a></li>
  84.         </ul>
  85.         <h3>Usuarios</h3>
  86.         <ul class="subMenu">
  87.             <li class="icn_add_user"><a href="#">Agregar Usuario</a></li>
  88.             <li class="icn_view_users"><a href="#">Ver Usuarios</a></li>
  89.             <li class="icn_profile"><a href="#">Mi Perfil</a></li>
  90.         </ul>
  91.         <h3>Media</h3>
  92.         <ul class="subMenu">
  93.             <li class="icn_folder"><a href="#">Administrar Archivos</a></li>
  94.             <li class="icn_photo"><a href="#">Galeria</a></li>
  95.             <li class="icn_audio"><a href="#">Audio</a></li>
  96.             <li class="icn_video"><a href="#">Video</a></li>
  97.         </ul>
  98.         <h3>Admin</h3>
  99.         <ul class="subMenu">
  100.             <li class="icn_settings"><a href="#">Opciones</a></li>
  101.             <li class="icn_security"><a href="#">Seguridad</a></li>
  102.             <li class="icn_jump_back"><a href="#">Logout</a></li>
  103.         </ul>
  104.         
  105.         <footer>
  106.             <hr />
  107.         </footer>
  108.         </div>
  109.     </aside>
  110.         <!-- fin de sidebar -->
  111.     
  112.     <section id="main" class="column">
  113.         
  114.         <h4 class="alert_info">Bienvenido, esto es un mensaje informativo.</h4>
  115.         
  116.         <article class="module width_full">
  117.             <header><h3>Estadisticas</h3></header>
  118.             <div class="module_content">
  119.                 <article class="stats_graph">
  120.                     <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="" />
  121.                 </article>
  122.                 
  123.                 <article class="stats_overview">
  124.                     <div class="overview_today">
  125.                         <p class="overview_day">Hoy</p>
  126.                         <p class="overview_count">1,876</p>
  127.                         <p class="overview_type">Clicks</p>
  128.                         <p class="overview_count">2,103</p>
  129.                         <p class="overview_type">Vistas</p>
  130.                     </div>
  131.                     <div class="overview_previous">
  132.                         <p class="overview_day">Ayer</p>
  133.                         <p class="overview_count">1,646</p>
  134.                         <p class="overview_type">Clicks</p>
  135.                         <p class="overview_count">2,054</p>
  136.                         <p class="overview_type">Vistas</p>
  137.                     </div>
  138.                 </article>
  139.                 <div class="clear"></div>
  140.             </div>
  141.         </article><!-- fin de stats -->