Question

I’m struggling to get some var’ed values into jquery selector.

// this works below
    $(".portrait").css({
        "width": viewportwidth + 'px',
        "height": viewportheight + 'px'
    });

but I’ve had to move away from the above jquery .css option, and instead use the .attr because I need the !important selector to be applied to my width and height.

The only way I achieve this, is by using the .attr (i think)

// this works below but I can only put a hardcoded value in
    $('.portrait').attr('style', 'width: 0px !important;');


// this is my attempt but fails
    $('.portrait').attr('style', 'width: viewportwidth + 'px' !important;');


// below is exactly what I ideally need to work, multiple styles with !important
    $('.portrait').attr({
        'style', 'width: viewportwidth + 'px' !important;'
        'style', 'height: viewportheight + 'px' !important;'
    });

// but it does not work cause of my bad coding.

If anyone can advise on a work around or fix, that would be so helpful. If you need me to explain in more detail let me know.

Thanks in advance 🙂

Josh

Answer 1

Try the following :

$(".portrait").css({
        "width": viewportwidth + 'px !important',
        "height": viewportheight + 'px !important'
    });

http://jsfiddle.net/manseuk/5vCab/

.css() method for style / CSS and
.attr() for attributes (title, src, alt etc etc)