Setting an "advanced" css class value with javascript?

Question

I have been trying to get this to work for a while now to no avail. Either I manage to break the whole page or it simply doesn't do anything.

script:

$(document).ready(function(){
    var height = $(window).innerHeight();
    $('a[id="st2"]:target~#scrollbg article.panel').css('-webkit-transform','translateY(-'height'px)');

});

trying to change the value of this css class:

a[id="st2"]:target~#scrollbg article.panel {
    -webkit-transform: translateY(-955px);
    transform: translateY(-955px);
}

(the -955 value comes from me having manually entered the value so that it works in my browser/screen res.)

Now I'm well aware that I could just scrap the whole css-animation and do everything in javaScript instead but I still thought that I'd try asking for help first.

Cheers,

/chok

Thanks for confirming this as well, I thought of changing it but let it be while fixing the "real" issue to reduce the amount of possible errors in the code. — Chokladio
– Chokladio, Commented Feb 25, 2014 at 14:07

Scimonster · Accepted Answer · 2014-02-25 13:49:38Z

5

'translateY(-'height'px)');

should be

'translateY(-'+height+'px)');

Note the +. Otherwise, it ends up being a syntax error.

edited Feb 25, 2014 at 13:49

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

answered Feb 25, 2014 at 13:48

ggdx

3,0465 gold badges36 silver badges50 bronze badges

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

2 Comments

Chokladio Over a year ago

Yes that's exactly it! Thank's a lot mate.

ggdx Over a year ago

@Chokladio - No worries.

Collectives™ on Stack Overflow

Setting an "advanced" css class value with javascript?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related