Get rowIndex = -1 in Chrome. In IE, FF works fine - google-chrome

I would like for first row and column of cells to be assigned a letter and a digit (like an excel table), with rows (cell.cellIndex == 0), no problems it's working fine, but for every column (row.rowIndex == 0 && cell.cellIndex != 0) it works only in browsers IE and FF, in Chrome it's not working. It gets a rowIndex = -1
for (var i = 0; i <= inpRow.value; i++) {
array[i] = new Array();
arrayFunc[i] = new Array();
row = document.createElement('tr')
table.appendChild(row);
for (var j = 0; j <= inpCol.value; j++) {
cell = document.createElement('td');
row.appendChild(cell);
cell.setAttribute('id', (i) + "." + (j));
if (row.rowIndex == 0 && cell.cellIndex != 0) { // row.rowIndex in chrome gets -1
if ((j-1) >= 26) { // j-1 to asign letter from the second cell
var tmp = (j-1) / 26;
for (var f = 0; f < parseInt(tmp, 10) ; f++) {
for (var k = 0; k <= (j-1) - (26 * parseInt(tmp, 10)) ; k++) {
cell.innerHTML = '<b>' + String.fromCharCode(f + 65) + String.fromCharCode(k + 65) + '</b>';
}
}
} else {
cell.innerHTML = '<b>' + String.fromCharCode(j + 64) + '</b>';
}
cell.style.backgroundColor = 'gray';
} else if (cell.cellIndex == 0) {
cell.innerHTML = '<b>' + i + '</b>';
cell.style.backgroundColor = 'gray';
}
}
I have alternative variant using not row and cell Index, but using id:
cell.id.substr(0, 1) == '0' && cell.id != '0.0'
and it works fine in all browsers, but i would like to use cell and row Index:
row.rowIndex == 0 && cell.cellIndex != 0
Full code

It seems like both Chrome and Safari assign a row index of -1 to each row you append to a table using the "document.createElement('tr');" approach. Then there is no point searching for or comparing rows by index since each row is simply -1.
Instead of the following 2 lines just before the start of you 2nd for loop:
row = document.createElement('tr')
table.appendChild(row);
use:
row = table.insertRow(-1);
This should do exactly the same job, but Chrome and Safari will now insert correct indexes for each row.

It was a bug in the Webkit layout engine, (that moved to the forked Blink engine as well). This is why it works well in Firefox but not in Chrome (Blink) or Safari (Webkit).
The bug is reported here.

Related

Changes not having any effect out of nowhere

I was working along and out of nowhere my changes stopped applying. The code functions up until the last logger instruction I wrote in.
Now any change I make to the code is acting like it isn't even there. I click save and run the code, but nothing I change actually takes effect. No instances of Logger.log("hello") do anything, but everything else runs as written.
//variables for shorthand calling of each spread sheet
var ssL = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SpecsList");
var ssR = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("RequiredSpecs");
//count the number of columns to determine the max range of the spec comparison iterator
var specIteratorMax = ssL.getLastColumn() - 2; // the -2 is to ignore column A which is text and rebase the iterator variable to 0
function runHeatMap() {
//voltage spec compare section
Logger.log("hello");
//retrieve the users preferred output voltage rating
var voltReqed = ssR.getRange("A2").getValue();
Logger.log(voltReqed);
//retrieve the output voltage ratings of all devices
var voltCompareData = ssL.getSheetValues(3, 2, 1, (ssL.getLastColumn() - 1)).flat();
Logger.log(voltCompareData);
Logger.log("hello");
Logger.log(specIteratorMax);
//store current iteration voltage spec and conduct comparison operations
for (var i = 0; i <= specIteratorMax; i++) {
var voltSpec = voltCompareData[i];
Logger.log(voltSpec);
if(voltSpec >= voltReqed) {
ssL.getRange(3,i + 2).setBackground("green");
}
else if(voltSpec < voltReqed && voltSpec >= (voltReqed * 0.95)) {
ssL.getRange(3,i + 2).setBackground("orange");
}
else {
ssL.getRange(3,i + 2).setBackground("red");
}
}
Logger.log("hello");
}
It seems to run on random data
I reduced it down to this:
function runHeatMap() {
var sh0 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet0");
var sh1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var max = sh0.getLastColumn() - 2;
var v1 = sh1.getRange("A2").getValue();
var vs = sh0.getSheetValues(3, 2, 1, sh0.getLastColumn() - 1).flat();
for (var i = 0; i <= max; i++) {
var v2 = vs[i];
if (v2 >= v1) {
sh0.getRange(3, i + 2).setBackground("green");
}
else if (v2 < v1 && v2 >= (v1 * 0.95)) {
sh0.getRange(3, i + 2).setBackground("orange");
}
else {
sh0.getRange(3, i + 2).setBackground("red");
}
}
}

Problem with executing google app script (google slides) after renaming presentation and script

I'm quite new to programming and using google apps scripts.
I wrote script that splits selected text in text box (google slides) in different text boxes (each line of initial textbox is a separated textbox). Code was just a modification of examples from developers.google.com.
function SelectedTextGrabber() {
var selection = SlidesApp.getActivePresentation().getSelection();
var selectionType = selection.getSelectionType();
var currentPage;
switch (selectionType) {
case SlidesApp.SelectionType.NONE:
Logger.log('Nothing selected');
break;
...
case SlidesApp.SelectionType.TEXT:
var tableCellRange = selection.getTableCellRange();
if (tableCellRange != null) {
var tableCell = tableCellRange.getTableCells()[0];
Logger.log('Selected text is in a table at row ' +
tableCell.getRowIndex() + ', column ' +
tableCell.getColumnIndex());
}
var textRange = selection.getTextRange();
if (textRange.getStartIndex() == textRange.getEndIndex()) {
Logger.log('Text cursor position: ' + textRange.getStartIndex());
} else {
Logger.log('Selection is a text range from: ' + textRange.getStartIndex() + ' to: ' +
textRange.getEndIndex() + ' is selected');
var s1 = textRange.asString();
var s2 = '';
var s3 = [];
for (var i = 0; i < s1.length; i++){
if (s1[i] === '\n' || i === s1.length -1) {
s3.push(s2);
s2='';
} else {
s2 += s1[i];
}
}
// textbox parameteres
var h4 = 0;
var left = 10;
var top = 10;
var textsize = 12;
var standnum = 37;
var width = 2 * textsize + (textsize - textsize % 2) / 2 * standnum;
Logger.log(width);
var slide = SlidesApp.getActivePresentation().getSlides()[1];
for (var i = 0; i < s3.length; i++){
//анализ размера текстового блока
var s4 = s3[i].length;
if (s4 <= standnum) {
h4 = textsize * 2;
} else {
h4 = textsize * 2 + (s4 - s4 % standnum) / standnum * textsize;
}
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, left, top, width, h4);
var textRange = shape.getText();
textRange.setText(s3[i]);
textRange.getTextStyle().setFontSize(textsize);
top += h4;
if (top > 370) {
top = 10;
left += width;
}
}
}
break;
case SlidesApp.SelectionType.TABLE_CELL:
var tableCells = selection.getTableCellRange().getTableCells();
var table = tableCells[0].getParentTable();
Logger.log('There are ' + tableCells.length + ' table cells selected.');
break;
case SlidesApp.SelectionType.PAGE:
var pages = selection.getPageRange().getPages();
Logger.log('There are ' + pages.length + ' pages selected.');
break;
default:
break;
}
}
It worked just fine, but when I renamed script and presentation, I get the TypeError: Cannot call method "getSelectionType" of null. (line 4, file "Code").
After 30 minutes of waiting this script started working again without errors.
I thought it may happen because it takes time to make some changes in google servers.
But when I modified initial text in text box to be splitted the script gave me the same result as I didn't change initial text (the result is separated lines in textboxes but for initial text).
Do u have any idea what should I do to fix it?

