0

I'm using jQuery Mobile for a simple mobile app, and I want to add a CSS to it. Currently I have the following CSS for the class.

.home-button-edited {
    border: 1px solid #2373A5;
    margin-top: 1px !important;
    background:#3496da;
}

Then in JS part I have the following code segment:

var viewport = {
    width: $(window).width(),
    height: $(window).height()
};

document.addEventListener("deviceready", setHomeButton, false);

function setHomeButton() {
    var difference = viewport.width - 85;
    $('.home-button-edited').css("left", "difference !important");
}

The point is that, I want to add a left property to .home-button-edited, with the value that I get in the difference variable, and it also should have an !important property. Any ideas?

Improve this question
4
  • try $('.home-button-edited').css("left", difference);, the way you have it you are setting difference as a string and not using the variable. Commented Jun 12, 2014 at 12:54
  • share me the link of you code Commented Jun 12, 2014 at 12:55
  • 1
    !important is bad, best solution is to get rid of it in the CSS to start. Commented Jun 12, 2014 at 13:03
  • @epascarello But I really need it for my code. Commented Jun 12, 2014 at 13:03

3 Answers 3

Reset to default
1 
 $('.home-button-edited').css("left", difference+"!important");

or

 $('.home-button-edited').style.setProperty( 'left', difference, 'important' );
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Anyway !important statement doesn't work using jQuery css() method
@A.Wolff Yes, it seems to completely ignore the !important part. Any idea how to achieve what I want in JS or jQuery?
Try something like this (just grabbed a snipped from somewhere else)" $( '.myclass' ).each(function () { this.style.setProperty( 'height', '0px', 'important' ); });
@ett Use attribute style or .css('cssText','left: '+difference+'px !important'); or better, don't use !important statement in any rules
@A.Wolff And what exactly is 'cssText' part?
|
0

You could use in your case:

$('.home-button-edited').css('cssText','left: '+difference+'px !important');
Improve this answer

Comments

0

Error in your function.

function setHomeButton() {
    var difference = viewport.width - 85;
    $('.home-button-edited').css("left", difference + " !important");
}
Improve this answer

3 Comments

!important statement doesn't work using jQuery css() method
@MayankTripathi Yes, A. Wolff is right, it doesn't seem to be working.
O yes.. My mistake.. it does not. Apologies!