:after when inserting html through JavaScript

Question

I'm creating a website that loads content from a db through an ajax call and then writes the data by creating elements and appending them to their parent.

It is currently not working correctly as can be seen in the images below, but when I manually add the HTML using the developer tools, everything works fine.

This is how it should appear,

correct

This is how it currently appears,

incorrect

What am I doing wrong?

( jsFiddle )

var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for (var i = 0; i < this.pictures.length; i++) {
  var pictureID = this.pictures[i].pictureID;
  var thumbDIV = document.createElement('div');
  thumbDIV.className = 'Thumb';
  var thumbIMG = document.createElement('img');
  thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
  thumbIMG.src = this.pictures[i].picture;
  thumbIMG.border = '0';
  thumbDIV.appendChild(thumbIMG);
  thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);

.Thumb {
  display: inline-block;
  margin-bottom: 5px;
  width: 15%;
  cursor: hand;
  cursor: pointer;
  zoom: 1;
  *display: inline;
}
.Thumbs:after {
  content: "";
  width: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.Thumb img {
  width: 100%;
}

<div class="Thumbs">
  <div class="Thumb" onClick="ViewThumb(1,1)">
    <img src="http://smakelynn.com/images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,2)">
    <img src="http://smakelynn.com/images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,3)">
    <img src="http://smakelynn.com/images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,4)">
    <img src="http://smakelynn.com/images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
  </div>
  <div class="Thumb" onClick="ViewThumb(1,5)">
    <img src="http://smakelynn.com/images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
  </div>
</div>

You want the `content:` to go after `.Thumbs` and not `.Thumb`? Or is that a typo? — , Jul 13 '15 at 19:29
...well anyway, either way the `content:` works for me after JS. One difference in your layout is that you no longer have a whitespace text node after every `.Thumb` element. Also, your `onclick` is going to fail to give the desired result, but that's a different issue. — , Jul 13 '15 at 19:37
hey guys, i put it in jsfiddle where you can see the difference. The issue is indeed the missing space in between the images that seems to be due to the elements being inserted one after another (if you put an enter after each '.Thumb' div, the spacing magically appears) — Mats Raemen, Jul 13 '15 at 19:43
You do not want to do this. Use flexbox instead. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Stephan Bijzitter, Jul 13 '15 at 19:47
The space that's in the original comes from the whitespace formatting in between your elements, not from CSS. If you do `thumbsDIV.appendChild(document.createTextNode(" "));` after appending each thumbDIV, you'll get the same spacing. https://jsfiddle.net/vqe4fth5/7/ — , Jul 13 '15 at 19:48
@squint, that does the trick indeed, I feel pretty dumb right now — Mats Raemen, Jul 13 '15 at 19:53
Nah, that's a tricky one. I've been tripped up by whitespace and `inline-block` a number of times. — , Jul 13 '15 at 19:54
Be careful tho, flexbox is not compatible with some older browsers, such as IE 8, 9, and some things in 10. — Ted, Jul 13 '15 at 19:56
@squint could you perhaps give a hint on why the onclick isn't working, I am indeed experiencing that issue right now. If wanted I can add the code again — Mats Raemen, Jul 13 '15 at 20:12
It's because JavaScript doesn't have block scope. Your `pictureID` is actually a single variable shared by all the handlers you create in a loop, so they're always going to be reading the same value. Also, I believe you had an `iD` variable in there, which just didn't seem to exist. — , Jul 13 '15 at 20:14
...ah, I don't know what `this` is referring to in your code, but it seems you expect there's some relationship between `this` and the variable scope. There's really not. Variables are not found on a `this` object, except for global variables if `this` is referring to the `window` object. — , Jul 13 '15 at 20:15
the abovementioned javascript is indeed a method of an object, which is why the 'this' is used (sorry don't know how to get it in grey down here). I set the pictureID var within the for loop, so it is different every time, is it not? Anywho, I'll have a decent look at that issue now and if necessary I will create a new question for it. Thanks for all the help already @all and my apologies for not having my question in accordance with the rules from the beginning — Mats Raemen, Jul 13 '15 at 20:28
Found the solution in http://stackoverflow.com/questions/6048561/setting-onclick-to-use-current-value-of-variable-in-loop — Mats Raemen, Jul 13 '15 at 20:39

score 0 · Answer 1 · edited May 23 '17 at 11:44

Your ':after' code isn't affecting the side margin of your images. By removing it, they remain the same and what's affected is the height between the two set of images.

What's happening here is the commonly known space between two divs. When you write this:

<div>HI</div>
<div>WORLD</div>

a blank space is created in the middle of the two divs, because of that paragraph. Whilst on JavaScript, that paragraph isn't humanly added.

If you remove your space between those divs, such as:

<div>Hi</div><div>
WORLD</div>

that no longer happens. As you can see on this update to your fiddle: https://jsfiddle.net/vqe4fth5/8/

Both images are exactly the same. If you want to add some styling to the images, just add 'margin-left' on the '.Thumb' class.

There are a couple solutions to that whitespace too. Here is one: Remove "whitespace" between div element

If the spacing is intended to be there, add

margin-right: 5px

to the .Thumb class in the CSS. Or if you want them to split evenly, instead of simple div's, use a div with display:table.

Yeah, the spacing is supposed the be there as it spreads the images evenly across the parent. — Mats Raemen, Jul 13 '15 at 20:01
because doing it like this automatically sets the margin in between images so that I don't need to calculate what the margin should be depending the screen size — Mats Raemen, Jul 13 '15 at 20:10
For that you can use display:table. Check the end of my answer. Display table automatically fits stuff inside, if given instructuions too. — Ted, Jul 13 '15 at 20:13

score 0 · Answer 2 · answered Jul 14 '15 at 04:31

an alternative would be to set up a column structure if you know how many images are on each row. If you always have 5 images, you can have 1/5 size columns of your parent's 100% width.

And inside each column, have a div that serves as the content of the column, which should be about 85% of the column width so that you automatically have spaces between each image.

this way you're not technically calculating the exact size of each image and the spaces between, they get calculated for you.

and if you're using img tags, set their width:100% and height:auto so that they will take full width, and their height will maintain its ratio

here's and example of what I'm talking about http://jsfiddle.net/7zm8mawh/1/

:after when inserting html through JavaScript

2 Answers2

Linked

Related