JQuery CSS !Important, change css on click

Question

I have a drop down menu that is positioned off the page (negative margin) upon a button click I want the page to be pushed down and the menu to appear. I'm using CSS3 to achieve this and have this working fine.

My next step for the menu is to make it more dynamic, I want to use JQuery to set the margin values so that regardless of how many items are in the list (of my menu) the margins will update accordingly.

I've very close to getting this working, I've got all the math but i'm having a problem when toggling the css class to change the height. In order to get the class to overwrite my current styles I need to use the !important rule (frowned upon and I hate it!), firstly I'm having trouble using the !important rule with JQuery (I've read duplicate posts on this) but ideally I want a way to achieve the same without having to use !important, anyone any ideas?

The class i'm toggling is .body-change

Code Below:

<div id="menu">
    <ul>
        <li><a href="#home" class="contentLink">Guide</a></li>
        <li><a href="#home" class="contentLink">Contents</a></li>
        <li><a href="#home" class="contentLink">Calculator</a></li>
    </ul>
</div>



.body-change{margin-top:141px !important}
.ui-page-active{
    -webkit-transition: margin-top 0.35s linear;  
    -moz-transition: margin-top 0.35s linear;
    -o-transition: margin-top 0.35s linear; 
    -ms-transition: margin-top 0.35s linear;  
    transition: margin-top 0.35s linear;
}


$(function() {  
    var numItems = $("#menu ul").children().length,
        height = $('#menu ul li').outerHeight(),
        margin = numItems * height; 
        console.info('Margin is ' + margin + 'px');

        // Toggle menu 
        $('#menu').css('margin-top', -margin)
        $('.body-change').css('margin-top', margin)

        $("#sidemenu").on('click', function() {   
            $(".ui-page-active").toggleClass("body-change");
        });  

});

As show in the JQuery, I set the margin of the menu to the correct negative value on load. I then toggle the class body-change, what I need to do is set the css of the body change in the JQuery but I struggle to do this because of the !important rule needing to be used..

Any ideas?

Which element has the class of body-change? I don't see it in your code. — Terry
– Terry, Commented Mar 14, 2013 at 11:28
The !important is meant to prevent other styles from overriding (including inline styles). You will probably have to find an alternative around that. Why is the !important needed anyway? And which element has the class ui-page-active? It would be best if you can post a fiddle. — Terry
– Terry, Commented Mar 14, 2013 at 11:32
It's hard to post a fiddle as i'm using JQuery mobile and so many other scripts/styles.. The .ui-page-active is the class created by JQuery mobile and is essentially a wrapper for everything on the page. The menu is hidden off the page and what happens is that instead of moving the menu down (and overwriting everything on the page) I move the entire page down.. The !important is needed to overwrite the inline styles being set on #menu (I believe) but i'd love another way to achive this without !iimportant — woolm110
– woolm110, Commented Mar 14, 2013 at 11:40

BorisD · Accepted Answer · 2013-03-14 13:56:41Z

3

Once I had the same problem, try this:

$("#SomeElement").css("cssText", "height: 650px !important;");

Important to say I don't know if it's cross browsers solution

answered Mar 14, 2013 at 13:56

BorisD

2,2615 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bryce Siedschlaw · Accepted Answer · 2014-10-10 15:33:46Z

0

Not sure if you got this figured out yet, but since it hasn't been answered, I'll post what I did.

var bodyChange = $('.body-change');
var style = bodyChange.attr('style') + ' margin-top:' + margin + 'px !important;';
bodyChange.attr('style', style);

answered Oct 10, 2014 at 15:33

Bryce Siedschlaw

4,2461 gold badge26 silver badges36 bronze badges

Collectives™ on Stack Overflow

JQuery CSS !Important, change css on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related