jquery - is the variables only need to declare top of the function?
<p>I heard that, the variables all are need to declare on the top of the function by standards.</p>

<p>But in case when the element is created in between the function, and another element depends the width or height of the creating element(dynamicaly), how we can declare the variables at the top?</p>

<p>this is my function: </p>

<pre><code>var stepSlider = function(holder,column){

    $.each(holder, function(i,value) {

       var  container = $(value),
            colCount = column,
            boardViewer = container.find('.stepRangeCompound'),
            boardHolder = container.find('.boardHolder'),
            board =  container.find('.indBoard'),
            boardCount = board.size(),
            boardWidth = board.outerWidth(true),
            boardHeight = board.outerHeight(true),

            initial=0;

        //setting sizes

        while(initial &lt; boardCount){
            if(initial % colCount === 0){
                $('&lt;div /&gt;',{
                    class:'boardColumn',
                    css:{
                        float:'left',
                        height:boardHeight*colCount
                    }
                    })
                .appendTo(boardHolder) //after append only i am getting the width and element at all.
            }
            $('.boardColumn:last').append(board[initial]);
            initial++;
        }

        var colWidth = $('.boardColumn').width(), //i am declaring variable here
            coloSize = $('.boardColumn').size();

        boardViewer.css({
            width:colCount*colWidth // i am applying the values here.
        });

        boardHolder.css({
            width:coloSize * colWidth // i am applying the values here.
        });

    })
}
</code></pre>

<p>if i am wrong any one guide me into correct way to declare all variables only on top?</p>
