Foros del Web » Programando para Internet » Javascript »

Escalar DIV automaticamente

Estas en el tema de Escalar DIV automaticamente en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/12/2012, 18:09
Avatar de joaquinrot  
Fecha de Ingreso: diciembre-2012
Ubicación: Córdoba
Mensajes: 11
Antigüedad: 6 años, 8 meses
Puntos: 0
Pregunta Escalar DIV automaticamente

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!!!
  #2 (permalink)  
Antiguo 14/12/2012, 18:17
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.712
Antigüedad: 14 años, 4 meses
Puntos: 836
Respuesta: Escalar DIV automaticamente

Bienvenido.

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

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

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.  
  3.     $('#btnSlide').toggle(function() {
  4.         $("#sidebar").animate({width: "toggle"});
  5.         $("#main").animate({width: "95%"});
  6.         },
  7.         function(){
  8.         $("#sidebar").animate({width: "toggle"});
  9.         $("#main").animate({width: "77%"});
  10.     });
  11. });

Última edición por joaquinrot; 15/12/2012 a las 06:54

Etiquetas: contenedor, escalar, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:06.