Question

I'm frequently using jQuery highlight effect on some table data (td) cell. I just realized that when I use this effect, the window.name value magically changes in "data-ec" value after highlight effect is complete. This behavior gives me some problems, because I need to check window.name that I previously set.

I'm using code as following:

<html>
<head>
    <script src='jquery-1.6.min.js' type="text/javascript"></script> 
    <script src='jquery-ui-1.8.12.custom.min.js' type="text/javascript"></script> 

    <script type="text/javascript">

        function PlayIssue() {
            //Set Window Name
            window.name = 'myWindowName';
            // Get RIGHT window name
            alert(window.name); // popup shows "myWindowName" as window name

            //Play jQuery Effect on TD cell
            var myCell = $("#TableID tr[id='row_ID'] td:nth-child(1)");
            myCell.effect("highlight", { color: '#FFA500' }, 8000);

            //get WRONG window name
            alert(window.name);  // popup shows "data-ec" as window name
        }
     </script>
</head>
<body>
    <table id="TableID" border="1">
        <tr id="row_ID">
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
    </table>

    <script type="text/javascript">

        //Call JS Function to play issue
        PlayIssue();
     </script>
</body>
</html>

Do you have any idea for this behavior ? This issue happens on IE 9/10 (tried only these), but not in Firefox and Chrome.

Thanks a lot in advance.

Was it helpful?

Solution

I solved with replacing 'effect' function, with 'animate' function.

I used the following function:

function flashColor(obj) {
    if (obj.length) {
        var originalColor = obj.css('backgroundColor');
        obj.animate({ backgroundColor: '#FFA500' }, 1000).delay(700).animate({ backgroundColor: originalColor }, 1000);
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top