Search jQuery

jQuery Forum

Using jQuery UI

mhauken

Use jQuery slider to change CSS?

in Using jQuery UI • 11 years ago

Here is an illustration of what I am trying to achieve:

http://cl.ly/2u0W2y2P2a2r3E0Q3o2G

I basically want jQuery to add a class (and remove all other classes) from the body tag in html on different values.

I've tried using this forum post as a guideline. But I'm quite new to jQuery, so I didn't get everything.

Here is my modification of that code, that for obvious reasons don't work. Especially line 24 & 30 which are just copy+paste from the previously mentioned forum post. What is the best way to solve this?

$(function() {
var p = {
0: "$('body').removeClass('to tre fire fem');
$('body').addClass('en');",
25: "$('body').removeClass('en tre fire fem');
$('body').addClass('to');",
50: "$('body').removeClass('en to fire fem');
$('body').addClass('tre');",
75: "$('body').removeClass('en to tre fem');
$('body').addClass('fire'); ",
100: "$('body').removeClass('en to tre fire');
$('body').addClass('fem'); "
};
$("#slider").slider({
value:50,
min: 0,
max: 100,
step: 25,
slide: function(event, ui) {
$("#price").val(p[ui.value]);
}
});
$("#price").val(p[$("#slider").slider("value")]);
});

Hope there is an easy solution to this. The illustration is probably the easiest to understand. :)

Attachments

Skjermbilde 2011-02-14 kl. 14.53.30.png
Size : 12.45 KB Downloads : 2070 Download

Replies(4)

kbwood.au

Re: Use jQuery slider to change CSS?

11 years ago

Try this:

$(function() {
var p = {0: 'en', 25: 'to', 50: 'tre', 75: 'fire', 100: 'fem'}; // Map values to classes
$('#slider').slider({value:50, min: 0, max: 100, step: 25,
slide: function(event, ui) {
// Remove all classes and add back the selected one
$('body').removeClass('en to tre fire fem').addClass(p[$(this).slider('value')]);
}
});
$('body').addClass(p[$('#slider').slider('value')]); // Initialise
});

mhauken

Re: Re: Use jQuery slider to change CSS?

11 years ago

Thank you very much!

That almost worked!

The only problem is that it it doesn't react correctly to every movement.

It adds the class .to when the value is 0 and it was supposed to be .en.

It adds the class .fire when the value is 100 and it was supposed to be .fem.

Any idea why? I can't seem to understand this..

It seems like the problem only is on the ends of the slider on 0% and 100%.

Example of code can be seen at http://mhauken.no/master/skalering2/

(slider under the title) This is a loose, unfinished sketch, but you get the idea.

rdworth

Re: Re: Use jQuery slider to change CSS?

11 years ago

Inside the slide callback function use ui.value instead of $(this).slider('value'). The former gives you access to the value the handle is being slid to, the latter gives you access to the previous set value.

mhauken

Re: Use jQuery slider to change CSS?

11 years ago

Thank you!

However I couldn't get this to work either.

Did you mean like this?

$('body').removeClass('en to tre fire fem').addClass(p[$(this).slider('ui.value')]);
}
});
$('body').addClass(p[$('#slider').slider('value')]); // Initialise

This version don't work at all.

It seems like you're right that it gives you access to the previous set value, but how can I, like you said, give you access to the handle it is being slid to?

Top Reply

Response title

Attachments

jQuery Forum

Use jQuery slider to change CSS?

Attachments

Replies(4)

Re: Use jQuery slider to change CSS?

Re: Re: Use jQuery slider to change CSS?

Re: Re: Use jQuery slider to change CSS?

Re: Use jQuery slider to change CSS?

Statistics

Tags

Actions