javascript - botones - Utilizando! Important en la función css() de jQuery

javascript y jquery pdf

Question

Tengo un diálogo con una superposición declarada así:

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

La página que tengo tendrá dos alturas de página diferentes. Para explicar esto con la superposición, he hecho esto en mi archivo JS:

Si es pequeño uno visible:

$(''.ui-widget-overlay'').css("height", "985px !important");

más

$(''.ui-widget-overlay'').css("height", "1167px !important");

Aparentemente esto no funciona. ¿Hay alguna otra manera de sobrellevarlo !important que lo haga?

La página puede ir y venir, así que siempre tengo que tener una u otra. Además, si no agrego !important para el CSS, entonces la superposición se ampliará en altura infinitamente (está en Facebook así que estoy asumiendo que hay un problema)

¿Alguna sugerencia?

Answer 1

A menos que haya leído mal tu pregunta, lo que estás haciendo funciona en jsfiddle .

EDITAR: Mi violín solo funciona en algunos navegadores (hasta el momento, Chrome: pase, IE8: fallido).

Answer 2

Elimina el atributo de altura de la clase y luego intenta implementar tu condición if y else.

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

if
     $(''.ui-widget-overlay'').attr("height", "985px");
else
     $(''.ui-widget-overlay'').attr("height", "1167px");

Disfruta el código ... sigue sonriendo ...

Answer 3

Hay un truco para hacer esto.

$(''.ui-widget-overlay'').css(''cssText'', ''height:985px !important;'');

$(''.ui-widget-overlay'').css(''cssText'', ''height:1167px !important;'');

cssText está haciendo el truco aquí. Está añadiendo estilos CSS como cadena, no como variable.

Answer 4

No aplique estilos a una clase. ¡Aplica una clase a tu div como un estilo!

Deja que jQuery haga todo el trabajo por ti

Tu hoja de estilo debe tener estas clases en ellos

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

.ui-widget-small { height: 985px;  }

.ui-widget-full { height: 1167px; }

Ok eso es tu CSS ordenado

ahora tu div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

Ahora puedes usar jQuery para manipular tus divs, ya sea al unir un botón / clic / hover, sea lo que sea que quieras usar

$(''#myWidget'').removeClass(''ui-widget-small'').addClass(''ui-widget-full'')

¡Y no es necesario utilizar! Importante: se usa realmente cuando comienza a tener problemas con archivos CSS grandes o varios estilos cargados.

Esto es instantáneo pero también puedes agregar un efecto

$(''#myWidget'').hide(''slow'', function(){ $(''#myWidget'').removeClass(''ui-widget-small'').addClass(''ui-widget-full'').show(''slow'') }  )

Puede agregar estilos dinámicamente a su página de esta manera, y para reemplazar todas las clases existentes con otra clase, podemos usar .attr (''clase'', ''newClass'') en su lugar.

$(''body'').prepend(''<style type="text/css"> .myDynamicWidget { height: 450px; } </style>'')
$(''#myWidget'').attr(''class'', ''ui-widget-overlay'')
$(''#myWidget'').addClass(''myDynamicWidget'')

Pero no querrás escribir tus estilos existentes usando este método. Esto debería usarse en un escenario de caso "perdido". Solo demuestra el poder de jQuery

Answer 5

Podría intentar usar $(this).attr(''style'', ''height:1167px !important''); No lo he probado, pero debería funcionar.

Answer 6

Puede crear una hoja de estilos dinámica con reglas que anulan las propiedades que desea y las aplica en la página.

var $stylesheet = $(''<style type="text/css" media="screen" />'');

$stylesheet.html(''.tall{height:1167px !important;} .short{height:985px !important}'');

$(''body'').append($stylesheet);

Ahora, cuando agrega nuestras clases recién creadas, tendrán prioridad ya que son las últimas definidas.

$(''.ui-widget-overlay'').addClass(''tall'');

demo en http://jsfiddle.net/gaby/qvRSs/

actualizar

Para uso de soporte previo a IE9

var $stylesheet = $(''<style type="text/css" media="screen">/
                    .tall{height:300px !important;}/
                    .short{height:100px !important}/
                    </style>'');

$(''body'').append($stylesheet);

demo en http://jsfiddle.net/gaby/qvRSs/3/

Answer 7

Resolví este problema así:

inputObj.css(''cssText'', inputObj.attr(''style'')+''padding-left: '' + (width + 5) + ''px !IMPORTANT;'');

Así que no se pierde ningún estilo en línea, y el último anula el primero