CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bruse
Bruse

Reputation: 313

Change css JQuery doesn't work

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

Upvotes: 0

Views: 3125

Answers (5)

Triode
Triode

Reputation: 11357

<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

Upvotes: 1

Ben
Ben

Reputation: 1454

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)"

Upvotes: 0

Rahil Wazir
Rahil Wazir

Reputation: 10142

You're doing:

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

You have to append px:

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

Upvotes: 0

Tomanow
Tomanow

Reputation: 7377

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

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

Upvotes: 0

Nevin
Nevin

Reputation: 3306

$( 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');

Upvotes: 0

Related Questions