Question

I have 6 divs on a page which are dynamically placed into 2 columns depending on the content they have in it. In this case – some divs get placed into left column and some placed in the right column – all depending on the height of the div. I would like to grab all the divs placed in the left column or right column. I’m looking for a way to add a class for all the left column divs to distinguish between the right column divs? Is it possible to use a selector in jQuery to achieve this?

 function fixPAPanelHeights()
    {
        var column1Height = 0;
        var column2Height = 0;
        var panel1Item;
        var panel2Item;

        var panelCount = 0;

        $j("div.panelItr").each(function() {
            panelCount++;
            if ($j(this).hasClass("panel2Column"))
                {
                    if (column1Height > column2Height)
                    {
                        $j(panel2Item).css("height", $j(panel2Item).innerHeight() + column1Height - column2Height + (5 * (((panelCount - 1) / 2) - 1)));
                    }
                    else if (column2Height > column1Height)
                    {
                        $j(panel1Item).css("height", $j(panel1Item).innerHeight() + column2Height - column1Height + (5 * (((panelCount - 1) / 2) - 1)));
                    }
                    column1Height = 0;
                    column2Height = 0;
                    panelCount = 0;
                }
            else
                {           
                    if (panelCount%2 == 1)
                    {                   
                        $j(this).css("float", "left");
                                    pos = $j(this).offset();


            $j(this).css({ "left": (pos.left) + "px"});
                            panel1Item = $j(this);              
                            column1Height += $j(this).innerHeight();                
                        }
                        else
                        {

                            $j(this).css("float", "left");
                    panel2Item = $j(this);
    pos = $j(this).offset();
        $j(this).css({ "left": (pos.left) + "px"}); 


                        column2Height += $j(this).innerHeight();

                    }
                }

         });

Note: The if ($j(this).hasClass(“panel2Column”)) condition tests whether there is a div long enough to occupy both the columns and does some calculation based on it. We are concerned about the else case where all the divs have same width and possibly can occupy either left column or right column.

UPDATE:

Kind of figured out a solution for identifying in which column the divs are placed. Since its a 2 column and only 2 possible left positions for the div, the below code helps.

within the else condition above:

var dataHolder = $j("div.panelItr").first().offset().left;
else{
    if($j(this).offset().left == dataHolder){
                    $j(this).addClass("leftColumn");
                }
                else{
                    $j(this).addClass("rightColumn");
                }
}

Answer 1

Kind of figured out a solution for identifying in which column the divs are placed. Since its a 2 column and only 2 possible left positions, below code would help.

var dataHolder = $j("div.panelItr").first().offset().left;

if($j(this).offset().left == dataHolder){
                $j(this).addClass("leftColumn");
            }
            else{
                $j(this).addClass("rightColumn");
            }