jQWidgets Forums

jQuery UI Widgets Forums Editors ScrollBar, Slider, BulletChart, RangeSelector RangeSelector does not return range properly

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

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

  • kingaru
    Participant

    Hello,

    I have got pretty interesting issue with the rangeSelector which only appears under FireFox and Chrome in Windows under Linux and IE11 the issue does not seems to be visible. Every time when number of objects in the rangeSelector is greater than width of the rangeSelector divided by 2 it starts returning wrong ranges. For instance if the width of the rangeSelector is 800px but number of objects is 400+ every 10th object returned with the value of the every 9th one with one exception – object 1 will be always be returned with value 0.

    0 returned as 0
    1 returned as 0
    2 returned as 2
    3 returned as 3
    4 returned as 4
    5 returned as 5
    6 returned as 6
    7 returned as 7
    8 returned as 8
    9 returned as 9
    10 returned as 9
    11 returned as 11
    12 returned as 12
    13 returned as 13
    14 returned as 14
    15 returned as 15
    16 returned as 16
    17 returned as 17
    18 returned as 18
    19 returned as 19
    20 returned as 19

    Regards
    Igor


    Peter Stoev
    Keymaster

    Hi Igor,

    Please, provide a sample which demonstrates the reported behavior.

    Best Regards,
    Peter Stoev

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


    kingaru
    Participant

    Hi Peter,

    Here is the quick example the output goes to console so when you slide the range from 0 to 1 it has to be 1 but in console output gives you 0. What I just found as well that if you will wrap the range Selector in to an expander the problem get solved … below are both examples.

    —without expander – issue —

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> 
    
        
    <script>
        
    $(document).ready(function () {
    
    document.body.scroll = "no";
    document.body.style.overflow = 'hidden';
    document.height = window.innerHeight;
    
    	$("#jqxTabs").jqxTabs({ height: '95vh'  , width: '100%', position: 'top',  animationType: 'fade' , 
    				selectionTracker: 'checked' ,theme: 'ui-redmond'});  
    
                
    			
    // --------------------     
         
    
                    $("#rangeSelector").jqxRangeSelector(
                        {
                            width: 800, height: 90, min: 0, max: 527,
                            range: {from: 0, to: 527}, 
                            labelsOnTicks: false,
                            resizable: true,
                            majorTicksInterval: 12, minorTicksInterval: 1,
                            showLabels: false
                        });
                    
    	$("#rangeSelector").on("change", function (event) 
    				{
    					var range = $("#rangeSelector").jqxRangeSelector("getRange");	
    					console.log("From:",range.from);
    					console.log("To:",range.to);
    				});
    			
    			
    }); // End of the .ready() function
        
    </script>
    
    </head>
    
    <body class='default'>
    
    <div id='jqxTabs'>
    		<ul>
    		<li style="margin-left: 50px;">Tab 1</li>
    
    		</ul>
    
        <div>
    			<div>An Expander</div>
    				<div >  <!-- Body of the Expander -->
    					<div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" >
    						<div id="rangeSelector" style="margin: 0 auto; position: relative" >
    							<div id="jqxRangeSelectorContent">
    							</div>
    						</div>
    					</div>	
    		
    				</div>
    		</div>
    	
    
    </div>
    
    </body>
    </html>
    

    here is the example where it is wrapped in to expander.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> 
        <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> 
    
        
    <script>
        
    $(document).ready(function () {
    
    document.body.scroll = "no";
    document.body.style.overflow = 'hidden';
    document.height = window.innerHeight;
    
    	$("#jqxTabs").jqxTabs({ height: '95vh'  , width: '100%', position: 'top',  animationType: 'fade' , 
    				selectionTracker: 'checked' ,theme: 'ui-redmond'});  
    
    			$("#expander").jqxExpander({ toggleMode: 'none', width: '98%' , showArrow: false, theme: 'energyblue'  });
                
    			
    // --------------------     
         
    
                    $("#rangeSelector").jqxRangeSelector(
                        {
                            width: 800, height: 90, min: 0, max: 527,
                            range: {from: 0, to: 527}, 
                            labelsOnTicks: false,
                            resizable: true,
                            majorTicksInterval: 12, minorTicksInterval: 1,
                            showLabels: false
                        });
                    
    	$("#rangeSelector").on("change", function (event) 
    				{
    					var range = $("#rangeSelector").jqxRangeSelector("getRange");
    					console.log("From:",range.from);
    					console.log("To:",range.to);
    				});
    			
    			
    }); // End of the .ready() function
        
    </script>
    
    </head>
    
    <body class='default'>
    
    <div id='jqxTabs'>
    		<ul>
    		<li style="margin-left: 50px;">Tab 1</li>
    
    		</ul>
    
        <div>
    		<div id="expander" style="margin-left: 1%; margin-top: 1%; margin-right: 1%">
    			<div>An Expander</div>
    				<div >  <!-- Body of the Expander -->
    					<div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" >
    						<div id="rangeSelector" style="margin: 0 auto; position: relative" >
    							<div id="jqxRangeSelectorContent">
    							</div>
    						</div>
    					</div>	
    		
    				</div>
    		</div>
    	
    	</div>
    
    </div>
    
    </body>
    </html>
    

    Peter Stoev
    Keymaster

    Hi kingaru,

    That is due to the reason of the margin which you use. It happens so your range selector’s left position is for example: 70.5px and due to the rounding the result is like that. We will work on that for the future versions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    kingaru
    Participant

    Hi Peter,

    Thanks for clarifying this! Could you please suggest what would be the best workaround for this problem for now?

    Regards
    Igor


    Peter Stoev
    Keymaster

    Hi kingaru,

    Don’t set margin and especially in Percentages.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.