CODEWITHSUNDEEP
javascripthtml
jFasaJr
jFasaJr

Reputation: 487

Adding and removing Elements on resize

I'm trying to add and remove paragraph elements that are 1em (16px) wide both initially and when the window is resized. When the script first loads, it adds too many paragraph elements about 2 - 6 in most cases, and when I resize the window it either adds too many or removes to many I'm not sure what is causing it to go over or under the difference. I'm trying to accomplish this with vanilla javascript.

Edit: The paragraphs are meant to be vertical, and a single character wide 16px. I will then have characters randomly and continuously generate and fall down the screen.

(function(window, undefined){
    var parentContainer = document.getElementsByClassName('stringFall_Container'),
    paras = document.getElementsByClassName('para'),
    containerWidth,
    paraWidth,
    difference,
    paraAmount;

    function checkContainerWidth () {
        console.log('Running checkContainerWidth();')
        containerWidth = parentContainer[0].offsetWidth;
        console.log('The containers size is:' + containerWidth)
        return true;
    }

    function checkParaWidth () {
        console.log('Running checkParaWidth();')
        paraWidth = paras[0].offsetWidth;
        console.log('The Paragraphs size is:' + paraWidth)
        return true;
    }

    function checkParaAmount () {
        console.log('Running checkParaAmount();');
        paraAmount = paras.length;
        console.log(paraAmount);
        return true;
    }

    function checkDifference () {
        console.log('Running checkDifference();');
        difference = containerWidth / paraWidth;
        return true;
    }

    function addPara (number) {
        console.log('Running addPara();');
        number = number === undefined ? 1 : number;
        console.log(number);
        for (var i = 0; i < number; i++) {
            var create = document.createElement('p');
            parentContainer[0].appendChild(create).setAttribute('class', 'para');
        }
        return true;
    }

    function removePara (number) {
        console.log('Running removePara()');
        var lastElement = paras[paras.length - 1];
        checkParaAmount();
        number = number === undefined ? 1 : number;
        for (var i = 0; i < number; i++) {
            parentContainer[0].removeChild(lastElement);
        }
        return true;
    }

    function executeOnResize () {
        checkDifference();
        console.log('Running executeOnResize();');
        checkContainerWidth();
        if (difference < paraAmount) {
            addPara(paraAmount - difference);
        } else {
            removePara(difference - paraAmount)
        }
    }

    addPara();
    checkContainerWidth();
    checkParaWidth();
    checkParaAmount();
    checkDifference();
    console.log(difference);
    addPara(difference);

    window.addEventListener('resize', executeOnResize, false);
})(this);

Upvotes: 0

Views: 63

Answers (1)

dimodi
dimodi

Reputation: 4139

In such scenarios it is highly recommended to post a complete example, because it matters what styles are applied to the paragraphs and their container. An example will also help people understand what you are trying to do faster and more easily.

There are some issues in the algorithm, which standard debugging should reveal:

  • the initial adding of paragraphs should take into account that you already have one rendered: addPara(difference - 1);
  • before adding or removing paragraphs in executeOnResize, you should update the paraAmountValue value, as it is still 1;
  • when calculating the difference, you may want to disregard the decimal part and obtain an integer value, otherwise you will add or remove more paragraphs than necessary
  • the conditional statement in executeOnResize should allow a case when you neither have to add paragraphs, nor remove any
  • are you sure you want to add paragraphs when difference is less than paraAmount? Shouldn't it be the other way around?

Here is my test page, please review it. I hope it will help you go on.

http://dojo.telerik.com/AVoKU

You will notice that at some points, there is one paragraph falling on the second line - this is something that still needs to be fixed.

Upvotes: 1

Related Questions