slow response in table cells <TD> to mouseover with IE6 but fine inFirefox.

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • markszlazak@gmail.com
    #1

    slow response in table cells <TD> to mouseover with IE6 but fine inFirefox.

    I'm a relatively slow response of table cells changing their
    background color with mouseover/our in IE6 (Win 2K) but the response
    is fine (fast) in Firefox. Why? The code is below. Sorry about the
    length.

    <html>
    <head>
    <title>Rapid Blocking Interface</title>
    <style>
    .calendar {
    position:relati ve;
    cursor:default;
    }
    .calendarHeader {
    background-color:lightgree n;
    text-align:center;
    font-family:sans-serif;
    width:140;
    }
    .calendarRow {
    height:30;
    }
    #calendar1 {
    top:20;
    left:10;
    background-color:white;
    }
    #appointment {
    position:absolu te;
    width:300;
    height:200;
    background-color:lightyell ow;
    border:2px black solid;
    font-weight:bold;
    font-family:sans-serif;
    visibility:hidd en;
    }
    #output {
    position:absolu te;
    top:35;
    left:750
    }
    #clear {
    position:absolu te;
    top:460;
    left:750;
    width:80;
    background-color:lightgrey ;
    border:2px black solid;
    color:black;
    text-align:center;
    font-weight:bold;
    font-family:sans-serif;
    cursor:default;
    }
    </style>
    </head>
    <body>
    <table id='calendar1' class='calendar ' border='1' cellpadding='0'
    cellspacing='0' >
    <tr>
    <td class="calendar Header">0</td>
    <td class="calendar Header">1</td>
    <td class="calendar Header">2</td>
    <td class="calendar Header">3</td>
    <td class="calendar Header">4</td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr class='calendar Row'>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    <div id="output"><te xtarea cols=25 rows=25></textarea></div>
    <div
    id="clear"
    onmousedown="re turn false;"
    onclick="docume nt.getElementBy Id('output').fi rstChild.value = '';"
    >
    CLEAR
    </div>
    <div
    id="appointment "
    class="draggabl e"
    onclick="this.s tyle.visibility = 'hidden';"
    >
    &nbsp;&nbsp;
    </div>

    <script>
    (function () {
    var calendar = document.getEle mentById('calen dar1'),
    rows = calendar.getEle mentsByTagName( 'tr'),
    slots = calendar.getEle mentsByTagName( 'td');

    /*debug*/ var output = document.getEle mentById('outpu t').firstChild;
    /*debug*/ output.value = '';

    var apt = document.getEle mentById('appoi ntment');
    apt.appendChild (document.creat eTextNode(''));

    function addSlotControl( el) {
    var sc = document.create Element('div');
    sc.style.positi on='relative';
    sc.style.backgr oundColor='ligh tgrey';
    sc.style.border Width='1px';
    sc.style.border Color='black';
    sc.style.border Style='solid';
    sc.style.margin ='0px';
    sc.style.paddin g='0px';
    sc.style.visibi lity='hidden';
    sc.style.top=0;
    sc.style.left=1 00;
    sc.style.height =13;
    sc.style.width= 28;
    sc.style.textAl ign='center';
    sc.style.fontSi ze=10;
    sc.style.fontFa mily='sans-serif';
    sc.appendChild( document.create TextNode('SC')) ;
    el.appendChild( sc);
    }

    var selectMode = false,
    initialControlS tate,
    columnSelected,
    firstRowSelecte d,
    previousRowSele cted,
    lastRowSelected ,
    selectionCancel led,
    downOn = null;

    function mousedownHandle r(e) {
    e.returnValue = false;
    if (e.preventDefau lt) {e.preventDefau lt();}

    var target = getEventTarget( e);
    if (target.nodeNam e !== 'DIV') {
    if (target.nodeNam e === 'TD') {
    downOn = target;
    }
    return false;
    }
    addEvent(calend ar, 'selectstart', selectStartHand ler, false);

    var slot = target.parentNo de;
    selectMode = true;
    selectionCancel led = false;
    initialControlS tate = target.style.ba ckgroundColor;
    columnSelected = slot.cellIndex;
    firstRowSelecte d = lastRowSelected = slot.parentNode .rowIndex;

    slot.firstChild .style.visibili ty = 'hidden';
    slot.style.back groundColor
    = (initialControl State === 'lightgrey')? '#FF9966':'#FFC C99';

    return false;
    }

    /
    *************** *************** *************** *************** ***********
    Distinguishing onmouseover/out of child elements from those of the
    parent element.

    Mouseover fires first but mouseout fires when the mouse moves over
    the child (DIV) element. The problem is not just about bubbling,
    because when you move the mouse over the DIV, you are not moving out
    of anything contained in the table cell (TD) nor are you moving out
    of the area contained by the TD. A mouseout event fires simply
    because a mouseover event fires for another element.

    See: http://www.faqts.com/knowledge_base/view.phtml/aid/1606
    Javascript - Mouse Events
    http://www.quirksmode.org/js/events_mouse.html

    503 Service Temporarily Unavailable
    http://www.dynamic-tools.net/toolbox/isMouseLeaveOrEnter/


    Also, the try/catch blocks handle a related version of the

    "Permission denied to get property HTMLDivElement. parentNode"

    bug in Firefox/Mozilla. Moving the mouse cursor fast enough from the
    grid over the textarea will cause this bug to occur.

    See: https://bugzilla.mozilla.org/show_bug.cgi?id=208427
    214340 - Error: uncaught exception: Permission denied to get property HTMLDivElement.parentNode
    https://bugzilla.mozilla.org/show_bug.cgi?id=214340
    RESOLVED (anthonyd) in Core - DOM: Core & HTML. Last updated 2014-01-16.



    *************** *************** *************** *************** ***********/

    function mouseoverHandle r(e) {
    if (selectionCance lled) { return; }

    var err, target = getEventTarget( e);

    if (target.nodeNam e !== 'TD'
    &&
    target.nodeName !== 'DIV') { return; } // Mouse did not enter
    // calendar slot.

    /** Get the element the mouse comes from. **/

    var relTarget = e.relatedTarget || e.fromElement;
    try {
    if (relTarget.pare ntNode === target // Mouse moves
    || // from child
    target.parentNo de === relTarget) { return; } // over parent
    } // target element
    catch (err) { return; } // or vice versa.

    /** Mouse actually entered TD. Handle event. **/

    if (target.nodeNam e === 'DIV') { target = target.parentNo de; }
    if (target.classNa me === 'calendarHeader ') { // Mouse moved into
    if (selectMode) { cancelSelection (); } // calendar header.
    }
    else if (!selectMode) {
    target.style.ba ckgroundColor
    = (target.firstCh ild.style.backg roundColor === 'lightgrey')?
    'lightyellow':' lightgrey';
    target.firstChi ld.style.visibi lity = "visible";
    }
    else if (target.cellInd ex === columnSelected)
    {
    // First detect missed mouse events with fast cursor movement.

    var rowT = target.parentNo de.rowIndex,
    rowRT = (relTarget.node Name === 'TD')?
    relTarget.paren tNode.rowIndex: relTarget.paren tNode.parentNod e.rowIndex;

    if (rowRT !== undefined
    &&
    Math.abs(rowRT - rowT) 1) // Cancel if slot events missed.
    {
    cancelSelection ();

    return;
    }

    previousRowSele cted = lastRowSelected ;
    lastRowSelected = target.parentNo de.rowIndex;
    var slot,
    sc,
    vector = Math.abs(lastRo wSelected - firstRowSelecte d) -
    Math.abs(previo usRowSelected - firstRowSelecte d);

    if (vector 0) // Moving away from first selection.
    {
    sc = target.firstChi ld;
    sc.style.visibi lity = 'hidden';
    target.style.ba ckgroundColor
    = (sc.style.backg roundColor === 'lightgrey')?
    '#C6E2FF':'#9FB 6CD';
    }
    else if (vector < 0) // Moving toward first selection.
    {
    slot = rows[previousRowSele cted].cells[columnSelected];
    slot.style.back groundColor
    = (slot.firstChil d.style.backgro undColor === 'lightgrey')?
    'white':'lightg rey';
    }
    }

    }

    function mouseoutHandler (e) {
    if (selectionCance lled) { return;}

    var err, target = getEventTarget( e);

    if (target.nodeNam e !== 'TD'
    &&
    target.nodeName !== 'DIV') { return; } // Mouse did not exit
    // calendar slot.
    /** Get the element the mouse goes to **/

    var relTarget = e.relatedTarget || e.toElement;
    try { // Mouse moves
    if (relTarget.pare ntNode === target // to child
    || // out from
    target.parentNo de === relTarget) { return; } // parent target
    } // or vice versa.
    catch (err) {
    if (!selectMode
    &&
    target.style.ba ckgroundColor) // IE related issue.
    {

    target.style.ba ckgroundColor
    = (target.firstCh ild.style.backg roundColor === 'lightgrey')?
    'white':'lightg rey';
    target.firstChi ld.style.visibi lity = "hidden";
    }

    return;
    }

    /** Mouse actually left TD. Handle event. **/

    if (target.nodeNam e === 'DIV') { target = target.parentNo de; }
    if (target.classNa me === 'calendarHeader ') { return; }

    if (!selectMode) {
    target.style.ba ckgroundColor
    = (target.firstCh ild.style.backg roundColor === 'lightgrey')?
    'white':'lightg rey';
    target.firstChi ld.style.visibi lity = "hidden";
    }
    else if (relTarget.cell Index !== columnSelected)
    { cancelSelection (); }

    }

    function mouseupHandler( e) {
    var coord, target = getEventTarget( e);

    if (target.nodeNam e === 'DIV')
    {
    target = target.parentNo de;
    }
    if (target.nodeNam e === 'TD'
    &&
    target.parentNo de.className === 'calendarRow')
    {
    if (selectMode) {
    if (!selectionCanc elled) { finalizeSelecti on(); }
    }
    else if (downOn === target) {
    if (target.style.b ackgroundColor !== 'lightgrey') {
    apt.innerHTML = '&nbsp;&nbsp; ' + target.parentNo de.rowIndex + ',
    '+ target.cellInde x;
    apt.style.left = e.pageX || e.clientX + document.body.s crollLeft
    + document.body.c lientLeft;
    apt.style.top = e.pageY || e.clientY + document.body.s crollTop +
    document.body.c lientTop;
    apt.style.visib ility = 'visible';
    }
    downOn = null;
    }
    }
    selectMode = selectionCancel led = false; // Whether true or false,
    calendar.onsele ctstart = null; // set to false.
    }

    function selectStartHand ler(e) {
    e.returnValue = false;
    return false;
    }

    function finalizeSelecti on() {
    var c = columnSelected, r, slot, slotBgC, scBgC;

    if (initialControl State === 'lightgrey') {
    slotBgC = 'lightgrey';
    scBgC = 'white';
    }
    else {
    slotBgC = 'white';
    scBgC = 'lightgrey';
    }
    if (firstRowSelect ed <= lastRowSelected ) {
    for (r = firstRowSelecte d; r <= lastRowSelected ; r++) {
    (slot = rows[r].cells[c]).style.backgro undColor = slotBgC;
    slot.firstChild .style.backgrou ndColor = scBgC;
    }
    }
    else {
    for (r = firstRowSelecte d; r >= lastRowSelected ; r--) {
    (slot = rows[r].cells[c]).style.backgro undColor = slotBgC;
    slot.firstChild .style.backgrou ndColor = scBgC;
    }
    }
    initialControlS tate = null;
    firstRowSelecte d = null;
    lastRowSelected = null;
    columnSelected = null;
    }

    function cancelSelection () {
    var c = columnSelected, r, slot, slotBgC;

    selectionCancel led = true;

    if (firstRowSelect ed <= lastRowSelected ) {
    for (r = firstRowSelecte d; r <= lastRowSelected ; r++) {
    slotBgC = ((slot =
    rows[r].cells[c]).firstChild.st yle.backgroundC olor === 'white')?
    'lightgrey':'wh ite';
    slot.style.back groundColor = slotBgC;
    }
    }
    else {
    for (r = firstRowSelecte d; r >= lastRowSelected ; r--) {
    slotBgC = ((slot =
    rows[r].cells[c]).firstChild.st yle.backgroundC olor === 'white')?
    'lightgrey':'wh ite';
    slot.style.back groundColor = slotBgC;
    }
    }
    initialControlS tate = null;
    firstRowSelecte d = null;
    lastRowSelected = null;
    columnSelected = null;
    }

    function elXY(el) {
    var c = {x:0, y:0};
    while (el) {
    c.x += el.offsetLeft;
    c.y += el.offsetTop;
    el = el.offsetParent ;
    }
    return c;
    }

    function evtXY(e) {
    return {
    x:e.offsetX || e.clientX + window.pageXOff set,
    y:e.offsetY || e.clientY + window.pageYOff set
    }
    }

    function addEvent(el, evtType, listener, captures) {
    if (el.addEventLis tener) {
    el.addEventList ener(evtType, listener, captures);
    return true;
    }
    else if (el.attachEvent ) {
    return el.attachEvent( 'on' + evtType, listener);
    }
    else {
    el['on' + evtType] = listener;
    }
    }

    function getEventTarget( e) {
    return (window.event)? window.event.sr cElement:(e)? e.target:null;
    }

    function stopBubbling(e) {
    if (!e) { var e = window.event; }
    e.cancelBubble = true;
    if (e.stopPropagat ion) { e.stopPropagati on(); }
    }

    for (var i=0; i < slots.length; i++) {
    if (slots[i].className !== 'calendarHeader ') {
    addSlotControl( slots[i]); // Add slot control as
    } // slots first child.
    }
    addEvent(docume nt, 'mouseup', mouseupHandler, false);
    addEvent(calend ar, 'mousedown', mousedownHandle r, false);
    addEvent(calend ar, 'mouseover', mouseoverHandle r, false);
    addEvent(calend ar, 'mouseout', mouseoutHandler , false);
    })();
    </script>
    </body>
    </html>
    Tags: None
    • yukabuk
      #2
      Re: slow response in table cells &lt;TD&gt; to mouseover with IE6 but finein Firefox.

      Works same in both browsers for me

        Comment

        • markszlazak@gmail.com
          #3
          Re: slow response in table cells &lt;TD&gt; to mouseover with IE6 but finein Firefox.

          On Jun 1, 5:20 am, yukabuk <yuka...@google mail.comwrote:
          Works same in both browsers for me
          yukabuk, I need to test this also on very old computers like 500 Mhz /
          256 MB systems. I'm see a big difference on the same system in how
          fast Firefox and IE respond to moving the cursor over the tables
          cells. IE is quite slow, I'm wondering why and what can be done about
          it.

          Thanks.

            Comment

            • markszlazak@gmail.com
              #4
              Re: slow response in table cells &lt;TD&gt; to mouseover with IE6 but finein Firefox.

              Again, does anyone have an idea why IE6 is so much slower in changing
              the background color of table cells when the cursor moves relatively
              quickly over a table column in the script I posted? If so, could they
              please show me the reason, point me to it or tell me how would I test
              the idea.

              Thank you.

                Comment

                • Tom Cole
                  #5
                  Re: slow response in table cells &lt;TD&gt; to mouseover with IE6 but finein Firefox.

                  On Jun 1, 8:20 am, yukabuk <yuka...@google mail.comwrote:
                  Works same in both browsers for me
                  I have to agree with Yukabuk. I see no difference at all. My machine
                  has a dual core 2.4 GHz processor and 4 GB of RAM, maybe that is why.

                    Comment

                    Previous template Next
                    Working...