How to dynamically add mat-icon to divs with angular renderer2?

I have a HTML with a lot of divs. I have already generated divs that look like this.
static HTML (not dynamically generated) example of desired result using renderer2
<div class="time-rowss clearfixx" #timerowss>
<div><mat-icon>today</mat-icon> date </div>
</div>
<div class="time-rows clearfix" #timerows>
<div><mat-icon>brightness_3</mat-icon>00:00</div>
<div><mat-icon>brightness_3</mat-icon>01:00</div>
<div><mat-icon>brightness_3</mat-icon>02:00</div>
</div>
I want to achieve the same but dynamically generating the divs.
What I have done so far is add dynamically times and dates.
Here is my code:
for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
time = newTime;
const date = this.renderer.createElement('div');
this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
this.renderer.appendChild(this.d7.nativeElement, date);
for (let i = 0; i < 24; i++) {
const b = this.renderer.createElement('div');
const icon = this.renderer.createElement('mat-icon');
if (i < 7 || i > 18) {
this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
} else {
this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
}
let text;
if (i >= 10) {
text = ' ' + i;
} else {
text = '0' + i;
}
this.renderer.appendChild(b, icon);
this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
this.renderer.appendChild(this.d3.nativeElement, b);
}
}
I have tried several options:
this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
this.renderer.setProperty(icon, 'svgIcon', 'wb_sunny');
this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
this.renderer.setAttribute(icon, 'svgIcon', 'brightness_3');
this.renderer.appendChild(icon, this.renderer.createText('brightness'));
this.renderer.appendChild(icon, 'brightness_3');
none of these options work. I also tried iconName instead of svgIcon.
how should I add iconName or svgIcon with renderer2?
I figured it out. I what I was noticed when I tried to add mat-icon value with renderer createText. It was adding it correctly. The problem was that the IconName was appearing in html as name not as an icon. So I realized the css was missing. I looked into the dev tools and inspected the divs and mat-icons. I found out that they were missing classes.
So I added the classes manually.
In short
you need to create mat-icon element.
const dateIcon = this.renderer.createElement('mat-icon');
add value using createText.
this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
give classes for css styling.
this.renderer.addClass(dateIcon, 'mat-icon');
this.renderer.addClass(dateIcon, 'material-icons');
Full code if curious. -->
for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
time = newTime;
const date = this.renderer.createElement('div');
const dateIcon = this.renderer.createElement('mat-icon');
this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
this.renderer.addClass(dateIcon, 'mat-icon');
this.renderer.addClass(dateIcon, 'material-icons');
this.renderer.appendChild(date, dateIcon);
this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
this.renderer.appendChild(this.d7.nativeElement, date);
for (let i = 0; i < 24; i++) {
const b = this.renderer.createElement('div');
const icon = this.renderer.createElement('mat-icon');
if (i < 7 || i > 18) {
this.renderer.appendChild(icon, this.renderer.createText('brightness_3'));
} else {
this.renderer.appendChild(icon, this.renderer.createText('wb_sunny'));
}
let text;
if (i >= 10) {
text = ' ' + i;
} else {
text = '0' + i;
}
this.renderer.appendChild(b, icon);
this.renderer.addClass(icon, 'mat-icon');
this.renderer.addClass(icon, 'material-icons');
this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
this.renderer.appendChild(this.d3.nativeElement, b);
}
}

