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

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

• javascript
• jquery
• css

• y r u calling the setGrid($) function twice??? – Shashank Commented Sep 24, 2013 at 6:34
• first time run imediatly when the document is ready, the second one running on window resize. – KodeFor.Me Commented Sep 24, 2013 at 6:35
• 1 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 Commented Sep 24, 2013 at 6:35
• jQuery(document).ready(function(){ setGrid($); $(window).resize( function() { setGrid($); } ); }); isnt dis gonna work?? – Shashank Commented Sep 24, 2013 at 6:36
• 2 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 Commented Sep 24, 2013 at 6:44

3 Answers 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).

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'
        }
    );

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/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.