Newbi Newbi - 2 months ago 8
jQuery Question

Remove Style important was placed with append

I got problem for this style :

CASE :


  1. When width <= 800,
    function mlpushmenu
    change
    transform :translate3d(-100%,0,0)

  2. When width > 800 change
    transform : none !important
    (must use !important)

  3. Then try to change width <= 800, because it's none !important
    function mlpushmenu
    not working, I need remove
    transform : none !important



Jquery :

$(document).ready(function() {
function jqUpdateSize(){ // for check size
var windowwidth = $(window).width();

// for change transform, must set to !important
var $lvl = $("<style>.level > ul > li > .level {transform : none !important}</style>");

if (windowwidth <= 800){
// remove style not working
$lvl.remove();

// WHEN THIS MLPUSH MENU WORK it's change transform.
new mlPushMenu( document.getElementById( 'menu' ), document.getElementsByClassName( 'btnslick' )[0], {
type : 'cover'
});
}else{
$lvl.appendTo("head");
}
};
$(document).ready(jqUpdateSize);
$(window).resize(jqUpdateSize);
});


That not working?, Where I did wrong?

How to remove that !important?

Answer

I would change this so that the style is applied using CSS classes. So have classes like this:

.withTranslate {
    transform: translate3d(-100%,0,0);
}

.withoutTranslate {
    transform: none !important;
}

Then change your JavaScript to do the following:

function jqUpdateSize() {
    // Get current width
    var windowWidth = $(window).width();

    var $lvl = $(".level > ul > li > .level");

    // Remove both classes
    $lvl.removeClass("withoutTranslate").removeClass("withTranslate");

    // Add appropriate class depending on width
    $lvl.addClass(windowWidth <= 800 ? "withoutTranslate" : "withTranslate");

    // Other code
    [...]
};
Comments