Change css JQuery doesn't work

Question

i'm trying to change css of class in my HTML. I'm struggling with that already a long time, and I'm not getting what i'm doing wrong. (I've tried already many versions, but nothing happends)

For example: I would like to change the row height on this following html:

game.html

<div class="game">
<ul class="each" data-bind="foreach: {data: rows, as: 'row'}">
    <li class = "li">
        <ul class="row" data-bind="foreach: {data: row.beads, as: 'bead'}">
            <li class="bead" data-bind="
            currentSide: left,
            drag: bead.drag.bind(bead),
            ></li>
        </ul>
    </li>
</ul>

app.css

.row {position: relative;
max-width: 3000px;}

game.html

$( document ).ready(function() {
    var windowHeight = $( window ).height();
    var rowHeight = windowHeight/5;
    $('.row').css('max-width', rowHeight);
});

Triode · Accepted Answer · 2014-02-21 11:44:07Z

1

<li class="bead" data-bind="
            currentSide: left,
            drag: bead.drag.bind(bead)">//Missing closing ", Avoided extra ,

And

$('.row').css('max-width', rowHeight + "px");//Add `px`

Demo Fiddle

edited Feb 21, 2014 at 11:44

answered Feb 21, 2014 at 11:20

Triode

11.4k2 gold badges40 silver badges48 bronze badges

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

8 Comments

Bruse Over a year ago

No, just nothing change. On element property i still see 3000 as it was on default

Ben Over a year ago

@~Lorenz_i Do you want to change the row height or width? If height see my answer, you have an error

Triode Over a year ago

Have included the demo fiddle.

Bruse Over a year ago

I'm getting the allert, but nothing really happend on my page. 48 hours already on that!

Bruse Over a year ago

Not. i tryied to copy the example as is from fiddle, still didn't work. i see the hello for all screen width it is not my index.html, its game.html does it matter for some reason?

|

Nevin · Accepted Answer · 2014-02-21 11:18:46Z

0

$( document ).ready(function() {
    var windowHeight = $( window ).height();
    var rowHeight = windowHeight/5;
   $('.row').css('max-width', rowHeight + 'px');
});

This oughta do it.!!!

You have to append px:

$('.row').css('max-width', rowHeight + 'px');

answered Feb 21, 2014 at 11:18

Nevin

3,3682 gold badges29 silver badges56 bronze badges

1 Comment

Nevin Over a year ago

Same thing happened to me ,my 1st time.. Glad that a friend was there to help me. :)

Tomanow · Accepted Answer · 2014-02-21 11:18:54Z

0

This will not work: $('.row').css('max-width', rowHeight);

This will: $('.row').css({maxWidth: rowHeight + 'px'});

answered Feb 21, 2014 at 11:18

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

1 Comment

Mohit Pandey Over a year ago

$('.row').css('max-width', rowHeight + 'px') will also work. Instead, $('.row').css({maxWidth: rowHeight + 'px'}) will not work, as maxWidth is not a css property.

Rahil Wazir · Accepted Answer · 2014-02-21 11:18:57Z

0

You're doing:

$('.row').css('max-width', rowHeight); // outputs 100

You have to append px:

$('.row').css('max-width', rowHeight + 'px'); // outputs 100px

answered Feb 21, 2014 at 11:18

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

Comments

Ben · Accepted Answer · 2014-02-21 11:24:24Z

0

To change the height of the row

$('.row').css('max-width', rowHeight);

Needs to be

$('.row').css('max-height', rowHeight + 'px');

You need to append the px to the value and change max-width to max-height

And you need to change this typo: -

drag: bead.drag.bind(bead),

To: -

drag: bead.drag.bind(bead)"

answered Feb 21, 2014 at 11:24

Ben

1,45414 silver badges24 bronze badges

1 Comment

Bruse Over a year ago

I want to change both of them :) this doesn't work for me for any reason! so annoying! Seems that no matter which change I'm doing, i don't see it on element properties after running the script.

Collectives™ on Stack Overflow

Change css JQuery doesn't work

5 Answers 5

8 Comments

1 Comment

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

1 Comment

1 Comment

Comments

1 Comment

Related