[DIFICIL] reto con width: % y px

[killerangel]

Hola foro...

Tengo un div q necesito este en toda la pantalla... entonces lo puedo hacer con width=100% o no ponerle width (por defecto...), en el estilo.

El problema q tengo es q necesito en algun momento disminur el div 180px exactos.

Si hago alert(document.getElementById('midiv').style.width ) me dara 100% o ""(vacio).

Como logro tener el valor en px del div en cuestion? o como podria dar solucion a mi problema?

gracias!!

[derkenuke]

Hola killerangel:

Veo que lo que quieres hacer es una capa con un width = 100%-180px. Esa duda la he tenido siempre en CSS, pero en javascript es sencillo. Sólo tienes que hallar las dimensiones equivalentes de un 100% en pixeles. Normalmente podrías utilizar la propiedad offsetWidth para hallar el ancho, pero Prototype por ejemplo nos ofrece esta manera anti bugs y otras casuisticas:

Código PHP:

    getDimensions: function(element) {
    element = $(element);
    var display = $(element).getStyle('display');
    if (display != 'none' && display != null) // Safari bug
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
  }  
   

Lo demás es sencillo:

Código PHP:

  // anchura(tuElemento) será la anchura el pixeles del elemento en cuestión, al que le habremos dado un 100% mediante CSS.
tuElemento.style.width = (anchura(tuElemento) - 180 ) + "px";  
   

Y listo

[killerangel]

EDITADO: no compredi bien el asunto del mensaje!!

gracias

[killerangel]

ya lo note!!

ahora si....

gracia!!!!!!!!!!!!!!!!!!!!!!!

[derkenuke]

Sí, ahora veo que no fui todo lo claro que podría haber sido. Supongo que puedes usarlo directamente así sin problemas:

Código PHP:

  var miElemento = document.getElementById("idDelElemento"); 
miElemento.style.width = (miElemento.offsetWidth - 180 ) +"px";  
   

El código de prototype (si lo deseas puedes incluir únicamente esa función, o parte de ella, no hay problema), lo puse para hacer notar que en ciertos casos hay problemas para obtener la anchura directamente con offsetWidth. Tal y como ellos marcan en los comentarios los problemas son:

• En Safari a veces el display de CSS devuelve la propiedad null. En ese caso obtenemos las dimensiones con clientWidth.
• Los elementos con display:none no devuelven dimensiones (offsetWidth=0), luego los mostramos temporalmente, medimos, y luego volvemos a ocultar.

Si ninguno de los dos casos anteriores es el tuyo, creo que te puedes saltar toda esa parrafada que postee, sólo la dejé porque me pareció conveniente.


Un saludo.

[killerangel]

jejeje ... para nada, de hecho, me ha servido y es (como se dice en estos casos) JUSTO LO QUE BUSCABA!!!

gracias!!