Why my simple jQuery code doesn't work with .css() method?

Question

I have the following simple code but it seem that not work.

jQuery(document).ready(
    function($)
    {
        $(window).resize(
            function()
            {
                setGrid($);
            }
        );

        setGrid($);
    }
);

function setGrid($)
{
    var contactContainer    =   $('#contactInfo');

    if(contactContainer.width() < 650)
    {
        console.log('Too short');
        $('.col_1_2').css(
            {
                width     :   '100% !important',
                margin    :   '0 !important'
            }
        );
    }
    else
    {
        console.log('Too long');

        $('.col_1_2').css(
            {
                width       :   '49% !important',
                marginRight :   '1% !important'
            }
        );

        $('.last').css(
            {
                width       :   '49% !important',
                marginRight :   '0 !important',
                marginLeft  :   '1% !important'
            }
        );
    }
}

So, when I resize the window I am getting both the messages in my Chrome console, according to the #containerInfo, but the .col_1_2 are not updated.

Is there anything wrong in my code and I cannot find it out ?

Note : I have my console open and I do not get any error message in my console. Also in the "Elements" tab of my console I am inspecting the element that must get modified, and I do not see any change. Normaly a "style" attribute should be added on the matched element.

Kind regards

first time run imediatly when the document is ready, the second one running on window resize. — KodeFor.Me
– KodeFor.Me, Commented Sep 24, 2013 at 6:35
What is it for? What are you trying to do with $ like that? Can't you do this in pure CSS with mediaqueries? I don't know, something doesn't look right, setting !important in jQuery like that... — elclanrs
– elclanrs, Commented Sep 24, 2013 at 6:35
jQuery(document).ready(function(){ setGrid($); $(window).resize( function() { setGrid($); } ); }); isnt dis gonna work?? — Shashank
– Shashank, Commented Sep 24, 2013 at 6:36
Try taking off the !important... you don't need them, as styles applied with .css get added to the element directly (overriding any other styles that may apply). — philwills
– philwills, Commented Sep 24, 2013 at 6:44

philwills · Accepted Answer · 2013-09-24 06:53:28Z

3

Try taking off the !important... you don't need them, as styles applied with .css get added to the element directly (overriding any other styles that may apply).

answered Sep 24, 2013 at 6:53

philwills

9954 silver badges8 bronze badges

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

1 Comment

Sagive Over a year ago

Weird that it works but i cant argue with results ;)

Amit · Accepted Answer · 2013-09-24 06:46:37Z

2

Try this, You are missing '(quote) in attribute. Add quote in all css then it will work.

$('.col_1_2').css(
        {
            'width'       :   '49% !important',
            'margin-right' :   '1% !important'
        }
    );

edited Sep 24, 2013 at 6:46

answered Sep 24, 2013 at 6:34

Amit

15.4k8 gold badges49 silver badges69 bronze badges

4 Comments

KodeFor.Me Over a year ago

Thanks for your response. I already have try this but still no work.

Amit Over a year ago

@MerianosNikos Can you set fiddle

Shashank Over a year ago

@Merianos enter the css in stylesheet and try using add class remove class on resize event..

nnnnnn Over a year ago

This answer is incorrect. Object literal property names do not need quotes in cases where the names follow standard JS identifier limitations. (Object literal property names do need quotes when they contain spaces or punctuation or whatever.)

anupam · Accepted Answer · 2013-09-24 07:01:06Z

jQuery will not allow to set !important as you have tried. However, I think the following will work for you.

jQuery.style(name, value, priority);

You can use it to get values with .style('name') just like .css('name'), get the CSSStyleDeclaration with .style(), and also set values - with the ability to specify the priority as 'important'. See https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.

Try something like:

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

However, using media query is the correct way to proceed.

Collectives™ on Stack Overflow

Why my simple jQuery code doesn't work with .css() method?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related