Changing a data attr value

Question

I am using a plugin called slim scroll for some scroll bars on my page, my only issue with them is that they are not responsive. So while the 100px height looks nice when stretched out, it doesn't look so wonderful when the browser size is reduced.

So to solve this issue I was trying to do some jQuery to do some widowWidth and then change the data element controlling the height.

So I have tried something like this, but it seems to be just changing the actual height element instead of the data-height

function slimScrollResize(){
    loadWidth = $(window).width();
    if(loadWidth <= 1138){
        $('.slim-scroll').data('height', '300');
    }
}

So then I tried changing

$('.slim-scroll').data('height', '300');

to

$('.slim-scroll').data('data-height', '300');

and now it's not changing anything.

Is there something I'm missing? Any help would be awesome!

A js fiddle to help debug...and note I cannot change the data name because of the plugin. http://jsfiddle.net/575VZ/1/

Please check out a custom scroll I've made.. maybe it can be helpful: http://codepen.io/mkhoudary/pen/bqycE — Mohammed R. El-Khoudary, Mar 06 '14 at 16:47
maybe you also want to have a look at jquery $( window ).resize(function() { //your function here }); — caramba, Mar 06 '14 at 16:48
@MohammedR.El-Khoudary I'm already using a plugin that the template I'm using gave me...why would I want to switch to something different? — zazvorniki, Mar 06 '14 at 16:50
@caramba My resize is working fine, it's the data attribute I seem to be having issue with. — zazvorniki, Mar 06 '14 at 16:50

score 3 · Accepted Answer · answered Mar 06 '14 at 16:45

3

You can use attr()

$('.slim-scroll').attr('data-height', '300');

answered Mar 06 '14 at 16:45

Felix

37,892
8
43
55

1

+1, or prop() as seems to be the better option nowadays. http://stackoverflow.com/questions/5874652/prop-vs-attr – JF it Mar 06 '14 at 16:46
I just tried this, it's doing the same thing and just changing the actual height – zazvorniki Mar 06 '14 at 16:49
I don't think you can set data attribute using `prop()` though. – Felix Mar 06 '14 at 16:49
pretty sure ya can bro - im muckin around with a fiddle ill send on in a bit – JF it Mar 06 '14 at 16:50
@zazvorniki Can you set up a fiddle to replicate your problem? – Felix Mar 06 '14 at 16:52
@Felix When using it and changing it to data-height it seems to stop working though. – zazvorniki Mar 06 '14 at 16:52
@Felix I just added one. – zazvorniki Mar 06 '14 at 16:56
@zazvorniki You need to use `attr` instead of `prop` – Felix Mar 06 '14 at 16:59
@Felix It still does the same thing if you switch it to attr – zazvorniki Mar 06 '14 at 17:00
@zazvorniki You've a syntax error at the last line. It should be `});`. Check working fiddle: http://jsfiddle.net/575VZ/2/ – Felix Mar 06 '14 at 17:01

Changing a data attr value

1 Answers1