Adding child elements?

[jeffman]

This is the function I had in mind:

function cellGuts(i){    var newAnchor = document.createElement("a");    var newImg = document.createElement("img");    newAnchor.href = "photos_t/" + filenames[i];    newImg.alt = filenames[i];    newImg.src = newAnchor.href;    newImg.width = "200";    newAnchor.appendChild(newImg);    return newAnchor;}

Notice the values I'm passing to createElement() . I haven't looked at the rest of the code.

[jeffman]

Now all of this:

var newAttrib = document.createAttribute("border");newAttrib.value = "1";newTable.setAttributeNode(newAttrib); //append border="1" to the table

works just fine as this:

newTable.border = "1";

Though I'd recommend doing that in CSS. Same with the image width property.

Edited May 6, 2013 by Deirdre's Dad

[jeffman]

And this part can be handled in a single for-loop, without the cell array

var cell = [row[0].insertCell(0),row[0].insertCell(1),row[0].insertCell(2),row[0].insertCell(3)];for (var j=0 ; j<4 ; j++){    child1 = cellGuts(i);    cell[j].appendChild(child1);    i++;}for (var j=0 ; j<4 ; j++){    cell[j] = row[1].insertCell(j);}for (var j=0 ; j<4 ; j++){    child1 = cellGuts(i);    cell[j].appendChild(child1);    i++;}

[davej]

This is the function I had in mind:

function cellGuts(i){}

Notice the values I'm passing to createElement() . I haven't looked at the rest of the code.

This gets it working! Thanks. I will have to study this. I have never understood the formal createAttribute() thing when it seems to be unnecessary. Edit-- Hmmm... all that createAttribute stuff seemed to parallel the dot member approach -- but it didn't work. I do see a slight gap under the images on the JS-driven pages... http://www.stlnetwork.net/kayak/whitewater/test/photos5.html And the gap is not present on the original page... http://www.stlnetwork.net/kayak/whitewater/mwa_clinic_2013/photos.html Edited May 7, 2013 by davej

[davej]

This seems to work -- but I still have that odd little gap below the images...

while( i<(tot-7) ){ //print another table if there are eight more photos remaining var newTable = document.createElement("table");newTable.border = "1";var cell;var row = newTable.insertRow(0);for (var j=0 ; j<4 ; j++){child1 = cellGuts(i);cell = row.insertCell(j);cell.appendChild(child1);i++;}row = newTable.insertRow(1);for (var j=0 ; j<4 ; j++){child1 = cellGuts(i);cell = row.insertCell(j);cell.appendChild(child1);i++;}out.appendChild(newTable); //append the table to the out divvar br = document.createElement("br");out.appendChild(br); //append <br/> to the out div}//end while function cellGuts(i){var newAnchor = document.createElement("a");var newImg = document.createElement("img");newAnchor.href = "photos_t/" + filenames[i];newImg.alt = filenames[i];newImg.src = "photos_t/photos_tt/" + filenames_tt[i];newImg.width = "200";newAnchor.appendChild(newImg);return newAnchor;}

Edited May 7, 2013 by davej

[jeffman]

The gap sounds like something CSS can fix.

[davej]

Height has no effect on the gap.

Edited May 7, 2013 by davej

[thescientist]

try

img{text-decoration: none;}

Edited May 7, 2013 by thescientist

[dsonesuk]

you are probably getting newline breaks after each image is added, floating the image usually fixes it, or setting font-size and line-height of td to 0.

[davej]

you are probably getting newline breaks after each image is added, floating the image usually fixes it, or setting font-size and line-height of td to 0.

Bingo! Line-height is causing it. If I set line-height to ~10px or less the gap disappears. I was trying a variety of things but I don't know if I would have ever thought of line-height. Thanks. Edited May 7, 2013 by davej

[davej]

Ok, so if I start with a div and I'm adding children to the div -- they seem to appear in the order they were added. So what if I then need to add something to the beginning of the div or add something between two of those elements that I've added? I see the next/previous siblings functions but I don't want to add a child to a sibling do I? http://www.w3schools.com/jsref/dom_obj_node.asp

[jeffman]

Look up insertBefore(). The only trick is getting a reference to the correct node.

[dsonesuk]

insertBefore() insert a sibling child of parent http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_insertbefore

[davej]

Excellent, thanks. Now I seem to be having some trouble with buttons that I add and remove and add again. I assign a handler function to each, such as...

document.getElementById('btn3').onclick = fnback;

But once the buttons are removed slideDiv.removeChild(document.getElementById('btn3')) and then added again the handler doesn't fire. Do I need to set the handler to null before removing the buttons or do something like that?

[justsomeguy]

You need to set the handler each time you add the button. Removing the element from the DOM removes all handlers on it also, if you add another element it's not going to automatically pick up any handlers or anything else that another element with the same ID used to have.

[davej]

Oops. I think I was just being sloppy with the ids. Now it is working. When I want to wipe out the div is it OK to cheat with the very simple innerHTML = "" ? I am also having some trouble keeping setTimeout(func1,delay) from creating odd results. Is there any event queuing or something else that could create unexpected delay results? My current version is here: http://www.stlnetwork.net/kayak/whitewater/mwa_clinic_2013/photos.html If I pause the slideshow and then click next a few times and then continue the slideshow I get multiple events firing, which speeds up the slideshow.

Edited May 10, 2013 by davej

[thescientist]

setTimeout and setInterval both return an id that you can use to reference the time. Save this id "globally" within the context of your script, and only start a new timeout/interval if that variable/id doesn't already exist. and clear it out (set it to null/false/etc) when you stop the slideshow.

[jeffman]

When I want to wipe out the div is it OK to cheat with the very simple innerHTML = "" ?

I have apps that do that. It's efficient code that makes your intention very obvious.