We Keep Coding

How to Prevent TD from ending up on a new line?

I am dynamically creating a table through Javascript and I DO want the table to continue off the right side of the page. Doing this manually lets the table continue off, but once I feed this into a for loop the <td>s wrap into a second line in the rendered HTML, creating two or more table rows when they reach the end of the page.
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0">
<tr></tr>
</table>
</div>
This is inside a table of its own (no style formatting). Then the Javascript:
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>"
for(i=0; i<numpanels; i=i+1)
{
panelindex.innerHTML = panelindex.innerHTML + "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + zeroFill(i,2) + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>\n";
}
panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"
You may notice that there is a <div> in the <td> and that is so I can apply a border marking the panel. Without the <div> it seems I cannot do that, and there are some other undesired effects. Any ideas what I can do so that all the <td>s end up on one line rather than split to a new line?
Example of what I want: http://edwardleuf.org/comics/jwb/009-conmet
What is happening: https://jsfiddle.net/w4uh0a3j/7/
Click the Show link.

innerHTML does not hold the string value you assign to it.
It parses the value as HTML, creates a DOM from it, inserts it into the document and then, when you read it back, it converts that DOM back into HTML.
This means that the string you assign is subject to error recovery and normalisation. In particular, the end tags you omitted are fixed.
panelindex.innerHTML = "<table border='0'><tr>"
console.log(panelindex.innerHTML);
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0"><tr>
</tr></table>
</div>
So when you start appending more data to it:
panelindex.innerHTML = panelindex.innerHTML + "<td>etc etc
You end up with:
<table border="0"><tbody><tr></tr></tbody></table><td>etc etc
Store your data in a regular variable. Only assign it to .innerHTML once you have the complete HTML finished.
A better approach then that would be to forget about trying to build HTML by mashing strings together (which is error prone, especially once you start dealing with characters that need escaping in HTML) and use DOM (createElement, appendChild, etc) instead.

OK,here is fixed html and js code. It seems like innerHTML fixes missing closing when updating html before all the code is building the rest of innerHTML. This code works :
<div id="panelindex" style="overflow:scroll;text-align:center;">
</div>
and js code :
var numpanels = 100;
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>";
var html = "<table border='0'><tr>";
for(i=0; i<numpanels; i=i+1) {
html += "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>";
}
html += "</tr></table>";
document.getElementById("panelindex").innerHTML = html;

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

Spectrum Color-Picker not working in Internet Explorer

I'm using Spectrum Color picker in a javascript project I'm working on. https://bgrins.github.io/spectrum/
It works fine in FireFox, but not in Internet Explorer. The fancy color picker popup degrades to a simple text input field. Here is the section of code that creates the input field:
function updateTables() {
$("#tableTwo tbody").empty();
for (var i = 0; i < polygons.length; i++) {
//var pColor = new RGBColor();
var pColor = rgbaToHex(polygons[i].color);
$("#tableTwo tbody").append('\n<tr '
+ (selectedPoly == i ? 'style="color:white;background-color:red"' : '')
+ '><td><input onchange="changeGeometryName(' + i + ')"'
+ (selectedPoly != i ? 'onfocus="polySelectedFromTable(' + i + ')"' : '') + 'type="text" size="11" '
+ 'id="polygonName' + i + 'Input" value="' + polygons[i].name + '" /></td>' + "<td><input type='color'"
+ ' onchange="setColor(' + i + ')" id="color' + i + '" value="' + pColor + '"/></td>' + "</tr>");
}
}
And then I have these two lines in my HTML file:
<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />
The documentation says the input will degrade to a text input if javascript isn't working, but I know that can't be the issue sense the rest of the project works fine. Any help is greatly appreciated!

Oh hi!
So firstly, the spectrum documentation was a bit confusing about this so it took me a while to find, but the answer is actually really, really dumb once you find it:
You're not using spectrum.
So, firstly, the documentation says:
If you just want to provide a polyfill for the native color input, the easiest way is to create an input with the type of color. Once a user's browser supports a native color control, it will opt to use their native control instead. Spectrum Docs
So, this is what we were trying to do, without realizing we weren't really using spectrum. Instead, we were using the HTML 5 color input type spec, which isn't supported by IE (See color input type support)
So, to enable spectrum, we actually need to make a call to the spectrum library, and then it works:
$('#color' + id).spectrum({ color: pColor(, other-parameters-here)});

Shutter reloaded for Next-Gen gallery -- smaller images and the title from alt attribute

