My first widget

[DaveC426913Member]

I am trying to get my first widget – a slider – to appear on my page.

I’ve been following this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxslider/index.htm?%28ui-le-frog%29#demos/jqxslider/defaultfunctionality.htm

jQuery is up and going – I have other methods that use it, but the widget is not visible. My first suspicion is that I need to set a theme (though my second suspicion is that there’s some sort of default look, and I’m barking up the wrong tree as to why it’s not working).

I’ve included these files at the top of my page:

    <script type="text/javascript" src="/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/jquery/jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jquery/jqwidgets/jqwidgets/jqxslider.js"></script>    
    <script type="text/javascript" src="/jquery/jqwidgets/jqwidgets/jqxbuttons.js"></script>    

then I stuck this in a table:

                                <span style="font-style: italic;">Red</span>
                                <div id='redLevel'></div>
                                <span style="font-style: italic;">Green</span>

and invoke it like this:

$(document).ready( function() {
    $('#redLevel').jqxSlider({
        min:            0,
        max:            255,
        ticksFrequency: 25.5,
        value:          0,
        step:           25.5,
        theme:          getTheme()
    });
});

which means I need to add this:

    <script type="text/javascript" src="/jquery/jqwidgets/scripts/gettheme.js"></script>

So, I see Red and Green in italics, but there’s a big empty gap between them. The HTML in this gap looks like it’s what it’s supposed to be:

<span style="font-style: italic;">Red</span>
<div id="redLevel" class="jqx-slider jqx-widget" style="width: 300px; height: 30px;" tabindex="0">
    <div id="jqxWidget1c433080d7d8" class="jqx-slider-left jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal jqx-slider-button" style="width: 14px; height: 14px; display: block; background-position: center center; float: left; margin-left: 0px; margin-top: 8px; margin-right: 9px;">
        <div class="icon-arrow-left" style="width: 100%; height: 100%;"></div>
    </div>
    <div style="float: left; width: 252px; height: 30px;">
        <div class="jqx-slider-tickscontainer" style="width: 252px; height: 14px; float: none; visibility: visible;">
            <div class="jqx-slider-tick-horizontal jqx-slider-tick jqx-fill-state-pressed" style="float: left; position: absolute; left: 0px; top: 5px; height: 7px;"></div>
            etc...
        </div>
        <div class="jqx-slider-track jqx-slider-track-horizontal jqx-fill-state-normal jqx-rc-all" style="width: 252px; float: none;">
            <div class="jqx-slider-slider jqx-slider-slider-horizontal jqx-fill-state-normal" style="left: -126px; top: 0px; visibility: hidden; z-index: 15;" title="0"></div>
            <div class="jqx-slider-slider jqx-slider-slider-horizontal jqx-fill-state-normal" style="left: -126px; top: 0px; z-index: 20;" title="0"></div>
            <div class="jqx-slider-rangebar jqx-fill-state-pressed jqx-rc-all" style="display: block; height: 0px; width: 0px; position: absolute; left: 208px; top: 0px;"></div>
        </div>
        <div class="jqx-slider-tickscontainer" style="width: 252px; height: 14px; float: none; visibility: visible;">
            <div class="jqx-slider-tick-horizontal jqx-slider-tick jqx-fill-state-pressed" style="float: left; position: absolute; left: 0px; top: 2px; height: 7px;"></div>
            <div class="jqx-slider-tick-horizontal jqx-slider-tick jqx-fill-state-pressed" style="float: left; position: absolute; left: 25px; top: 2px; height: 7px;"></div>
            etc...
        </div>
    </div>
    <div id="jqxWidget7cdc94863236" class="jqx-slider-right jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal jqx-slider-button" style="width: 14px; height: 14px; display: block; background-position: center center; float: left; margin-left: 11px; margin-top: 8px;">
        <div class="icon-arrow-right" style="width: 100%; height: 100%;"></div>
    </div>
    <input type="hidden" name="redLevel" value="0">
</div>
<span style="font-style: italic;">Green</span>

So slider is rendered yet blank. No errors are generated. What am I missing?

[DimitarParticipant]

Hello DaveC426913,

Please make sure you have included jqx.base.css as it is vital for rendering the widget.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[DaveC426913Member]

Yeah. Found that out after scrutinizing the code further. Thanks!

[Author]

Posts