This topic contains 15 replies, has 2 voices, and was last updated by BrentH 4 months, 3 weeks ago.
-
In addition to the bulb that needs to be resizable, I found this bug as well…
In this code, I put the slider control in a window control. The window control starts out with autoOpen: false. There is a button that opens and expands the window. However, the slider control is never created – or at least connected to the div – when the window is initialized as hidden.
Afterwards, I cannot run the ‘setValue’ (commented in the code below). And when the window opens, the sliders do not appear! Note that if I start with autoOpen: true, everything works perfectly (except the bulb is too large). So I am quite certain you have a bug when creating a slider that starts out hidden. (code is below). How do I make the slider appear when opening the window?
Thanks
Brent<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Test JQWidgets</title><style>
.layerCheckbox {
padding: 0px;
margin: 0px;
vertical-align: 3px;
z-index: 1000;
}.layerSlider2 {
display: inline-block;
margin-left: 3px;
margin-right: 7px;
}.layerLabel {
text-wrap: normal;
font-weight: normal;
vertical-align: 5px;
margin-left: -40px;
}#toolBoxWindow, #layersWindow {
z-index: 200;
}#OpenToolBoxWindow, #OpenLayersWindow, #OpenCoordsWindow {
width: 30px;
height: 30px;
opacity: .7;
z-index: 100;
}#OpenToolBoxWindow:hover,
#OpenLayersWindow:hover,
#OpenCoordsWindow:hover {
opacity: 1;
height: 35px;
width: 35px;
transform: scale(1.02);
}
</style>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/scripts/jquery-3.3.1.min.js”></script> <!–The latest 3.7.1 seems to break GeoView–>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/scripts/MicrosoftAjax.js”></script><!– DOESN’T WORK –>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxcore.js”></script>
<!–<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxdata.js”></script>–>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxwindow.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxbuttons.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxpanel.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxtree.js”></script>
<script type=”text/javascript” src=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/jqxslider.js”></script><link rel=”stylesheet” href=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/styles/jqx.ui-smoothness.css” type=”text/css” />
<link rel=”stylesheet” href=”https://gissvr.leepa.org/jqwidgets/jqwidgets2310/styles/jqx.summer.css” type=”text/css” /><script type=”text/javascript”>
$(document).ready(function () {
layerwinpos = $(window).width() – 308; //position for the default left of this window
$(‘#layersWindow’).jqxWindow({ width: 300, height: $(window).height() – 70, maxHeight: 600, position: { x: layerwinpos, y: 4 }, resizable: true, autoOpen: false, theme: ‘ui-smoothness’, closeButtonSize: 25 });$(‘#tvLayers’).jqxTree({
height: ‘100%’, width: ‘100%’, hasThreeStates: false, toggleMode: ‘dblclick’,
checkboxes: false, theme: ‘ui-smoothness’
});$(‘#slWebBaseShades’).jqxSlider({ theme: ‘ui-smoothness’, min: 0, max: 100, value: 0, step: 5, showButtons: false, showTicks: false, width: 90, height: 18 });
$(‘#slParcelLayer’).jqxSlider({ theme: ‘ui-smoothness’, min: 0, max: 100, value: 100, step: 5, showButtons: false, showTicks: false, width: 90, height: 18 });//$(‘#slWebBaseShades’).jqxSlider(‘setValue’, 0);
$(‘#slWebBaseShades’).on(‘change’, function (event) { ChangeOpacity(event.args.value); });
$(‘#slParcelLayer’).on(‘change’, function (event) { ChangeOpacity(event.args.value); });$(‘#OpenLayersWindow’).mouseup(function () {
$(‘#layersWindow’).jqxWindow(‘expand’);
$(‘#layersWindow’).jqxWindow(‘open’);
$(‘#OpenLayersWindow’).hide();
});$(‘#layersWindow’).on(‘close’, function (event) {
$(‘#OpenLayersWindow’).show();
});});
function ChangeOpacity(value) {
//alert(value);
}</script>
</head>
<body>
The issues are, when autoOpen is set to false and window is opened with a button (click image in upper right of demo),<br/>
The sliders were never initialized and so do not appear in the window.<br/>
In addtion the slider bulbs cannot be resized.
<div id=”layersWindow”>
<div id=”layersWindowHeader”>
<span id=”captureContainer” style=”float: right”>Layer Controls and Legend</span>
</div>
<div id=”layersWindowContent” style=”overflow: hidden”>
<div id=’tvLayers’>-
<div style=”display: flex;”>
<input id=”cbWebBaseShades” class=”layerCheckbox” type=”checkbox” checked=”checked” />
<div id=’slWebBaseShades’ class=”layerSlider2″></div>
<label id=”tbWebBaseShades” class=”layerLabel”>1st Row.</label>
</div> -
<div style=”display: flex;”>
<input id=”cbParcelLayer” class=”layerCheckbox” type=”checkbox” />
<div id=’slParcelLayer’ class=”layerSlider2″></div>
<label id=”tbParcelLayer” class=”layerLabel”>2nd Row.</label>
</div>
</div>
</div>
</div>
</body>
</html> -
<div style=”display: flex;”>
You must be logged in to reply to this topic.