javascript (making collage from images)

javascript code for making collage through images working in mozilla but chrome
$(document).ready(function() {

    var canvaswidth = $('.rc-contentholder').width();
    var canvasheight = $('.rc-contentholder').height();

    function setleftandtop(noofdivision) {

        var elements = document.getElementsByClassName('rc-singlecontentholder');
        var noofelements = elements.length;
        //place the first row
        currentelementid = elements[0].id;
        $("#" + currentelementid).css('left', '0px');
        $("#" + currentelementid).css('top', '0px');

        for (j = 1; j < noofdivision; j++) {

            previousleft = parseFloat(elements[j - 1].style.left);
            top = 0;
            previouswidth = parseFloat(elements[j - 1].style.width);

            elements[j].style.left = (previousleft + previouswidth) + "px";

            elements[j].style.top = 0;

        }
        //place the remaining rows
        for (i = noofdivision; i < noofelements; i++) {
            currentid = elements[i - noofdivision].id;

            left = parseFloat(elements[i - noofdivision].style.left);

            uppertop = parseFloat(elements[i - noofdivision].style.top);
            console.log(uppertop)
            height = $("#" + currentid).height();
            console.log("id" + "=" + currentid + " " + "height" + "=" + ($("#" + currentid).height()));
            elements[i].style.left = left + "px";

            elements[i].style.top = (uppertop + height) + "px";

        }

    }

    if (canvaswidth >= 1200) {
        noofdivision = 5;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 900) {
        noofdivision = 4;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 550) {
        noofdivision = 3;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 480) {
        noofdivision = 2
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth < 480) {
        noofdivision = 1;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    }
});

in chrome the height of the division rc-singlecontentholder keeps changing dont know what is happening please help me. Help would be appreciated.

Answers


As a rule of thumb you should always provide a standalone example/snippet/jsfiddle, so it is easy for others to figure out exactly what your problem is. In your code the markup(HTML) is missing and several of your variables are not defined. However I will try to give you a push in the right direction from the information you have provided.

I deduced that you want to determine the amount of images your canvas can fit from an element with class 'rc-containerwidth'. The first thing I want to address is that if you iterate from

var j = 0

you can just use

elements[j]

but this is just a minor esthetic.

I am assuming that you have classes called 'rc-singlecontentholder' with actual content, that would make the divs have a width and a height. With this in mind the real problem I see with your code is that the first for loop sets the first n=(noofdivision-1) elements with class 'rc-singlecontentholder' to have top=0.

The second for loop starts at element number n=i-noofdivison. Since it starts at

var i = noofdivison;

this effectively starts at n=0, which means you are looping over the same elements as in the first loop. You then calculate the variable upperTop as the elements top position which will be 0.

upperTop = top = 0;

and finally sets the top of this element as top + height

elements[i].style.top = (upperTop + height) + 'px';

Which will cause the different elements to be positioned at the height of their container. This will happen to the first n=(noofdivison-1) elements and the rest will be placed depending on what your original css for these elements are, which are hard to guess from your question. These factors coupled together is likely what is causing the height in chrome to be different from the height of the divs in firefox. Hope this can point you in the right direction to bandage your code.

There are several improvements that can be done to the code apart from this, but this could be a good task to solve if you are in the stages of learning JavaScript.

If learning JavaScript is not of the essence then I suggest trying to reuse some of the libraries that already exists for image collages, which should be more robust and time-saving than creating your own. You can check out one alternative called H5P Collage or check out how we used JavaScript to make it at github. Disclosure: I am one of the developers on the H5P team.


Need Your Help

Whether to use a worker role or a web role : Windows Azure

c# windows azure

I am writing a small computation program with lot of read operations on blob files... Should I have to go for worker role or a web role....

android many icons to show but one id to render

android android-layout android-image android-icons

I want to show many icons which I will be getting from the fonticon.ttf which works fine.