I wrote a code where it displays only images from different website. I want to download them when i click their child download button. Problem is that it opens image it's self in separate page. Is there any awy to not make it open different page and download the parent image. Here's how I'm trying to download it:
<div class="container">
<div class="row">
<div class="col-sm">
<div id="image_container"></div>
</div>
</div>
</div>
</div>
<script>
for (let i = 0; i < 23; i++) {
Draw_Canvas(i);
document.querySelector("#image" + i).onclick = () => {
console.log(document.getElementById("image" + i).src);
localStorage.setItem("Image", document.getElementById("image" + i).src);
}
}
function Draw_Canvas(i) {
var div = document.createElement('div');
div.id = "image" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("image_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image" + i;
img.loading = "lazy";
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
divParent.appendChild(img);
//Download Button Style
var downloadButton = document.createElement("button");
divParent.appendChild(downloadButton);
downloadButton.textContent = "💾";
downloadButton.style.borderRadius = "100%";
downloadButton.style.backgroundColor = "orange";
downloadButton.style.width = "50px";
downloadButton.style.height = "50px";
downloadButton.style.fontSize = "18px";
downloadButton.style.position = "relative";
downloadButton.style.float = "right";
downloadButton.style.bottom = "55px";
downloadButton.style.display = "none";
div.addEventListener("mouseover", function () {
downloadButton.style.display = "block";
});
div.addEventListener("mouseout", function () {
downloadButton.style.display = "none";
});
downloadButton.addEventListener("click", function () {
var a = document.createElement('a');
a.href = img.src;
a.download = "Meme (IYN)";
a.click();
});
}
</script>
I made website where are only pictures in it and I'm displaying those images in my "main" website. In chrome, it works fine but in safari the aren't showing up at all. Even createElement for div isn't working. The problem is this link. Here's my code:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
var div = document.createElement('div');
div.id = "meme" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}
<div class="container">
<div class="row">
<div class="col-sm">
<div id="memes_container"></div>
</div>
</div>
</div>
So removing some stuff worked for me. Basically Safari doesn't support navigator.userAgentData so it wasn't displaying images for that reason. So i had to remove it:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
const isMobile = navigator.userAgentData.mobile; //REMOVED THIS AND IT WORKED!!
var div = document.createElement('div');
div.id = "meme" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}
I am trying to toggle a div using a link in another, with all this being done through the content-script of a chrome extensions, but when I run the unpacked extension I am not able to toggle the div at all...any ideas?
Below is the code for the content script as it sits now.
function createHistoryDiv() {
var divHeight = 97;
var divMargin = 10;
var div = document.createElement("div");
div.id = "history";
var st = div.style;
st.display = "block";
st.zIndex = "10000000";
st.top = "0px";
st.left = "0px";
st.right = "0px";
st.height = divHeight + "%";
st.background = "rgba(255, 255, 255, .01)";
st.margin = divMargin + "px";
st.padding = "5px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "36";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.pointerEvents = "none";
document.documentElement.appendChild(div);
var heightInPixels = parseInt(window.getComputedStyle(div).height);
st.height = heightInPixels + 'px';
//document.body.style.webkitTransform = "translateY("
//+ (heightInPixels + (2 * divMargin))+ "px)";
return div;
}
function buildDivContent(historyDiv, data) {
var ul = document.createElement('ul');
historyDiv.appendChild(ul);
for (var i = 0, ie = data.length; i < ie; ++i) {
var a = document.createElement('a');
a.href = data[i];
a.appendChild(document.createTextNode(data[i]));
var li = document.createElement('li');
li.style.color = "black";
li.style.display = "inline";
li.style.wordBreak = "break all";
li.appendChild(a);
a.style.color = "black";
a.style.fontSize = "24px";
a.style.fontFamily = "sans-serif";
a.style.linkDecoration = "none";
ul.appendChild(li);
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
buildDivContent(historyDiv, data);
});
function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
var st = div2.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
//st.left = "0px";
st.right = "0px";
//st.height = "42px";
//st.width = "210px";
st.background = "rgba(255, 255, 255,1)";
st.padding = "5px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
//st.pointerEvents = "none";
document.documentElement.appendChild(div2);
div2.innerHTML = div2.innerHTML + "TRANSPARENCY";
//div2.innerHTML = div2.innerHTML + "<p style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;\">TRANSPARENCY</p>";
return div2;
function toggle_visibility(id) {
var e = document.getElementById("history");
if(e.style.display == "block")
e.style.display = "hidden";
else
e.style.display = "block";
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){
var titleDiv = logoDiv();
buildDivContent(titleDiv);
});
There are various problems with your code (e.g. display: hidden is not an allowed key-value pair).
So, in order to be functional, the content script should look like this (anything not included below should be removed):
function createHistoryDiv() {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function buildDivContent(historyDiv, data) {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function createToggleDiv(historyDiv) {
/* Create the toggle div */
var div = document.createElement("div");
div.textContent = "TRANSPARENCY";
/* Style the toggle div */
var st = div.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
st.right = "0px";
st.background = "rgb(255, 255, 255)";
st.padding = "10px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "24px";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.cursor = "pointer";
/* Make the toggle div behave
* (i.e. toggle `historyDiv` upon 'click') */
div.addEventListener("click", function(evt) {
evt.preventDefault();
var st = historyDiv.style;
st.display = (st.display == "block") ? "none" : "block";
});
/* Insert the toggle div into the DOM */
document.documentElement.appendChild(div);
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
var toggleDiv = createToggleDiv(historyDiv);
buildDivContent(historyDiv, data);
});
I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
I modified your code adding ul to hold all img. It works, but could be better.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
var myImages = new Array();
myImages[0] = "../www/images/TEST1.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST3.png";
var container = document.createElement("ul"); //ul to simplify hide/show
container.style.display = "none";
for (var i = 0; i < myImages.length; i++) {
var newList = document.createElement("li");
var im = document.createElement("img");
im.src = myImages[i];
newList.appendChild(im);
im.onclick = function () {
img.src = this.src;
};
container.appendChild(newList);
}
col.appendChild(container);
col.onclick = function () {
if (container.style.display == "none")
container.style.display = "block";
else
container.style.display = "none";
};
}
I'm trying to figure out why that table is showing like that, I mean, how to set every col to ocuppy the full width of the table frame?
Here's the function that creates the table:
function rp_insertTable() {
FM_log(3,"rp_insertTable() called");
var farmTable = dom.cn("table");
var ftableBody = dom.cn("tbody");
var i;
var maximize = GM_getValue("Maximize_" + suffixGlobal, 0);
farmTable.className = "FMtbg";
farmTable.id = "farmMachineTable";
farmTable.setAttribute('cellpadding', 2);
farmTable.setAttribute('cellspacing', 1);
farmTable.style.marginBotton = "12px";
farmTable.width = 1000;
//farmTable.innerHTML = "<font size=1>";
//farmTable.style.fontSize = "8px";
//top row
var tableRow = dom.cn("tr");
tableRow.className = "cbg1";
tableRow.width = "100%";
var tableCol = dom.cn("td");
tableCol.style.width = 1000;
// tableCol.setAttribute("colspan", 15);
var Button = dom.cn("div");
tableCol.appendChild(Button);
tableRow.appendChild(tableCol);
//Add Minimize||Maximize button
tableCol = dom.cn("td");
var img = dom.cn("img");
if (maximize) {
img.src = image['MINIMIZE']; //add minimize image
img.title = T("Minimize");
} else {
img.src = image['MAXIMIZE']; //add minimize image
img.title = T("Maximize");
}
img.style.height = '16px';
img.style.width = '30px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:30px;float:right;");
Button.appendChild(img);
Button.addEventListener('click', function() {
rp_min_max();
}, 0);
tableCol.appendChild(Button);
tableRow.appendChild(tableCol);
ftableBody.appendChild(tableRow); //adding the top row
//********************************
// option row
tableRow = dom.cn("tr");
tableRow.className = "cbg1";
tableCol = dom.cn("td");
//tableCol.setAttribute("colspan", 15);
if(GM_getValue("MaximizeSettings_" + suffixGlobal, 0)==1) {
tableRow = dom.cn("tr");
tableRow.className = "cbg1";
tableCol = dom.cn("td");
//tableCol.setAttribute("colspan", 15);
var settingsTable = dom.cn('table');
settingsTable.width = "100%";
settingsTable.setAttribute("margin-bottom",10);
//1st option: randomiz farming
var setRowRandomize = dom.cn('tr');
var setRandomizeC1 = dom.cn('td');
setRandomizeC1.width = 20;
RandomButton = createInputButton("checkbox", 0, setRandomFarming);
var random = GM_getValue("RandomFarming_" + suffixGlobal, 0);
if (random == 1) {
RandomButton.checked = true;
}
setRandomizeC1.appendChild(RandomButton);
var setRandomizeC2 = dom.cn('td');
setRandomizeC2.innerHTML = T('SETRANDOMIZE');
setRowRandomize.appendChild(setRandomizeC1);
setRowRandomize.appendChild(setRandomizeC2);
//2nd option: delete temporary list
var setRowDelTList = dom.cn('tr');
var setTListC1 = dom.cn('td');
setTListC1.width = 20;
TListButton = createInputButton("checkbox", 0, setDelTList);
var TList = GM_getValue("DelTList_" + suffixGlobal, 0);
if (TList == 1) {
TListButton.checked = true;
}
setTListC1.appendChild(TListButton);
var setTListC2 = dom.cn('td');
setTListC2.innerHTML = T('SETDELTLIST');
setRowDelTList.appendChild(setTListC1);
setRowDelTList.appendChild(setTListC2);
//3rd option: read reports to make a priority queue
var setRowReadRep = dom.cn('tr');
var setReadRepC1 = dom.cn('td');
setReadRepC1.width = 20;
ReadRepButton = createInputButton("checkbox", 0, setReadRep);
var ReadRep = GM_getValue("ReadRep_" + suffixGlobal, 0);
if (ReadRep == 1) {
ReadRepButton.checked = true;
}
setReadRepC1.appendChild(ReadRepButton);
var setReadRepC2 = dom.cn('td');
setReadRepC2.innerHTML = T('SETREADREP');
setRowReadRep.appendChild(setReadRepC1);
setRowReadRep.appendChild(setReadRepC2);
//4th option: skipping of Villages
var setRowVilSkip = dom.cn('tr');
var setVilSkipC1 = dom.cn('td');
setVilSkipC1.width = 20;
SkipButton = createInputButton("checkbox", 0, setVillageSkipping);
var vilSkip = GM_getValue("VillageSkipping_" + suffixGlobal, 0);
if (vilSkip == 1) {
SkipButton.checked = true;
}
setVilSkipC1.appendChild(SkipButton);
var setVilSkipC2 = dom.cn('td');
setVilSkipC2.innerHTML = T('SETVILSKIP');
setRowVilSkip.appendChild(setVilSkipC1);
setRowVilSkip.appendChild(setVilSkipC2);
//5th option: marking of Farms
var setRowFarmMark = dom.cn('tr');
var setFarmMarkC1 = dom.cn('td');
setFarmMarkC1.width = 20;
farmMarkButton = createInputButton("checkbox", 0, setFarmMarking);
var farmMark = GM_getValue("farmMarking_" + suffixGlobal, 0);
if (farmMark == 1) {
farmMarkButton.checked = true;
}
setFarmMarkC1.appendChild(farmMarkButton);
var setFarmMarkC2 = dom.cn('td');
setFarmMarkC2.innerHTML = T('FARMMARKING');
setRowFarmMark.appendChild(setFarmMarkC1);
setRowFarmMark.appendChild(setFarmMarkC2);
// adding settingRows to the table
settingsTable.appendChild(setRowRandomize);
settingsTable.appendChild(setRowDelTList);
settingsTable.appendChild(setRowReadRep);
settingsTable.appendChild(setRowVilSkip);
settingsTable.appendChild(setRowFarmMark);
// add table
tableCol.appendChild(settingsTable);
tableRow.appendChild(tableCol);
ftableBody.appendChild(tableRow); //add to table
}
//********************************
// end option row
//second row
tableRow = dom.cn("tr");
tableRow.className = "cbg1";
tableCol = dom.cn("td");
// tableCol.setAttribute("colspan", 24);
tableCol.width = "100%";
tableCol.appendChild(createInputButton("submit", T('START_FARMING'),
startEngine));
tableRow.appendChild(tableCol);
ftableBody.appendChild(tableRow); //adding the second row
//third row
tableRow = dom.cn("tr");
tableRow.className = "cbg1";
//------------------------------------------------------------------
//checkbox
tableCol = dom.cn("td");
//tableCol.width = "80%";
tableCol.style.fontSize = "13px";
//tableCol.style.fontWeigth = "bold";
//tableCol.style.fontFamily = "Arial";
tableCol.appendChild(createLinkButton("X", T('CHECKFARM_M'), function() {rp_marcadesmarcaFarm(true)}));
tableCol.appendChild(createLinkButton("0", T('CHECKFARM_M'), function() {rp_marcadesmarcaFarm(false)}));
tableRow.appendChild(tableCol);
//------------------------------------------------------------------
//start
tableCol = dom.cn("td");
tableCol.innerHTML = "<div style='cursor:help;' class='b' title='"
+ T('START_M') + "'>S</div>";
tableRow.appendChild(tableCol);
//------------------------------------------------------------------
//end
if (opcaoEND) {
tableCol = dom.cn("td");
//tableCol.innerHTML = "<div style='cursor:pointer;' class='b' title='Select End Position'>E</div>";
//tableCol.addEventListener("click",rp_removeEndIndex,false);
tableCol.appendChild(createLinkButton("E", T('END_M'), rp_removeEndIndex));
tableRow.appendChild(tableCol);
}
//------------------------------------------------------------------
//edit
if (opcaoEDIT) {
tableCol = dom.cn("td");
tableCol.innerHTML = "<div style='cursor:help;' class='b' title='"
+ T('EDIT_M') + "'>E</div>";
tableRow.appendChild(tableCol);
}
//------------------------------------------------------------------
//delete
tableCol = dom.cn("td");
tableCol.innerHTML = "<div style='cursor:help;' class='b' title='"
+ T('DELETE_M') + "'>D</div>";
tableRow.appendChild(tableCol);
//------------------------------------------------------------------
//farm
tableCol = dom.cn("td");
tableCol.appendChild(createLinkButton(T('FARM') + " ↓",
T('SORT_FARM'), sortFarms));
tableCol.width = "100%";
// tableCol.setAttribute("colspan", 8);
tableRow.appendChild(tableCol);
//------------------------------------------------------------------
//imagens
tableCol = dom.cn("td");
tableCol.innerHTML = '<td><img src="img/x.gif" class="unit u' + user_race + '"></td>';
tableRow.appendChild(tableCol);
for (i = 1; i < 10; i++) {
tableCol = dom.cn("td");
tableCol.innerHTML = '<td><img src="img/x.gif" class="unit u' + (user_race + i)
+ '"></td>';
tableRow.appendChild(tableCol);
}
//------------------------------------------------------------------
//hero
tableCol = dom.cn("td");
tableCol.width = "1";
tableCol.innerHTML = '<td><img src="img/x.gif" class="unit uhero" width="1px"></td>';
tableRow.appendChild(tableCol);
ftableBody.appendChild(tableRow); //adding the 3rd row
//add List
//getting first farm in list for sIndex
prioque = GM_getValue('priorityqueue'+ suffixLocal, '').split('>:)');
fque = GM_getValue('farmqueue'+ suffixLocal, '').split('>:)');
if (prioque.length >= 1 && prioque[0].length > 2)
{
var arr = prioque[0].split("|");
var tX = arr[0].split(",")[0];
var tY = arr[0].split(",")[1];
var sIndex = getSindexFromXY(tX,tY, suffixLocal);
} else if (fque.length >= 1 && fque[0].length > 2){
var arr = fque[0].split("|");
var tX = arr[0].split(",")[0];
var tY = arr[0].split(",")[1];
var sIndex = getSindexFromXY(tX,tY, suffixLocal);
} else {
sIndex = getStartIndex();
}
FM_log(4,"starting farmrows for: "+suffixLocal);
farmList = GM_getValue("FarmList_" + suffixLocal, "");
totalTroops = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
if (farmList != "" && farmList != null) {
farmList = farmList.split(">:)");
var eIndex = getEndIndex();
FM_log(3,"sIndex="+sIndex+"/eIndex="+eIndex);
if (farmList.length > 0) {
for (i = 0; i < farmList.length; i++) {
if (maximize == 1) {
tableRow = rp_createFarmRow(i, sIndex, eIndex);
if (tableRow != null) {
ftableBody.appendChild(tableRow);
}
} else { //the i have to count totalTroops here
var arr = farmList[i].split("|");
if (arr[7] == 'true') {
arr[1] = arr[1].split(",");
for (var j = 0; j < arr[1].length; j++) {
totalTroops[j] += parseInt(arr[1][j]);
}
}
}
}
}
} else {
tableCol = dom.cn("td");
// tableCol.setAttribute("colspan", 18);
tableCol.innerHTML = "<div style='margin: auto;'>" + T('NO_FARM_YET')
+ "</div>";
tableCol.style.fontSize = "13px";
tableCol.style.fontWeigth = "bold";
tableCol.style.fontFamily = "Arial";
ftableBody.appendChild(tableCol);
}
//bottom row
tableRow = dom.cn("tr");
tableRow.className = "cbg1";
tableCol = dom.cn("td");
// tableCol.setAttribute("colspan", 7);
//add space
//Button = dom.cn("div");
//Button.innerHTML = " ";
//Button.setAttribute("style", "width:10px;float:left;");
//tableCol.appendChild(Button);
//Optimize button
img = dom.cn("img");
img.src = image['OPTIMIZE'];
img.title = T('OPTIMIZE_M');
img.style.height = '16px';
img.style.width = '16px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:16px;float:left;");
Button.appendChild(img);
Button.addEventListener('click', function() {
optimizeFarmsByDistance();
}, 0);
tableCol.appendChild(Button);
//add space
Button = dom.cn("div");
Button.innerHTML = " ";
Button.setAttribute("style", "width:5px;float:left;");
tableCol.appendChild(Button);
//Import/Export Button
img = dom.cn("img");
img.src = image['IM_EXPORT'];
img.title = T('LOCAL_IM_EX_M');
img.style.height = '16px';
img.style.width = '16px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:16px;float:left;");
Button.appendChild(img);
Button.addEventListener('click', function() {
importExport();
}, 0);
tableCol.appendChild(Button);
//add space
Button = dom.cn("div");
Button.innerHTML = " ";
Button.setAttribute("style", "width:5px;float:left;");
tableCol.appendChild(Button);
//globalImportExport
img = dom.cn("img");
img.src = image['GIM_EXPORT'];
img.title = T('GLOBAL_IM_EX_M');
img.style.height = '16px';
img.style.width = '16px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:16px;float:left;");
Button.appendChild(img);
Button.addEventListener('click', function() {
globalImportExport();
}, 0);
tableCol.appendChild(Button);
//add space
Button = dom.cn("div");
Button.innerHTML = " ";
Button.setAttribute("style", "width:5px;float:left;");
tableCol.appendChild(Button);
//Delete Farm list Button
img = dom.cn("img");
img.src = image['DELTEMPLIST'];
img.title = T('DELTEMPLIST');
img.style.height = '16px';
img.style.width = '16px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:16px;float:left;");
Button.appendChild(img);
Button.addEventListener('click', function() {
clearque();
alert("Farmlist and Prioritylist deleted");
}, 0);
tableCol.appendChild(Button);
//add space
Button = dom.cn("div");
Button.innerHTML = " ";
Button.setAttribute("style", "width:5px;float:left;");
tableCol.appendChild(Button);
//Settings Button
img = dom.cn("img");
img.src = image['SETTINGS'];
img.title = T('UPDATE_SETTINGS');
img.style.height = '16px';
img.style.width = '16px';
img.style.cursor = "pointer";
Button = dom.cn("div");
Button.setAttribute("style", "width:16px;float:left;");
Button.appendChild(img);
Button.addEventListener('click', function() {
min_max_settings();
}, 0);
tableCol.appendChild(Button);
//append the row in the table
tableRow.appendChild(tableCol);
for (i = 0; i < 11; i++) {
tableCol = dom.cn("td");
tableCol.innerHTML = totalTroops[i];
tableRow.appendChild(tableCol);
}
ftableBody.appendChild(tableRow);
farmTable.appendChild(ftableBody);
var container = dom.get("content");
container.appendChild(farmTable);
}
I'm not 100% clear on what your JavaScript code is doing... but I wanted to make a suggestion. you might find it easier to not set any absolute widths or CSS in your JavaScript code and instead add a CSS class name using JavaScript, and then, in CSS do something like:
table.farmTable {
width: 100%;
}
table.farmTable tr td.checkmarks,
table.farmTable tr td.radiobuttons {
width: 50px;
}
table.farmTable tr td.farmNames {
width: 20%;
}
/* and more styles here... */
I'm not sure if that helps at all or if I'm just making pointless noise ;-)