Home/ Questions/Q 6202719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:47:18+00:00

I am not good in javascript. But recently I was given the task of

  • 0

I am not good in javascript. But recently I was given the task of creating a slider. I thought I can create one using dojo. When i went to the the jsp page I saw that there is already dojo used in the same jsp file and it looks somewhat like this.

 <script language="JavaScript" type="text/javascript" src="js/dojo/dojo-release-1.3.1/dojo/dojo.js" djConfig="parseOnLoad: true, locale: '<%=request.getLocale().getLanguage()%>'"></script>

and 

    window.onload = function() {
        dojo.require("dojo.number");
    };

I don’t know what this means.

My question is that how can i create a slider with this version of dojo which is already used in the file. Any reference links if highly appreciated.

In addition the web prject has following structure for dojo library(See SnapShot)enter image description here.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since I already had a jsfiddle with this, I’m going to assume the answer to my comment is yes 🙂 Try the following. Inside your window.onload function add a few more lines:

    window.onload = function() {
    dojo.require("dojo.number");

    dojo.require("dijit.form.HorizontalSlider");
    dojo.require("dijit.form.HorizontalRule");
    dojo.require("dijit.form.HorizontalRuleLabels");


    dojo.addOnLoad(function() {
        dojo.parser.parse()
    });
}

    The dojo.require calls tell Dojo to load some more javascript from your server. Since we want to make a slider, Dojo needs the slider’s javascript files.

    The dojo.addOnLoad call tells Dojo to add a function to its onLoad event. We are already inside window.onload, but since we are loading more javascript from the server, we have to use Dojo’s own onLoad event to wait for the new scripts to load.

    The function we want to call in Dojo’s onLoad event is dojo.parser.parse. This function scans your HTML, and if it detects any Dojo markup, it turns it into nice widgets (like a slider, for example). This means we need some Dojo markup in the HTML, so add the following to your HTML where you want the slider to appear.

    <div dojoType="dijit.form.HorizontalSlider" maximum="100" minimum="0"
    style="width:250px" id="slider1" name="slider1">
        <div dojoType="dijit.form.HorizontalRule" style="height: 4px" count="10"></div>
        <div dojoType="dijit.form.HorizontalRuleLabels" count="5"></div>
</div>

    Dojo’s parser will replace this with a beautiful slider, there’s just one more thing we have to do – make sure we have the right CSS loaded. The file we want is called “tundra.css” (actually, there are other styles you can use, but tundra is quite nice). Add an import in your CSS, or for exaple

    <link rel="stylesheet" href="js/dojo/dojo-release-1.3.1/dijit/themes/tundra/tundra.css">

    To make sure the tundra style is applied to your slider, also add class="tundra" to your body tag.

    Hope this helps. Take a look at this link for more clues and ideas: http://archive.dojotoolkit.org/dojo-2010-05-01/dojotoolkit/dijit/tests/form/test_Slider.html (this isn’t really 1.3.1, but it should be similar).

    • 0