ActionScript - Formatting Zero With NumberFormatter?

i've assigned properties to a NumberFormatter object so that formatted values contain a leading zero, trailing zeros and a 2 decimal places.
the formatting works unless the number being formatted is 0. how can i format a 0 with the set properties so that 0 becomes 0.00?
var numFormat:NumberFormatter = new NumberFormatter(LocaleID.DEFAULT);
numFormat.leadingZero = true;
numFormat.trailingZeros = true;
numFormat.fractionalDigits = 2;
trace(numFormat.formatNumber(46)); //46.00
trace(numFormat.formatNumber(0.556849)); //0.56
trace(numFormat.formatNumber(0)); //0
[EDIT]
i've remedied this problem by manually appending the locale decimal separator with the desired number of fractionalDigits if the formatted number is 0:
if (myFormattedNumber.text == "0" && numFormat.fractionalDigits)
{
myFormattedNumber.appendText(numFormat.decimalSeparator);
for (var i:uint = 0; i < numFormat.fractionalDigits; i++)
myFormattedNumber.appendText("0");
}
i'm still very interested in knowing if this is a bug or a feature, but it seems like a oversight to me.
It's not sexy, but this was similar to what I used when I ran into a similar issue:
function numberFormat(number:*, maxDecimals:int = 2, forceDecimals:Boolean = false, siStyle:Boolean = true):String
{
var i:int = 0, inc:Number = Math.pow(10, maxDecimals), str:String = String(Math.round(inc * Number(number))/inc);
var hasSep:Boolean = str.indexOf(".") == -1, sep:int = hasSep ? str.length : str.indexOf(".");
var ret:String = (hasSep && !forceDecimals ? "" : (siStyle ? "," : ".")) + str.substr(sep+1);
if (forceDecimals) for (var j:int = 0; j <= maxDecimals - (str.length - (hasSep ? sep-1 : sep)); j++) ret += "0";
while (i + 3 < (str.substr(0, 1) == "-" ? sep-1 : sep)) ret = (siStyle ? "." : ",") + str.substr(sep - (i += 3), 3) + ret;
return str.substr(0, sep - i) + ret;
}
trace("zero: " + numberFormat(0, 2, true, false))
Full article here
How about Number(value).toFixed(2) ?

