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

Tagged: , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Position RangeSelector around embedded pic Posts
  • January 27, 2016 at 3:16 pm Position RangeSelector around embedded pic #80847

    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?

    January 28, 2016 at 9:29 am Position RangeSelector around embedded pic #80883

    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/

    January 28, 2016 at 11:32 am 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!!

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

You must be logged in to reply to this topic.