Ajustar el ancho de 2 divs con jQuery-tamaño Ajustable

Actualmente trabajo en la siguiente página:

Ajustar el ancho de 2 divs con jQuery-tamaño Ajustable

divResizable ha sido modificado por jQuery usando el siguiente código en $().ready()

 $("#divResizable").resizable({ handles: 'e' });
 $("#divResizable").bind("resize", function (event, ui) {
      $('#divContent').width(850 -(ui.size.width - 175));
 });

Como se puede ver, trato de aumentar el ancho de divContent cuando divResizable se hace más pequeño y la otra manera alrededor. Sin embargo, con este código, divContent no siempre es «crecer» en el lado izquierdo solamente, que a veces se extiende a la derecha de la irrelevante div, lo que no hace el cambio de tamaño que se vea bien en todos.

Hay alguna entrada más sofisticado método para permitir que el ancho de los 2 divs corresponden?

Algo de lo que podía pensar sería establecer la anchura de divContent a

(start of irrelevant - divResizable.width) == 850px
  ^ e.g 1025px          ^ e.g. 175px

Exactamente cómo tendría que hacer esto con jQuery?

Alguna razón por la que tu no anidación de la divResizable e irrelevante div dentro de la divContent y flotante? Pidiendo que asegúrese de que usted no ha pasado por alto una solución obvia.
Sí, ya que no es el sitio completo (el resto de los elementos son irrelevantes para esta pregunta, sin embargo) tener dentro de este div sería por desgracia, no funciona en absoluto.

OriginalEl autor Dennis Röttger | 2011-05-19

3 Kommentare

  1. 15

    Demo – Su diseño puede manejar esto. Si ajusta resizable y content juntos, sólo es necesario ajustar resizable‘s ancho:

    HTML

    <div id="page">
      <div id="wrapper">
        <div id="resizable">resizable</div>
        <div id="content">content</div>
      </div>
      <div id="irrelevant">irrlevant</div>
    </div>

    CSS

    #resizable  { float:left; width:175px; }
    #content    { overflow:hidden; width:auto; }
    #wrapper    { float:left; width:1025px; }
    #irrelevant { }
    Gracias por tu respuesta y para incluso ir a través de la labor de la adición de un demo. Pero me temo que este es el efecto que me había demasiado, Si me acaba de ajustar el ancho utilizando un cuadro de texto el cálculo es bastante fácil en el navegador, pero quiero arrastre de forma dinámica utilizando el mouse(jqueryui.com/demos/resizable). Que es donde los problemas que he mencionado en mi Pregunta original llegado a ser.
    Me encanta cuando la gente está creando problemas para themselfs. 🙂 El ejemplo de arriba usa CSS para hacer los cálculos, por lo que no tiene. Para hacer de tamaño variable en el arrastre de ratón usted hubiera necesita LÍNEA de javascript: $( "#resizable" ).resizable();. También me encanta cuando las personas son demasiado perezosos para trabajar fuera de las cosas. jsbin.com/ikemu4/3 … ver la «nueva» versión de…
    Calma, botón de oro! Simplemente asegurarse de que obtener la mayor cantidad posible de servicio para mi Recompensa. Por desgracia, #content que va siempre detrás de #resizable, esto es más que simplemente «no cool», ya que requeriría una reforma de todo el fondo-imágenes. Es allí cualquier manera de lograr lo que hizo sin dejar #content ir detrás de #resizable ? Compruebe por favor jsbin.com/ikemu4/7 , borde rojo. No debería ir tan lejos a la izquierda.
    Bien Buttercup :), me olvidé de agregar overflow:hidden a los contenidos. jsbin.com/ikemu4/9
    Sexy, sí lo es.

    OriginalEl autor gblazex

  2. 2

    Intente esto:

    $("#divResizanle").resizable({ handles: 'e' });
        $("#divResizable").bind("resize", function (event, ui) {
            $('#divContent').width(850 -(ui.size.width - 175));
            $('#divContent').css("left",ui.size.width - ui.originalSize.width);
        });

    OriginalEl autor xyd

  3. 1

    tratar de envolver ‘divresizable‘ y ‘divContent‘ en un div con ancho conjunto a la suma de los dos contenidos divs

    Tan pronto como me intente cambiar el tamaño, divContent «salta» hacia abajo en la otra fila.
    quizás me equivoco, pero ¿no es más fácil tener un envolver div establecer un ancho específico, tienen la divResizable establecer un ancho específico, salir de la divContent sin un con conjunto o a auto, y aplicar la secuencia de comandos para cambiar el tamaño de divResizable?

    OriginalEl autor inadcod

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea