White space on right of page

Question

How do I get rid of that undesired white border on the right of the page?

The website basically dynamically resizes images on a grid, here's a video: https://vine.co/v/h2wtnw6K3H0

CSS:

body {

    height: 100%;
    width: 100%;
    margin: 0;
}

grid {

    height: 100%;
    width: 100%;
}

.gridImage {

    vertical-align: bottom;

    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

JS:

function resize() {

    console.log($(window).width());

    var newBody = "";

    for (var i = 0; i <= 100; i++) {

        newBody += '<img class="gridImage" src="Images/image2.jpg" width="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px" height="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px">';
    }

    document.getElementById("grid").innerHTML = newBody;
}

If my margins are zero, why is this showing up? Anything I'm missing? Thanks.

Answer 1

Ridcully has covered what the problem is, but here's a solution.

First you would need to calculate the desired width of each image. This is simply your current equation wrapped in Math.ceil() .

var windowWidth = $(window).width() // A slight performance improvement, plus cleaner code
var maxImageWidth = <your value here>

var unroundedImageWidth = windowWidth / Math.floor(windowWidth / maxImageWidth)
var   roundedImageWidth = Math.ceil(unroundedImageWidth)

Unless your images fit perfectly, this will make each row slightly wider than the window, causing the final image on each line to wrap to the next. To prevent this, you need to set the gridContainer's width to that of each row.

$('.gridContainer').width(windowWidth * roundedImageWidth / unroundedImageWidth)

Everything should look good, except for one thing: the horizontal scrollbar. This is easily fixed, however. Add this to your CSS:

.gridContainer {
    overflow-x: hidden;
}

This will hide both the scrollbar and the final few pixels on each line. Perfect! Well, not quite.

The problem with this method is that one image per row takes the hit (loses pixels) for all of the others. If you have small images and a lot of images per row, you could end up losing a significant portion of your final column.

To avoid this, you can round your image widths upwards and distribute the overflow amongst all images in the row. This is a little more complicated than the previous method, but it does give a better result.

There are three more numbers you need to calculate.

var imagesPerRow = windowWidth / unroundedImageWidth
var numOfRows = Math.ceil($('.gridContainer img').length / imagesPerRow)
var spillage = windowWidth / roundedImageWidth - windowWidth // Pixels we have to lose

Now it's just a matter of distributing the spillage.

var i = 0 // Loop counter

while (spillage !== 0) {
     // Set the width of all images in column i to the width of that column - 1
     $('.gridContainer img:nth-child(' + imagesPerRow + 'n-' + (i+1) + ')')
         .width($('.gridContainer img:nth-child(' + (i+1) + ')').width() - 1)

    spillage--
    i++
}

There should no longer be more than a single pixel difference between the widths of the images.

Answer 2

It's because of rounding errors. What you do is fill the grid with 100 scaled images, depending on the browser to wrap to a new line when the image doesn't fit in the current row any more.

Now imagine a width of 305 pixels. Your formula gives an image width of 100 for that, so you get 3 images in a row and the next one wraps to the next row, leaving 5 pixels blank at the right border.

Answer 3

i think you should also add padding:0; to body its missing from your code.

Try it and even better just make a jsfiddle then it would be easier to check for everyone.