Bài viết sưu tầm

Khi bạn hiển thị website được load data từ cở sở dữ liệu lên, có thể bạn sẽ gặp trường hợp các dữ liệu sau khi hiển thị tuy cùng một đặc điểm nhưng lại có chiều cao khác nhau, khiến cho việc hiển thị bị lệch không đúng như ý muốn. Ví dụ có thể dễ nhận thấy nhất là  khi ta hiển thị 1 danh sách các sản phẩm dưới dạng lưới, khi đó các khung có chiều cao khác nhau sẽ làm cho lưới hiển thị bị vỡ. Vì vậy để giải quyết vấn đề đó thì ta phải set các chiều cao cố định. Ở đây mình chia sẻ với các bạn 1 function javarscript (bạn có thể viết bằng jQuery cho gọn hơn) với chức năng resize lại các khung sao cho chúng có cùng chiều cao sau khi đã load dữ liệu.

function resize_panel(start_pos, end_pos)

{

    hMax     = 0;

    for(j = start_pos; j<= end_pos; j++)

    {

        if(document.getElementById('Panel' + j ))

        {

            intH = parseInt(jQuery("#Panel" + j).height());

        }    

        if(intH > hMax)

        {

            hMax = intH;

        }

    }

    for(j=start_pos; j<=end_pos; j++)

    {

        if(document.getElementById('Panel'+j))

        {

            jQuery("#Panel"+j).css({height:hMax});

        }

    }

}