Ad

Javascript Slider Not Displaying Array?

- 1 answer

Here's a link to the page I'm working on:

https://www.servicerr.com/partners.php

Whenever you click on different numbers, it should update the prices below the slider. This javascript file contains those prices:

https://www.servicerr.com/js/set_my_price.js

What I can't figure out is why the prices won't change and why every number is staying highlighted when you click from one of the next.

About a year ago, I had this working properly and then had to re-create it. Just can't figure out what I'm doing wrong this time around. Any help would be appreciated.

Here are links to the two other files Javascript files that make this work:

Here's the HTML code being used:

  <div class="product2" style="margin-right:2%">
    <div class="title">STARTER</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet starter"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$34.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>
  <div class="product" style="margin-right:2%">
    <div class="title">SPECIALIZED</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet specialized"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$69.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>
  <div class="product2">
    <div class="title">BUSINESS</div>
    <div class="monthly">PARTNER DISCOUNT</div>
    <ul>
    <div class="servicerr-pricing-packet business"><span class="original"><span style="font-weight: bold; border-bottom: 0px none; color: rgb(0, 125, 199); font-size: 70px; white-space:nowrap;margin:0 !important;">$174.96</span></span></div>
    <p style="font-size:20px;color:#000;margin-top:20px;border:0;padding:5px 0 0 !important;">website / monthly</p>
    </ul>
    <div class="order"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://www.servicerr.com/contact.php" style="font-size: 25px;" class="btn btngreen">Become A Partner</a></div>
  </div>

Here's the set_my_price.js code:

var set_default_value_here = 25;
$(document).ready(function(){

$("."+set_default_value_here).css('color', '#ffbb50');

});

function get_array(val){
                    var one = new Array(1, '49.95', '99.95', '249.95');
                    var two = new Array(5, '39.96', '79.96', '199.96');
                    var three = new Array(10, '37.46', '74.96', '187.46');
                    var four = new Array(25, '34.96', '69.96', '174.96');
                    var five = new Array(50, '32.47', '64.97', '162.47');
                    var six = new Array(75, '29.97', '59.97', '149.97');
                    var seven = new Array(100, '27.47', '54.97', '137.47');
                    var eight = new Array(200, '24.97', '49.97', '124.97');
                    var nine = new Array(300, '22.48', '44.98', '112.48');
                    var ten = new Array(400, '19.98', '39.98', '99.98');
                    var eleven = new Array(500, '17.48', '34.98', '87.48');
                    var twelve = new Array(600, '14.98', '29.98', '74.98');
                    var thirteen = new Array(700, '12.49', '24.99', '62.49');
                    var fourteen = new Array(800, '9.99', '19.99', '49.99');
                    var fifteen = new Array(900, '7.49', '14.99', '37.49');
                    var sixteen = new Array(1000, '4.99', '9.99', '24.99');


                    if(val == 1){return one;}
                    if(val == 2){return two;}
                    if(val == 3){return three;}
                    if(val == 4){return four;}
                    if(val == 5){return five;}
                    if(val == 6){return six;}
                    if(val == 7){return seven;}
                    if(val == 8){return eight;}
                    if(val == 9){return nine;}
                    if(val == 10){return ten;}
                    if(val == 11){return eleven;}
                    if(val == 12){return twelve;}
                    if(val == 13){return thirteen;}
                    if(val == 14){return fourteen;}
                    if(val == 15){return fifteen;}
                    if(val == 16){return sixteen;}


                }

The pricing file:

$(document).ready(function(){
var sliderUpdate = "";
    if ($('#servicerr-pricing-slider').length > 0) {

        var slider = null;

        if ($.fn.bootstrapSlider) {
            slider = $('#servicerr-pricing-slider').bootstrapSlider();
        } else {
            slider = $('#servicerr-pricing-slider').slider();
        }

        slider.on('slide', sliderUpdate);
        slider.on('slideStop', sliderUpdate);
    }

});

I'm also utilizing a modified version of the original bootstrap-slider.js which is too long to post here, but can be viewed directly: https://www.servicerr.com/js/bootstrap-slider.js

Thanks!

Ad

Answer

Looks like somebody have been messing with the original code:

/**/
var old_no = get_array( document.getElementById('servicerr-pricing-slider').value) ;
$(".color_less").css('color', '#08619f');

var no = get_array(a);

$("."+no[0]).css('color', '#ffbb50'); //alert(no[0]);
$("#starter").html("$"+no[1]);
$("#specialized").html("$"+no[2]);
$("#business").html("$"+no[3]);
/**/

Why it stays highlighted:

$(".color_less") won't match any element, there ain't any element with this class.

You can add the class or change it to something like $("#servicerr-pricing-slider-nums span")

Why aren't the prices changing:

$("#specialized") is looking for an element with this id, you have specified it as a class on the element. Change both to class or id so it can be matched. Preferably id of course.

Ad
source: stackoverflow.com
Ad