: after inserting html via JavaScript
I am creating a website that loads content from db via an ajax call and then writes data by creating elements and adding them to their parents.
It does not currently work correctly as shown in the pictures below, but when I manually add HTML using developer tools everything works fine.
This is how it should look
This is how it looks at present,
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>
source to share
an alternative would be to create a column structure if you know how many images are in each row. If you always have 5 images, you can have 1 / 5th columns of your parent 100% width
.
And inside each column there is div
one 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.
So you don't technically calculate the exact size of each image and the spacing between them, they are calculated for you.
and if you are using tags img
, set them width:100%
and height:auto
so that they take full width and their height will keep the ratio
here and an example of what I'm talking about http://jsfiddle.net/7zm8mawh/1/
source to share
Your code: after code does not affect the side edge of your images. By removing it, they remain unchanged and which affects the height between the two sets of images.
What's going on here is the well-known space between the two divs. When you write this:
<div>HI</div>
<div>WORLD</div>
white space is created in the middle of two sections because of this paragraph. Although this paragraph is not humanly added in JavaScript.
If you remove your space between these divs like:
<div>Hi</div><div>
WORLD</div>
which no longer happens. As you can see in this update your fiddle: https://jsfiddle.net/vqe4fth5/8/
Both images match exactly. If you want to add style to images, just add "margin-left" to the ".Thumb" class.
There are several solutions for this gap. Here's one: Remove "whitespace" between div element
If the distance should be there, add
margin-right: 5px
to the .Thumb class in CSS. Or, if you want them to split evenly, instead of a simple div, use a div with display: table.
source to share