Quick jQuery based assistance

[dav3evans]

Hey all,

I'm in the process of learning jQuery, so to anyone who can help/see that this is probably a really obvious request I apologise in advance, as up until recently I've only ever re-purposed jQuery plugins like Fancybox.

I've nabbed the code from the jQuery Ui site and you can see what I have so far HERE.

What I need to be able to do is take the value the slider creates and do simple multiplication to it, so multiply the figure by 30 for the savings in a month, but at the minute I can't get my head around the syntax, so if someone could assist that would be great.

Again, I realise this is probably simple and I do have a bunch of training to do, but if you could get me over this hurdle that would be ace.

Thanks! Dave.

 

[GravyMonster]

Im on my phone atm so cant give you the code, but you just need to amend the slide handler function.

ui.value is the selected value in the slider - you can use that variable to perform your operations on.

 

[touch]

First, i would add something to display the monthly saved value, the same way as you display the daily saved value. Do this by adding an input box after the label (you could directly edit the text of the label, but it's simpler to have a separate container for it).
So i changed your monthly amount label code to this: (an exact copy of the daily amount part with different ids)

<p>
  <label for="monthly-amount">Amount Saved Per Month: &pound;</label>
 <input type="text" id="monthly-amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

Then, the jquery to update this input will go in the same place as the part for updating the daily amount because you want both values to be updated at the same time.

So, after this line:

$( "#amount" ).val( ui.value );

i add:

$( "#monthly-amount" ).val( (ui.value*30) );

this code gets executed each time the slider is moved (it's inside the function which is called on the 'slide' event).

and also, after this line:

$( "#amount" ).val( $( "#slider-savings" ).slider( "value" ) );

i add:

$( "#monthly-amount" ).val( ($( "#slider-savings" ).slider( "value" )*30) );

this is the code that executes once when the script is loaded and sets the first value of the inputs to the value of the slider.
full code with all my changes here if you need it.

 

[dav3evans]

You are a gentleman and a scholar. I'll give this a go tomorrow and see how I get on. The main part that was giving me hassle is where I can actually add the *30, thinking that it was more technical than just being able to do ui.value*30.

Any decent resources you can recommend for getting into this? I've got access to lynda.com and codeschool, but anything else you can suggest would be greatly appreciated.

 

[dav3evans]

This seems to be working out fine, thanks for the assist. Is there a way to have the value set to a P tag or another div rather than an input box? Seems like this would be a better option rather than trying to style an input box and it's contents.

 

[GravyMonster]

I changed it to a span element as they are inline - the same as the previous input - so it won't affect the layout.

The only difference is you need to use the text() method to set the slider value, not val()

http://jsfiddle.net/RoryMcCrossan/vUEjP/