jQuery Grid + jqxwindow in firefox
by mogador
HTML
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Open the window" />
<div id="grid"></div>
<div id='jqxwindow'>
<div>Header</div>
<div>Content<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla</div>
</div>
JavaScript
var data = generatedata(200);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
initGrid();
fillGrid();
function initGrid()
{
// Create jqxGrid.
$("#grid").jqxGrid({
source: dataAdapter,
selectionmode: 'singlerow',
editable: false,
sortable: true,
filterable: true,
columnsresize: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}]
});
}
function fillGrid()
{
$("#grid").jqxGrid({autoheight: true});
$("#grid").jqxGrid('updatebounddata');
}
$('#jqxwindow').jqxWindow({
theme: 'darkblue',
width: "90%",
height: 550,
autoOpen: false
});
$("#jqxbutton").jqxButton({
theme: 'darkblue',
width: 150,
height: 30
});
$('#jqxbutton').click(function() {
let iNavigateurW = $(window).width();
let iNavigateurH = $(window).height();
let iNavigateurScrollH = $(window).scrollLeft()
let iNavigateurScrollV = $(window).scrollTop();
let iWindowW = $("#jqxwindow").jqxWindow('width');
let iWindowH = $("#jqxwindow").jqxWindow('height');
let iX = 0;
let iY = 0;
if(iWindowW < iNavigateurW) // Fenêtre tient dans le Navigateur => On la centre
iX = (iNavigateurW / 2) - (iWindowW / 2);
else // Fenêtre plus large que l'écran
iX = 5;
if(iWindowH < iNavigateurH) // Fenêtre tient dans le Navigateur => On la centre
iY = ((iNavigateurH - iWindowH) / 2) + iNavigateurScrollV;
else
iY = 5 + iNavigateurScrollV;
if((isNaN(iX) == true) || (isNaN(iY) == true))
{
var sPosition = sX + "," + sY;
$("#jqxwindow").jqxWindow({position: sPosition});
}
else
{
...