Nine-patch images for web development [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm wondering if there is something like 9-patch in Android, but for web development?
Disclosure: I have no idea about web development at all, but I was curious to know if it exists. And a simple web search with the term 9-patch didn't bring up any related results, so I figured it has either another term or it doesn't exist or is not used widely enough.
Anyone knows?
Yes. It is used for border-image in CSS 3:
http://www.css3.info/preview/border-image/
http://www.w3.org/TR/css3-background/#border-images
If you're still interested I created a Javascript file that uses canvas to create real nine patch image support for the web. The open source project can be found here:
https://github.com/chrislondon/9-Patch-Image-for-Websites
Well, I took the trouble to correct deserts errors I found in the link above.
Knowing NinePath android is a useful tool adding dynamic painting and recognition of padding (which was missing in the previous pluying). I could add one few scripts for complete functionality.
Replace the following code in the library path9.js!
function NinePatchGetStyle(element, style)
{
if (window.getComputedStyle)
{
var computedStyle = window.getComputedStyle(element, "");
if (computedStyle === null)
return "";
return computedStyle.getPropertyValue(style);
}
else if (element.currentStyle)
{
return element.currentStyle[style];
}
else
{
return "";
}
}
// Cross browser function to find valid property
function NinePatchGetSupportedProp(propArray)
{
var root = document.documentElement; //reference root element of document
for (var i = 0; i < propArray.length; i++)
{
// loop through possible properties
if (typeof root.style[propArray[i]] === "string")
{
//if the property value is a string (versus undefined)
return propArray[i]; // return that string
}
}
return false;
}
/**
* 9patch constructer. Sets up cached data and runs initial draw.
* #param {Dom Element} div El Elemento dom en donde se pinta el ninepath
* #param {function} callback La funcion que se llamara cuando se termina
* la carga de la imagen y el pintado del elemento div.
* #returns {NinePatch} Un objeto nine path
*/
function NinePatch(div,callback)
{
this.div = div;
this.callback =callback;
this.padding = {top:0,left:0,right:0,bottom:0};
// Load 9patch from background-image
this.bgImage = new Image();
this.bgImage.src = NinePatchGetStyle(this.div, 'background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");
var este = this;
this.bgImage.onload = function()
{
este.originalBgColor = NinePatchGetStyle(este.div, 'background-color');
este.div.style.background = 'none';
// Create a temporary canvas to get the 9Patch index data.
var tempCtx, tempCanvas;
tempCanvas = document.createElement('canvas');
tempCanvas.width = este.bgImage.width;
tempCanvas.height = este.bgImage.height;
tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(este.bgImage, 0, 0);
// Obteniendo el padding lateral derecho
var dataPad = tempCtx.getImageData(este.bgImage.width-1,0,1,este.bgImage.height).data;
var padRight = este.getPadBorder(dataPad,este.bgImage.width,este.bgImage.height);
este.padding.top = padRight.top;
este.padding.bottom = padRight.bottom;
dataPad = tempCtx.getImageData(0,este.bgImage.height-1,este.bgImage.width,1).data;
var padBottom = este.getPadBorder(dataPad,este.bgImage.width,este.bgImage.height);
este.padding.left = padBottom.top;
este.padding.right = padBottom.bottom;
// Loop over each horizontal pixel and get piece
var data = tempCtx.getImageData(0, 0, este.bgImage.width, 1).data;
// Use the upper-left corner to get staticColor, use the upper-right corner
// to get the repeatColor.
var tempLength = data.length - 4;
var staticColor = data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3];
var repeatColor = data[tempLength] + ',' + data[tempLength + 1] + ',' +
data[tempLength + 2] + ',' + data[tempLength + 3];
este.horizontalPieces = este.getPieces(data, staticColor, repeatColor);
// Loop over each horizontal pixel and get piece
data = tempCtx.getImageData(0, 0, 1, este.bgImage.height).data;
este.verticalPieces = este.getPieces(data, staticColor, repeatColor);
// use this.horizontalPieces and this.verticalPieces to generate image
este.draw();
este.div.onresize = function()
{
este.draw();
};
if(callback !== undefined)
{
if (typeof(callback) === "function")
callback();
}
};
}
// Stores the HTMLDivElement that's using the 9patch image
NinePatch.prototype.div = null;
// Padding
NinePatch.prototype.padding = null;
// Get padding
NinePatch.prototype.callback = null;
// Stores the original background css color to use later
NinePatch.prototype.originalBG = null;
// Stores the pieces used to generate the horizontal layout
NinePatch.prototype.horizontalPieces = null;
// Stores the pieces used to generate the vertical layout
NinePatch.prototype.verticalPieces = null;
// Stores the 9patch image
NinePatch.prototype.bgImage = null;
// Gets the horizontal|vertical pieces based on image data
NinePatch.prototype.getPieces = function(data, staticColor, repeatColor)
{
var tempDS, tempPosition, tempWidth, tempColor, tempType;
var tempArray = new Array();
tempColor = data[4] + ',' + data[5] + ',' + data[6] + ',' + data[7];
tempDS = (tempColor === staticColor ? 's' : (tempColor === repeatColor ? 'r' : 'd'));
tempPosition = 1;
for (var i = 4, n = data.length - 4; i < n; i += 4)
{
tempColor = data[i] + ',' + data[i + 1] + ',' + data[i + 2] + ',' + data[i + 3];
tempType = (tempColor === staticColor ? 's' : (tempColor === repeatColor ? 'r' : 'd'));
if (tempDS !== tempType)
{
// box changed colors
tempWidth = (i / 4) - tempPosition;
tempArray.push(new Array(tempDS, tempPosition, tempWidth));
tempDS = tempType;
tempPosition = i / 4;
tempWidth = 1;
}
}
// push end
tempWidth = (i / 4) - tempPosition;
tempArray.push(new Array(tempDS, tempPosition, tempWidth));
return tempArray;
};
NinePatch.prototype.getPadBorder = function(dataPad,width,height)
{
var staticRight = dataPad[0] + ',' + dataPad[1] + ',' + dataPad[2] + ',' + dataPad[3];
var pad={top:0,bottom:0};
// Padding para la parte superior
for (var i=0;i<dataPad.length;i+=4)
{
var tempColor = dataPad[i] + ',' + dataPad[i + 1] + ',' + dataPad[i + 2] + ',' + dataPad[i + 3];
if(tempColor !==staticRight)
break;
pad.top++;
}
// padding inferior
for (var i=dataPad.length-4;i>=0;i-=4)
{
var tempColor = dataPad[i] + ',' + dataPad[i + 1] + ',' + dataPad[i + 2] + ',' + dataPad[i + 3];
if(tempColor !==staticRight)
break;
pad.bottom++;
}
return pad;
};
// Function to draw the background for the given element size.
NinePatch.prototype.draw = function()
{
var dCtx, dCanvas, dWidth, dHeight;
if(this.horizontalPieces === null)
return;
dWidth = this.div.offsetWidth;
dHeight = this.div.offsetHeight;
dCanvas = document.createElement('canvas');
dCtx = dCanvas.getContext('2d');
dCanvas.width = dWidth;
dCanvas.height = dHeight;
var fillWidth, fillHeight;
// Determine the width for the static and dynamic pieces
var tempStaticWidth = 0;
var tempDynamicCount = 0;
for (var i = 0, n = this.horizontalPieces.length; i < n; i++)
{
if (this.horizontalPieces[i][0] === 's')
tempStaticWidth += this.horizontalPieces[i][2];
else
tempDynamicCount++;
}
fillWidth = (dWidth - tempStaticWidth) / tempDynamicCount;
// Determine the height for the static and dynamic pieces
var tempStaticHeight = 0;
tempDynamicCount = 0;
for (var i = 0, n = this.verticalPieces.length; i < n; i++)
{
if (this.verticalPieces[i][0] === 's')
tempStaticHeight += this.verticalPieces[i][2];
else
tempDynamicCount++;
}
fillHeight = (dHeight - tempStaticHeight) / tempDynamicCount;
// Loop through each of the vertical/horizontal pieces and draw on
// the canvas
for (var i = 0, m = this.verticalPieces.length; i < m; i++)
{
for (var j = 0, n = this.horizontalPieces.length; j < n; j++)
{
var tempFillWidth, tempFillHeight;
tempFillWidth = (this.horizontalPieces[j][0] === 'd') ?
fillWidth : this.horizontalPieces[j][2];
tempFillHeight = (this.verticalPieces[i][0] === 'd') ?
fillHeight : this.verticalPieces[i][2];
// Stretching :
if (this.verticalPieces[i][0] !== 'r') {
// Stretching is the same function for the static squares
// the only difference is the widths/heights are the same.
dCtx.drawImage(
this.bgImage,
this.horizontalPieces[j][1], this.verticalPieces[i][1],
this.horizontalPieces[j][2], this.verticalPieces[i][2],
0, 0,
tempFillWidth, tempFillHeight);
} else {
var tempCanvas = document.createElement('canvas');
tempCanvas.width = this.horizontalPieces[j][2];
tempCanvas.height = this.verticalPieces[i][2];
var tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(this.bgImage,
this.horizontalPieces[j][1], this.verticalPieces[i][1],
this.horizontalPieces[j][2], this.verticalPieces[i][2],
0, 0,
this.horizontalPieces[j][2], this.verticalPieces[i][2]);
var tempPattern = dCtx.createPattern(tempCanvas, 'repeat');
dCtx.fillStyle = tempPattern;
dCtx.fillRect(
0, 0,
tempFillWidth, tempFillHeight);
}
// Shift to next x position
dCtx.translate(tempFillWidth, 0);
}
// shift back to 0 x and down to the next line
dCtx.translate(-dWidth, (this.verticalPieces[i][0] === 's' ? this.verticalPieces[i][2] : fillHeight));
}
// store the canvas as the div's background
var url = dCanvas.toDataURL("image/png");
var tempIMG = new Image();
var _this = this;
tempIMG.onload = function(event)
{
_this.div.style.background = _this.originalBgColor + " url(" + url + ") no-repeat";
};
tempIMG.src = url;
};
The usage is the following:
var elemDom = document.getElementById("idDiv");
var background = "border.9.png";
if (background.match(/\.9\.(png|gif)/i)) // Es nine path?
{
elemDom.style.backgroundRepeat = "no-repeat";
elemDom.style.backgroundPosition = "-1000px -1000px";
elemDom.style.backgroundImage = "url('"+background+"')";
var ninePatch = new NinePatch(elemDom,function()
{
elemDom.style.paddingLeft = ninePatch.padding.left;
elemDom.style.paddingTop = ninePatch.padding.top;
elemDom.style.paddingRight = ninePatch.padding.right;
elemDom.style.paddingBottom = ninePatch.padding.bottom;
});
}
I forked https://github.com/chrislondon/9-Patch-Image-for-Websites and fixed the bugs based on the above comments. Now the 9-Patch javascript works well. Please check out https://github.com/blackmonkey/jQuery-9-Patch