views:

30

answers:

1

Hi everybody,

I made a script (using mootools library) that is supposed to overlay an image with a table grid and when each grid cell is clicked/dragged over its background color changes 'highlighting' the cell.

Current code creates a table and positions it over the element (el, image in this case). Table was used since I am planning to add rectangle select tool later on, and it seemed easiest way to do it.

<html>
<head>
    <title></title>
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript">
     var SetGrid = function(el, sz, nr, nc){

            //get number of rows/columns according to the 'grid' size
            numcols = el.getSize().x/sz;
            numrows  = el.getSize().y/sz;
            //create table element for injecting cols/rows
            var gridTable = new Element('table', {
                'id' : 'gridTable',
                'styles' : {
                    'width' : el.getSize().x,
                    'height' : el.getSize().y,
                    'top' : el.getCoordinates().top,
                    'left' : el.getCoordinates().left
                }
            });

            //inject rows/cols into gridTable
            for (row = 1; row<=numrows; row++){
                thisRow = new Element('tr', {
                    'id' : row,
                    'class' : 'gridRow'
                });
                for(col = 1; col<=numcols; col++){
                    thisCol = new Element('td', {
                        'id' : col,
                        'class' : 'gridCol0'
                    });

                    //each cell gets down/up over event... down starts dragging|up stops|over draws area if down was fired
                    thisCol.addEvents({
                        'mousedown' : function(){
                            dragFlag = true;
                            startRow = this.getParent().get('id');
                            startCol = this.get('id');
                        },
                        'mouseup' : function(){
                            dragFlag = false;
                        },
                        'mouseover' : function(){
                            if (dragFlag==true){
                                this.set('class', 'gridCol'+$$('#lvlSelect .on').get('value'));
                            }
                        },
                        'click' : function(){
                            //this.set('class', 'gridCol'+$$('#lvlSelect .on').get('id').substr(3, 1) );
                            str = $$('#lvlSelect .on').get('id');
                            alert(str.substr(2, 3)); 
                        }
                    });
                    thisCol.inject(thisRow, 'bottom');
                };
                thisRow.inject(gridTable, 'bottom');
            };
            gridTable.inject(el.getParent());
     }

     //sens level selector func
     var SetSensitivitySelector = function(el, sz, nr, nc){
        $$('#lvlSelect ul li').each(function(el){
            el.addEvents({
                'click' : function(){
                    $$('#lvlSelect ul li').set('class', '');
                    this.set('class', 'on');
                },
                'mouseover' : function(){
                    el.setStyle('cursor','pointer');
                },
                'mouseout' : function(){
                    el.setStyle('cursor',''); 
                }
            });
        });
     }

     //execute
     window.addEvent('load', function(){
        SetGrid($('imagetomap'), 32);
        SetSensitivitySelector();
     });


    </script>
    <style>
        #imagetomapdiv { float:left; display: block; }
        #gridTable { border:1px solid red; border-collapse:collapse; position:absolute; z-index:5; }
        #gridTable td { opacity:0.2; filter:alpha(opacity=20); }
        #gridTable .gridCol0 { border:1px solid gray; background-color: none;   }
        #gridTable .gridCol1 { border:1px solid gray; background-color: green;  }
        #gridTable .gridCol2 { border:1px solid gray; background-color: blue;   }
        #gridTable .gridCol3 { border:1px solid gray; background-color: yellow; }
        #gridTable .gridCol4 { border:1px solid gray; background-color: orange; }
        #gridTable .gridCol5 { border:1px solid gray; background-color: red;    }
        #lvlSelect ul {float: left; display:block; position:relative; margin-left: 20px; padding: 10px; }
        #lvlSelect ul li { width:40px; text-align:center; display:block; border:1px solid black; position:relative; padding: 10px; list-style:none; opacity:0.2; filter:alpha(opacity=20); }
        #lvlSelect ul li.on { opacity:1; filter:alpha(opacity=100); }
        #lvlSelect ul #li0  { background-color: none;   }
        #lvlSelect ul #li1  { background-color: green;  }
        #lvlSelect ul #li2  { background-color: blue;   }
        #lvlSelect ul #li3  { background-color: yellow; }
        #lvlSelect ul #li4  { background-color: orange; }
        #lvlSelect ul #li5  { background-color: red;    }
    </style>
</head>

<body>
    <div id="imagetomapdiv">
        <img id="imagetomap" src="1.png">

    </div>
    <div id="lvlSelect">
        <ul>
            <li value="0" id="li0">0</li>
            <li value="1" id="li1">1</li>
            <li value="2" id="li2">2</li>
            <li value="3" id="li3">3</li>
            <li value="4" id="li4">4</li>
            <li value="5" id="li5" class="on">5</li>
        </ul>
    </div>
</body>
</html>

A 'working' example: http://72.14.186.218/~alex/motion.php

There are two problems: while it works just fine in FF, IE and Chrome do not create the table if the page is refreshed. If you go back to directory root and click on the link to the file the grid table is displayed, if you hit 'refresh' button -- the script runs but the table is not injected.

Secondly, although the table HTML is injected in IE, it does not display it. I tried adding nbsp's to make sure its not ignored -- to no avail.

Any suggestions on improving code or help with the issues is appreciated.

Thanks!

A: 

Try adding a docType dec at the top of the page IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
edl
Many thanks, that worked! IE still does not fire events regularly 'onmouseover' but that's something I can live with. Thanks again!
do not use `mouseover` / `mouseout`. use the fixed (event bubbling/delegation issues) `mouseenter` / `mouseleave` instead. you can even use relay, like `lvlSelect.addEvent("mouseover:relay(li)")` to keep it cleaner (like the jquery .live)
Dimitar Christoff