jQuery UI Widgets Forums Editors ScrollBar, Slider, BulletChart, RangeSelector Position RangeSelector around embedded pic

This topic contains 2 replies, has 2 voices, and was last updated by  JugglingReferee 8 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • JugglingReferee
    Participant

    I’m getting the widgets working well, with this one quirk:

    I have a PNG image. It’s 984 wide x 474 tall.

    I’d like the RangeSelector to be over the picture. I can do that successfully with the backgroundImage option.

    What happens is that the RangeSelector is positioned at the top left of the picture. I’d like it to be 30 pixels from the top, and 162 pixels from the left side.

    I’ve tried editting the classes (jqx-rangeselector and such) to no avail. I’ve tried all the class position options.
    I’ve tried embedding inside other divs.

    Is there a way to position the RangeSelector anywhere I want when it’s overtop of a backgroundImage?


    Dimitar
    Participant

    Hello JugglingReferee,

    You can try the approach presented in the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
        <style type="text/css">
            #rangeSelectorParent
            {
                width: 700px;
                height: 300px;
                background-image: url('../../images/imageNature2.jpg');
                position: relative;
            }
            #rangeSelector
            {
                top: 30px;
                left: 162px;
                position: absolute;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // create jqxRangeSelector.
                $("#rangeSelector").jqxRangeSelector({ width: 350, height: 50, min: 0, max: 200, range: { from: 10, to: 50 }, majorTicksInterval: 20, minorTicksInterval: 1 });
            });
        </script>
    </head>
    <body>
        <div id="rangeSelectorParent">
            <div id="rangeSelector">
                <div id="rangeSelectorContent">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Position RangeSelector around embedded pic #80895

    JugglingReferee
    Participant

    That did work, thank you.

    I just have to implement the image as a canvas now.

    An interesting issue arose! The marker stays within the bounds of the div, which is to be expected, but I need the markers above a particular spot in the image. haha. So I’ll have to increase the size of the image.

    Thanks!!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.