Sorry if this question is out of the place, but I didn't find any information about it at other places on the net... :-(
So, I have a Shutter-box javascript Lightbox, that I need to modify.
The Shutterbox script is here (already customised a bit): http://pastebin.com/g5qTF86H
The page where it is used: http://www.mrsherskin.com/collections/subconscious-levitation
1). By default this script doesn't take the alt of the images it takes for lightboxing, just the title attribute of it. I would like to set up a variable in this script to put the image's alt attribute as a title above the picture. I would use this jQuery script for it inserted in the showImg initialisation, but I don't know how could I set up a variable that inserts this alt tag read from the respective images:
var ImgTitle = jQuery('<div id="img-title"><h1 class="entry-title">Alt title</h1></div>');
jQuery(ImgTitle).appendTo('#shWrap');
2.) I would like to accommodate the size of the shown image so that 2-3 lines of description text could fit under it. Unfortunately I didn't find the part of the script that calculates the size of the lightboxed image, where to change it?
Any help please?
Thank you in advance.

Thanks so much for the answer about how to get the image alt attribute, it worked perfectly for me! I was a little confused about where to put the code that you provided, so in case any one else had the same issue I hope I can help clarify.
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
I then found the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And changed it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
Hope this helps!
-RG

OK, I found the solutions:
(1) I fetched the alt of the images under shutterbox rel-links by this jQuery method:
ALT = jQuery(L).children('img').attr('alt');
Added it to the shutterLinks object:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Then inserted this variable in a new jQuery object, under the make function:
var ImgTitle = jQuery('<div id="img-title"><h1>' + shutterLinks[ln].alt + '</h1></div>');
jQuery(ImgTitle).prependTo('#shWrap');
(2) I found the part which scales down the large images (if image size is bigger than viewport size), and added to the end a shrink by 30 px
TI.style.width = (TI.width - 30) + 'px'; // add side padding
TI.style.height = (TI.height - 30) + 'px'; // add bottom padding
Update suggested by Rachel:
To put this code, follow these steps:
Find the following code snippet (should be around line 68 in shutter-reloaded.js which is in the shutter folder of the NextGen Gallery plugin):
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}
Change that line to the following:
shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}
Directly above that line you just changed, add the following:
ALT = jQuery(L).children('img').attr('alt');
Then find the following line:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
And change it to this:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

Programmatically creating <DIV>s and problems arise

I am new to javascript and have written a piece of code (pasted below). I am trying to build a little game of Battleship. Think of that game with a grid where you place your ships and start clicking on opponents grid blindly if it will hit any of the opponents ships. Problem is I need to get a function called with the ID of the DIV to be passed as a parameter. When the DIV is programmatically created like below, what will work. This? : --///<.DIV id='whatever' onclick='javascript:function(this.ID)' /> .. I saw sth like that somewhere .. this inside html :S
the js code is: (there are two grids, represented by the parameter - who - ... size of grid is also parametric)
function createPlayGround(rows, who)
{
$('#container').hide();
var grid = document.getElementById("Grid" + who);
var sqnum = rows * rows;
var innercode = '<table cellpadding="0" cellspacing="0" border="0">';
innercode += '<tr>';
for (i=1;i<=sqnum;i++)
{
var rowno = Math.ceil(i / rows);
var colno = Math.ceil(i - ((rowno-1)*rows));
innercode += '<td><div id="' + who + '-' + i +'" class="GridBox'+ who +'" onmouseover="javascript:BlinkTarget(' + i + ',' + who +');" onclick="javascript:SelectTarget('+ i + ',' + who +');" >'+ letters[colno - 1] + rowno +'</div></td>';
if (i % rows == 0)
{
innercode += '</tr><tr>';
}
}
innercode += '</tr></table>';
grid.innerHTML = innercode;
$('#container').fadeIn('slow');
}

It sounds like what you really want is to get the div element that was just clicked on. If you just want to return the div that was clicked on, all you have to do is use "this":
<div id="whatever" onclick="function(this)"></div>
If you're actually more interested in getting the id of the div clicked on, you can do this:
<div id="whatever" onclick="function(this.id)"></div>
However, it sounds like you just want the id so that you can get the div using getElementById, and the first code snippet will help you skip that step.

Instead of creating the inner html from strings you can create it with jQuery and add event listeners like so:
$("<div></div>")
.click(function(e) {
selectTarget(i, who);
})
.appendTo(container);