javascript - botones - Utilizando! Important en la función css() de jQuery
javascript y jquery pdf (7)
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).
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?
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 ...
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.
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
Podría intentar usar $(this).attr(''style'', ''height:1167px !important''); No lo he probado, pero debería funcionar.
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);
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