jQWidgets Forums

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

RangeSelector does not return range properly Posts

January 13, 2014 at 7:55 pm RangeSelector does not return range properly #47802

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

January 13, 2014 at 8:59 pm RangeSelector does not return range properly #47808

Peter Stoev

Keymaster

Hi Igor,

Please, provide a sample which demonstrates the reported behavior.

Best Regards,
Peter Stoev

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

January 13, 2014 at 9:56 pm RangeSelector does not return range properly #47811

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>

January 14, 2014 at 6:52 am RangeSelector does not return range properly #47820

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

January 14, 2014 at 10:17 am RangeSelector does not return range properly #47832

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

January 14, 2014 at 11:22 am RangeSelector does not return range properly #47845

Peter Stoev

Keymaster

Hi kingaru,

Don’t set margin and especially in Percentages.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.