0

Pretty new to making web apps and was trying to reproduce these sliders from [this fiddle example] (http://jsfiddle.net/redsunsoft/caPAb/2/) but can't get the sliders/interactivity to show-up no matter what I try. The following is the html i am trying to render with python/flask (basic jqueryUI objects/sliders work when I tried a simple one from the examples) but this one does not render. This is the output, where the sliders won't render. Any help/guidance here would be great!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>
        var sliders = $("#sliders .slider");
        var availableTotal = 100;
        sliders.each(function() {
            var init_value = parseInt($(this).text());

             $(this).siblings('.value').text(init_value);

             $(this).empty().slider({
                    value: init_value,
                    min: 0,
                    max: availableTotal,
                    range: "max",
                    step: 2,
                    animate: 0,
                    slide: function(event, ui) {
            
                        // Update display to current value
                        $(this).siblings('.value').text(ui.value);

                        // Get current total
                        var total = 0;

                        sliders.not(this).each(function() {
                            total += $(this).slider("option", "value");
                        });

                        // Need to do this because apparently jQ UI
                        // does not update value until this event completes
                        total += ui.value;

                        var delta = availableTotal - total;
            
                        // Update each slider
                        sliders.not(this).each(function() {
                            var t = $(this),
                                value = t.slider("option", "value");

                             var new_value = value + (delta/2);
                            
                             if (new_value < 0 || ui.value == 100) 
                                new_value = 0;
                             if (new_value > 100) 
                                new_value = 100;

                            t.siblings('.value').text(new_value);
                            t.slider('value', new_value);
            });
        }
    });
});



     </script>
</head>
<body>
    <ul id="sliders">
        <li>
            <div class="slider">70</div>
            <span class="value">0</span>%
        </li>
        <li>
            <div class="slider">20</div>
            <span class="value" >0</span>%
        </li>
        <li>
            <div class="slider">10</div>
            <span class="value">0</span>%
        </li>
    </ul>
 </body>
</html>
xovut
  • 3
  • 2
  • Duplicate of: https://stackoverflow.com/questions/18602331/why-is-this-jquery-click-function-not-working – Roko C. Buljan Jul 24 '21 at 07:22
  • Don't put ` – Roko C. Buljan Jul 24 '21 at 07:22
  • Oh wow. That worked. I thought we were supposed to put all scripts into . Thanks for that! Very helpful – xovut Jul 24 '21 at 07:48
  • You're welcome ;) JS should be the last thing in your Document in a non-blocking manner. As you learned already the document is read from top to bottom. Some JS in head cannot know about elements that were still not encountered by the DOM parser - unless specifically told to wait for DOM to be ready (or [using some specific attributes or types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)). Hope that clarifies it. – Roko C. Buljan Jul 24 '21 at 07:59

0 Answers0