jquery slider initialization in javascript

Question

I have the following code inside my tabs.js file:

window.onload=function(){

    var questonsDiv = document.getElementById('questions');

    var question_left = ["1. I am uncompetitive, I avoid conflict", "2. I do things at my easy pace",
     "3. I feel as though there is always plenty of time", "4. I get satisfaction from doing one thing at a time",
"5. I get satisfaction from doing one thing at a time"];

var question_right = ["I am highly competitive","I do things quickly like eating and walking",
"I feel as though there is never enough time","I usually keep several balls in the air at the same time",
"I usually keep several balls in the air at the same time"];


for (var i in question_left)
    {
       var question = document.createElement("div");
       question.id="questionDiv";


     var qLeft = document.createElement("p");    //Product description -- image heading
        qLeft.id="qLeft";
        var qLeft_text = document.createTextNode(question_left[i]);
        qLeft.appendChild(qLeft_text);
        question.appendChild(qLeft);

        var slider_holder = document.createElement("div");
        slider_holder.id="slider-holder";
        slider_holder.classList.add=('slider-holder');


        var slider = document.createElement("div");
        slider.id="slider";
        slider.classList.add=('slider');
        slider_holder.appendChild(slider);


        var slider_labels = document.createElement("div");
        slider_labels.id="slider_labels";
        slider_labels.classList.add=('slider_labels');
        slider_holder.appendChild(slider_labels);


        question.appendChild(slider_holder);


        var qRight = document.createElement("p");    //Product description -- image heading
       qRight.id="qRight";
        var qRight_text = document.createTextNode(question_right[i]);
        qRight.appendChild(qRight_text);
        question.appendChild(qRight);




        questonsDiv.appendChild(question);

    }

In extrenal slider.js :

$( ".slider" ).slider({ min: 1, max: 5, step: 1, create : function(event,ui) { var maxValue = $(this).slider("option","max"); var stepValue = $(this).slider("option","step");

    var steps = maxValue/stepValue;
    $(event.target).next().append('<span style="left:'+1+'%;">'+1+'</span>');
    for(i=2;i<=steps;i++) {
      var val = (stepValue*i);
      var label = val*10;
       $(event.target).next().append('<span style="left:'+label+'%;">'+val+'</span>');
    }
  }
});

And my html:
... .....

I want to fit in the slider inside the rectangular div in attached screenshot. But unable to do it. How do i fix it? Issue is its not taking up the jquery ui slider.

so will be called before the external js function get called.. — Jaimin MosLake

cracker cracker · Accepted Answer · 2014-08-23T06:52:31

window.onload (a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered. So if your images stall, that can take some time.

you can use jQuery's $(document).ready() - it will fire when the HTML has been parsed but before the browser has finished loading all external resources.

Last : you need to change the window.onload to $(document).ready()

But do take care that your script inside window.load must be above the external JS file.

jquery slider initialization in javascript

1 Answers