Passing variables with jquery css function doesn't work?

Question

Im trying to make a grid-layout work in IE10 and am very close to the solution (at least I think so). I wrote this short script which should do the trick telling the div's in which way to be placed in the grid, since apparently IE can't autofill.

var x = 1;
var y = 1;
jQuery(".grid .flex").each(function () {
        jQuery(this).css('-ms-grid-row', x);
        jQuery(this).css('-ms-grid-column', y);
        console.log(x);
        console.log(y);
        if (y >= 3) {
            y = 1;
            x++;
        }
        else {
            y++;
        }
});

The right values for the div's are put out on console, but it seems that the .css() function does not quite get that they are just numbers. I does not work the way it is shown here, but when I change the method to "-ms-grid-rows(or -columns)" the script injects the style-tag just fine.

I think that jquery assumes the variables are pixel-measurements which would explain why "-ms-grid-rows" works and "-ms-grid-row" doesn't.

Is there a way to fix this? Can I tell explicitly that the variables are just numbers?

Sry if this all sounds a bit messy i'm just an intern trying to solve a problem because the senior developer is on vacation. Also im just a rookie with "web-development".

jQuery(this).css({'-ms-grid-row': x,'-ms-grid-column': y}); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 20, 2018 at 12:21
Maybe try jQuery(this).css('-ms-grid-row', String(x)); or even jQuery(this).css('-ms-grid-row', ''+x); to explicitly cast as a string (I honestly can't say if this will work, it depends what jQuery does with it after you've passed it in, but if it's testing for either a number or a string and then doing different things based on that, it might help). — delinear
– delinear, Commented Mar 20, 2018 at 12:26
I haven't tried this, but I think it might do the trick: stackoverflow.com/questions/8462040/… — RedhaL
– RedhaL, Commented Mar 20, 2018 at 12:32

kalai · Accepted Answer · 2020-01-27 12:09:46Z

2

try this

 jQuery(this).css('-ms-grid-row', x.toString())

edited Jan 27, 2020 at 12:09

answered Mar 20, 2018 at 12:33

kalai

18612 bronze badges

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

1 Comment

Goozak Over a year ago

Detailed explanation from the documentation "When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method."

Collectives™ on Stack Overflow

Passing variables with jquery css function doesn't work?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related