Strict Standards: Accessing static property JCache::$_handler as non static in /home/speaking/public_html/libraries/joomla/cache/cache.php on line 420

Strict Standards: Accessing static property JCache::$_handler as non static in /home/speaking/public_html/libraries/joomla/cache/cache.php on line 422

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/system/janrain/janrain.php on line 31

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/system/system_jacomment/system_jacomment.php on line 40

Strict Standards: Declaration of JParameter::loadSetupFile() should be compatible with JRegistry::loadSetupFile() in /home/speaking/public_html/libraries/joomla/html/parameter.php on line 431

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/system/janrain/janrain.php on line 169

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/templates/speakingofcode/index.php on line 51
Interactive jQuery price slider calculator - Speaking of Code

Windows 8 focusing on interactive touch - we smell a gimmick #keepitsimplestupid.


Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/templates/speakingofcode/index.php on line 259

Author


Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/templates/speakingofcode/index.php on line 341

Sean Brennan

Sean is a specialist front-end developer & Joomla enthusiat who loves to dabble in PHP & Graphics

Share


Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/templates/speakingofcode/index.php on line 458

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/smartresizer/smartresizer.php on line 19

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/jacomment/jacomment.php on line 33

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/smartresizer/smartresizer.php on line 78

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/smartresizer/smartresizer.php on line 90

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/smartresizer/smartresizer.php on line 348

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/smartresizer/smartresizer.php on line 431

Strict Standards: Non-static method JACommentHelpers::get_config_system() should not be called statically, assuming $this from incompatible context in /home/speaking/public_html/plugins/content/jacomment/jacomment.php on line 353

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/jacomment/jacomment.php on line 359

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/components/com_jacomment/models/comments.php on line 896

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/jacomment/jacomment.php on line 199

Interactive jQuery price slider calculator

soc 2

Speaking of code, have you ever wanted to give your users a more accurate estimate on prices for your services? I know many freelance web developers who often pondered the best way to get a price estimate across to prospective clienst. And as we know with web development, set prices will never do the trick.

So in this article, we will look at some of the better options for achieving this effect. It will involve the following:

  • jQuery minimum package (jquery-1.6.2.min.js)
  • jQuery UI (jquery-ui.js)
  • jQuery UI CSS (jquery-ui.css)
  • Come CSS action (global.css)
  • Some Custom JS (myscript.js)

So the first thing you need to do is to get your HTML code in order. This is done by creating a form with labels, disabled input boxes and some slider 'div' markup. Eash slide calculator item will contain:

1 x Slider div
2 x Labels
2 x Disabled Inputs

All these elements will have the own ID tags which are important, and obviously to pass the information on when you set up you form emailer, one of the inputs will requre a name (this will be the one that displays the prices).

The HTML

First of all, we need to attach our stylesheets and jQuery plugin scripts into the document.

Then you need to construct your form as outlined above. Naming conventions up up to you here but the supplied files and code certainly works fine. If you change the names, classes and ID tags here, be sure to do the same in the CSS files and the JS files.

The basic slider item structure is as follows. You can look at the full form in the demo or the download.







The CSS will need some tweaking to get it looking the way you would like it to. You will need to add some styles to your origainal master stylesheet, and you will also need to edit the jQuery-ui.css aswell. This is to get the sliders styled.

The CSS (global.css)

The JavaScript / jQuery

Now for the tricky part. The JavaScript will certainly take some tinkering to get right. There are a few settings which will need to match up with each other.

First you will need to call the function to get cracking when the page is ready

$(document).ready( function() {

Next you will need to put all your initial input values to a value. In this case we are indicating what the values of the slider are referring to with questions about the values in the slider. Change these to your starting values.

$("#total").val("0");
$("#amount").val("Type?");
$("#amountb").val("Pages?");
$("#amountc").val("Time?");
$("#amountd").val("Extras?");

Now it gets a bit more complex. Each slider will require values to go with it. So create some variables with values for the slider. So for the first slider, in this case "Type", the values are as follows.

 var p = {
            0: "None",
            1: "PSD to HTML",
            2: "Brochure Website",
            3: "Device Optimised",
            4: "CMS",
            5: "eCommerce",
            6: "Custom Application",

        };

You will need to do this for all of the slider elements. Next you will need to add the following code for each slider so that the JavaScript knows whats going on.

$("#slider").slider({

            value: "0",
            min: 0,
            max: 6,
            step: 1,
            slide: function(event, ui) {

                $("#price").val(t[ui.value]);
                $("#amount").val(p[ui.value]);
                var aaa = $("#price").val();
                var bbb = $("#priceb").val();
                var ccc = $("#pricec").val();
                var ddd = $("#priced").val();
                var eee = $("#pricee").val();
                var fff = $("#pricef").val();
                $("#total").val(+aaa + +bbb + +ccc + +ddd);
            }
        });

 

This part at the bottom is responsible for the addition and dynamic display of the price that is currently showing.
 $("#total").val(+aaa + +bbb + +ccc + +ddd);

That is pretty much it. To make life easier we have provided a demo and a download package so you can plug it into your site and tinker.

The main errors people make will be with the not matching up of the values to the element Javascript declaration. To be clear, this is where the "max: 6" does not equal the amount of values you have entered into the variable string.

Sorry the demo is thrown together so roughly, and some non required elements can be trimmed out of it aswell such as the '$' sign additions to the total values, but I've left it in there for you to play with :-)


Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/plugins/content/jacomment/jacomment.php on line 443

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/components/com_jacomment/helpers/config.php on line 43

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/components/com_jacomment/helpers/jahelper.php on line 482

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/components/com_jacomment/helpers/jahelper.php on line 149

Strict Standards: Only variables should be assigned by reference in /home/speaking/public_html/components/com_jacomment/themes/default/html/comments/head.php on line 5








Sponsored Links

Subscribe

Twitter

#iPhone #Siri battery life reportedly less than iPhone4. Will #Apple release new phone with it's #iPad 3 launch? Find out this March.

#Webdevelopers presenting to potential clients- how do you present? #Projector? #iPad? #Laptop? #Tablet? We recommend the #projector for now

#iPad3 from #Apple and #tech rumours of a possible A3 or #23inch #tablet to hit shelves in 2012. #jQuery #HTML #CSS #samsung #iPhone

#Samsung #galaxy #tablet flash capabilities reportedly running down battery life. #Jquery & #HTML5 still the preferred choice by #developers

#4G #iPad3 rumors in overdrive... tipping a March #release. Find out about the anticipated #new #features in our upcoming #blog


Recommendations