Set width value dynamically using css property in jquery?

Question

I am trying to overlay an existing div with a new dynamically created div with same dimensions. I try to set the height and width for the new div dynamically using the existing divs height and width. I am getting the dimensions of the existing div in divSize array and I pass the same to the generateDiv function

Upon inspecting the element i find that It does not add the height and width property values to the CSS. What am I doing wrong here Am I missing something any help would be much appreciated May code is as follows:

function generateDiv(divSize, divContent, object) {
            $('<div class="divOverlay">' + divContent + '</div>').css({
                'width': divSize[0] + 'px !important',
                'height': divSize[1] + 'px !important',
                'background-color': '#ddd',
                'position': 'absolute',
                'color': '#56D9C9',
                'margin':'7px 7px 7px 0px',
                'zIndex': '100'
            }).appendTo($("#" + object).css("position", "relative"))

        }

Please append html first then add css from jQuery. – Parth Trivedi Dec 09 '15 at 12:56 — Parth Trivedi, Dec 09 '15 at 12:56

score 0 · Answer 1 · answered Dec 09 '15 at 12:58

0

Try this. First append html then apply css.

function generateDiv(divSize, divContent, object) {
            $('<div class="divOverlay">' + divContent + '</div>').appendTo($("#" + object).css("position", "relative")).css({
                'width': divSize[0] + 'px !important',
                'height': divSize[1] + 'px !important',
                'background-color': '#ddd',
                'position': 'absolute',
                'color': '#56D9C9',
                'margin':'7px 7px 7px 0px',
                'zIndex': '100'
            })

        }

answered Dec 09 '15 at 12:58

Parth Trivedi

3,802
1
20
40

Tried this approach It doesn't solve the issue. Can you please explain how this order will help in picking up the height and width attribute. – Shahid Manzoor Bhat Dec 10 '15 at 06:38
You are only facing problem with "width" and "height" only? Other css works? – Parth Trivedi Dec 10 '15 at 06:47
Try to console(divSize[0]) & console(divSize[1]). Are you getting value? – Parth Trivedi Dec 10 '15 at 06:52

score 0 · Accepted Answer · answered Dec 09 '15 at 13:18

0

Use this instead:

function generateDiv(divSize, divContent, object) {
        $('<div>').addClass("divOverlay").html(divContent).css({
            'width': divSize[0] + 'px',
            'height': divSize[1] + 'px',
            'background-color': '#ddd',
            'position': 'absolute',
            'color': '#56D9C9',
            'margin':'7px 7px 7px 0px',
            'zIndex': '100'
        }).appendTo($("#" + object).css("position", "relative"))

    }

answered Dec 09 '15 at 13:18

AVAVT

7,058
2
21
44

Hi Av. Can you please explain how is it working. Its picking up the height and width property values but as soon as I include important it fails to load them. Why is this difference in this behaviour. – Shahid Manzoor Bhat Dec 10 '15 at 06:51
2

You need to use style function. Check this http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css – Parth Trivedi Dec 10 '15 at 07:01
Or another option is make a class with !important value and addClass. – Parth Trivedi Dec 10 '15 at 07:03
1

Ah, I mostly just cleaned your code so it could be easier for jQuery to understand. The `!important` part fails because it's not part of a css value, but is the priority of that style. So when you try to pass it as part of the value argument the base javascript functions below jQuery can't parse it. – AVAVT Dec 10 '15 at 07:03
Oh, yeah, @ParthTrivedi 's link give better explanation than I do. Thanks :) – AVAVT Dec 10 '15 at 07:04
@AvAvt yes.Link give better explanation for ! important problem with css function. – Parth Trivedi Dec 10 '15 at 07:37

Bhavik Jani · Answer 3 · 2015-12-10T07:07:03.253

0

$("<div />").attr('style', 'width: 100px !important;');

This will work

edited Dec 10 '15 at 07:07

answered Dec 10 '15 at 07:01

Bhavik Jani

180
7

Set width value dynamically using css property in jquery?

3 Answers3