Question

What I am doing is drawing rectangle in a div (“#gd_graphics_grid”) with divs acting as pixels. The problem is it’s kinda slow. On Chrome it might be ok (a bit slow) but on IE it’s a nightmare (I know it’s normal, because IE JavaScript engine is slow). I want to know if there’s a way to optimize this code (tried to, but didn’t succeed) :

here’s the html/php that generate the divs:

<div id="gd_graphics">
    <p id="gd_loader">Veuillez patienter!</p>
    <div id="gd_graphics_grid">
         <?php for($row = 0; $row < 73; $row++) : ?>
         <div class="gd_grid_row">
             <?php for($block = 0; $block < 130; $block++) : ?>
             <div class="gd_grid_block"><div class="gd_grid_block_wrap"></div></div>
            <?php endfor; ?>
            <div class="gd_hidden"></div>
         </div>
         <?php endfor; ?>
    </div>
</div>

And here’s the javascript (only the part that refresh (and that slow my code) :

function RefreshDrag()
{
    $(".gd_selected_block").removeClass("gd_selected_block");

    if(startX <= endingX)
    {
        var minX = startX;
        var maxX = endingX;
    }
    else
    {
        var minX = endingX;
        var maxX = startX;
    }

    if(startY <= endingY)
    {
        var minY = startY;
        var maxY = endingY;
    }
    else
    {
        var minY = endingY;
        var maxY = startY;
    }

    var $row = null;
    var $block = null;
    var $left = null;
    var $right = null;
    var $this = null;
    var rowIndex = null;

    $(".gd_grid_row").slice(minY, maxY+1).each(function() {
        $row = $(this);
        rowIndex = $row.index();

        if(rowIndex == minY || rowIndex == maxY)
        {
            $row.children(".gd_grid_block").slice(minX, maxX+1).find(".gd_grid_block_wrap").each(function() {
                $this = $(this);

                $this.addClass("gd_selected_block");
            });
        }
        else
        {
            $left  = $row.children(".gd_grid_block").eq(minX).find(".gd_grid_block_wrap");
            $right = $row.children(".gd_grid_block").eq(maxX).find(".gd_grid_block_wrap");

            $left.addClass("gd_selected_block");

            $right.addClass("gd_selected_block");
        }
    });

}

.gd_selected_block is a class that change de background color of the div (to act as a line). Thanks in advance.

Answer 1

Why are you doing this, in 2012?

Use some SVG library like Raphael or use HTML canvas element.

If you want to stick with your style, try to use div borders as line, or an img as line and re-position them, though I am not sure what exactly you are trying to achieve