search

mootools / mootools-core

MooTools Core Repository
https://mootools.net
2.65k stars 507 forks source link

IE9 throws error during drag event #2278

Closed ilanle closed 12 years ago

ilanle commented 12 years ago

SCRIPT16389: Unspecified error. mootools-core.js, line 397 character 129

on this token: var r=this.getBoundingClientRect(

This happens intermittently when dragging objects (script based on one of the demos on this website). It happens during drag (not on drop, not on enter, not on leave and not on cancel, but during the drag itself)

ibolmo commented 12 years ago

Could you please provide us with the version of mootools and a jsfiddle (or code) that reproduces the crash?

On Mon, Feb 6, 2012 at 10:46 PM, ilanle < reply@reply.github.com

wrote:

SCRIPT16389: Unspecified error. mootools-core.js, line 397 character 129

on this token: var r=this.getBoundingClientRect(

This happens intermittently when dragging objects (script based on one of the demos on this website). It happens during drag (not on drop, not on enter, not on leave and not on cancel, but during the drag itself)

Reply to this email directly or view it on GitHub: https://github.com/mootools/mootools-core/issues/2278

ilanle commented 12 years ago

Source code for page to reproduce:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Make your own scavenger hunt 
<body  class="backgroundlevel-high bodylevel-high cssstyle-style1

font-family-helvetica font-size-is-default col12">

                    <div id="rt-header">
        <div class="rt-container">
            <div id="rt-header2">
                <div id="rt-header3">
                    <div id="rt-header4">
                        <div class="rt-grid-12 rt-alpha rt-omega">
            <div class="rt-block">
            <a href="/" id="rt-logo"></a>
        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
                            <div id="rt-feature">
        <div class="rt-container">
                            <div class="clear"></div>
        </div>
    </div>
                            <div id="rt-main-surround">
                    <div id="rt-maintop">
            <div class="rt-container">
                <div class="rt-grid-12 rt-alpha rt-omega">
                    <div class="rt-block">
            <div class="module-surround">
                                                        <div

class="module-content">

    <div class="maximenuckh" id="maximenuck" style="z-index:10;">
    <div class="maxiroundedleft"></div>
    <div class="maxiroundedcenter">
        <ul class="menu maximenuck" style="background:#FFCB3B">
  • Scavenger hunt lists

  • <span class="titreck">Make your own scavenger hunt

    •     <div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!-- fin maximenuCK -->
                </div>
            </div>
        </div>

                </div>
        </div>
                                                      <div id="rt-main"

    class="mb7-sa5">

                                <div class="rt-grid-5 ">
            <div id="rt-sidebar-c">
                                    <div class="rt-block">
            <div class="module-surround">
                                                        <div

    class="module-content"> <html xmlns:fb="http://ogp.me/ns/fb#" xmlns:og=" http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

                </div>
        </div>

                <div class="clear"></div>
            </div>
        </div>
                            </div>
    <div class="clear"></div>
                                                </body>

    source of my javascript file:

    function save_page_to_file() { var page = document.getElementById('sh-background'); var save_data= escape(document.getElementById('game-page').innerHTML); var session_id=document.getElementById('session_id').value; new Request({ url: 'http://www.scavengerhunt.org/scripts/index.php', onSuccess: function(data) { var data2= unescape(data); var response_div= document.getElementById('save-result'); response_div.innerHTML=data2; }

    }).post('tmpl=component&func=save-page&data='+save_data+'&session_id='+session_id); }

    function get_page_from_file() { var session_id=document.getElementById('session_id').value; if (document.getElementById('game-page').innerHTML!='') { return; } new Request({ url: 'http://www.scavengerhunt.org/scripts/index.php', onSuccess: function(data) { var data2= unescape(data); var game_div= document.getElementById('game-page'); game_div.innerHTML=data2; } }).post('tmpl=component&func=get-page&session_id='+session_id);

    var page = document.getElementById('sh-background'); var save_data= escape(document.getElementById('game-page').innerHTML); var session_id=document.getElementById('session_id').value;

    }

    function add_drag_events() { var clipart_width = 45; var clipart_height = 45; $$('.item').addEvent('mousedown', function(event){ event.stop(); // this refers to the element with the .item class var shirt = this; var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({ opacity: 0.4, position: 'absolute', }).inject(document.body);

        var drag = new Drag.Move(clone, {
        droppables: $$('.carti'),

        onDrop: function(dragging, cart){

            dragging.destroy();

            if (cart !== null){
               if ( cart.hasChildNodes() )
                {
                    while ( cart.childNodes.length >= 1 )
                    {
                        cart.removeChild( cart.firstChild );
                    }
                }
                cart.style.backgroundImage =

    "url('../images/general/frame3.png')"; var oImg=document.createElement("img"); oImg.setAttribute('src', shirt.children[0].getAttribute('src')); oImg.setAttribute('class','itemi');

                    if(shirt.children[0].getAttribute('width')>

    shirt.children[0].getAttribute('height')){ //alert('width '+shirt.children[0].getAttribute('width')+' '+ shirt.children[0].getAttribute('height')); oImg.setAttribute('width',clipart_width+'px'); oImg.setAttribute('height',clipart_height+'px'); } else { //alert('height '+shirt.children[0].getAttribute('width')+' '+ shirt.children[0].getAttribute('height')); oImg.setAttribute('height',clipart_width+'px'); oImg.setAttribute('width',clipart_height+'px'); }

                    try{
                cart.appendChild(oImg);
                }catch(n){};
                try{
                save_page_to_file();
                }catch(n){};
            }
        },
        onEnter: function(dragging, cart){
            cart.style.backgroundImage =

    "url('../images/general/frame3r.png')"; }, onLeave: function(dragging, cart){ cart.style.backgroundImage = "url('../images/general/frame3.png')"; }, onCancel: function(dragging){ dragging.destroy(); } }); drag.start(event); });

    } window.addEvent('domready', function(){ if (document.images) {//this is for preloading the red frame image img1 = new Image();//this is for preloading the red frame image img1.src = "../images/general/frame3r.png";//this is for preloading the red frame image }//this is for preloading the red frame image if (document.getElementById('game-page').innerHTML=='') { get_page_from_file(); } });

    hope this helps ilan

    On Tue, Feb 7, 2012 at 6:49 AM, Olmo Maldonado < reply@reply.github.com

    wrote:

    Could you please provide us with the version of mootools and a jsfiddle (or code) that reproduces the crash?

    On Mon, Feb 6, 2012 at 10:46 PM, ilanle < reply@reply.github.com

    wrote:

    SCRIPT16389: Unspecified error. mootools-core.js, line 397 character 129

    on this token: var r=this.getBoundingClientRect(

    This happens intermittently when dragging objects (script based on one of the demos on this website). It happens during drag (not on drop, not on enter, not on leave and not on cancel, but during the drag itself)

    Reply to this email directly or view it on GitHub: https://github.com/mootools/mootools-core/issues/2278

    Reply to this email directly or view it on GitHub: https://github.com/mootools/mootools-core/issues/2278#issuecomment-3842561

    ilanle commented 12 years ago

    BTW, happens in IE, does not happen in firefox and chrome

    On Tue, Feb 7, 2012 at 10:02 AM, ilan lewin ilan.lewin@gmail.com wrote:

    Source code for page to reproduce:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Make your own scavenger hunt 
    <body  class="backgroundlevel-high bodylevel-high cssstyle-style1

    font-family-helvetica font-size-is-default col12">

                        <div id="rt-header">
        <div class="rt-container">
            <div id="rt-header2">
                <div id="rt-header3">
                    <div id="rt-header4">
                        <div class="rt-grid-12 rt-alpha rt-omega">
            <div class="rt-block">
            <a href="/" id="rt-logo"></a>
        </div>

                        </div>
                </div>
            </div>
        </div>
    </div>
                            <div id="rt-feature">
        <div class="rt-container">
                            <div class="clear"></div>
        </div>
    </div>
                            <div id="rt-main-surround">
                    <div id="rt-maintop">
            <div class="rt-container">
                <div class="rt-grid-12 rt-alpha rt-omega">
                    <div class="rt-block">
            <div class="module-surround">
                                                        <div

    class="module-content">

        <div class="maximenuckh" id="maximenuck" style="z-index:10;">
    <div class="maxiroundedleft"></div>
    <div class="maxiroundedcenter">
        <ul class="menu maximenuck" style="background:#FFCB3B">
  • Scavenger hunt lists

  • <a class="maximenuck " href="/free-scavenger-hunt-list.html">Make your own scavenger hunt

    •     <div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!-- fin maximenuCK -->
                </div>
            </div>
        </div>

                </div>
        </div>
                                                      <div

    id="rt-main" class="mb7-sa5">

                                <div class="rt-grid-5 ">
            <div id="rt-sidebar-c">
                                    <div class="rt-block">
            <div class="module-surround">
                                                        <div

    class="module-content"> <html xmlns:fb="http://ogp.me/ns/fb#" xmlns:og=" http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

                </div>
        </div>

                <div class="clear"></div>
            </div>
        </div>
                            </div>
    <div class="clear"></div>
                                                </body>

    source of my javascript file:

    function save_page_to_file() { var page = document.getElementById('sh-background'); var save_data= escape(document.getElementById('game-page').innerHTML); var session_id=document.getElementById('session_id').value; new Request({ url: 'http://www.scavengerhunt.org/scripts/index.php', onSuccess: function(data) { var data2= unescape(data); var response_div= document.getElementById('save-result'); response_div.innerHTML=data2; }

    }).post('tmpl=component&func=save-page&data='+save_data+'&session_id='+session_id); }

    function get_page_from_file() { var session_id=document.getElementById('session_id').value; if (document.getElementById('game-page').innerHTML!='') { return; } new Request({ url: 'http://www.scavengerhunt.org/scripts/index.php', onSuccess: function(data) { var data2= unescape(data); var game_div= document.getElementById('game-page'); game_div.innerHTML=data2; } }).post('tmpl=component&func=get-page&session_id='+session_id);

    var page = document.getElementById('sh-background'); var save_data= escape(document.getElementById('game-page').innerHTML); var session_id=document.getElementById('session_id').value;

    }

    function add_drag_events() { var clipart_width = 45; var clipart_height = 45; $$('.item').addEvent('mousedown', function(event){ event.stop(); // this refers to the element with the .item class var shirt = this; var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({ opacity: 0.4, position: 'absolute', }).inject(document.body);

        var drag = new Drag.Move(clone, {
        droppables: $$('.carti'),

        onDrop: function(dragging, cart){

            dragging.destroy();

            if (cart !== null){
               if ( cart.hasChildNodes() )
                {
                    while ( cart.childNodes.length >= 1 )
                    {
                        cart.removeChild( cart.firstChild );
                    }
                }
                cart.style.backgroundImage =

    "url('../images/general/frame3.png')"; var oImg=document.createElement("img"); oImg.setAttribute('src', shirt.children[0].getAttribute('src')); oImg.setAttribute('class','itemi');

                    if(shirt.children[0].getAttribute('width')>

    shirt.children[0].getAttribute('height')){ //alert('width '+shirt.children[0].getAttribute('width')+' '+ shirt.children[0].getAttribute('height')); oImg.setAttribute('width',clipart_width+'px'); oImg.setAttribute('height',clipart_height+'px'); } else { //alert('height '+shirt.children[0].getAttribute('width')+' '+ shirt.children[0].getAttribute('height')); oImg.setAttribute('height',clipart_width+'px'); oImg.setAttribute('width',clipart_height+'px'); }

                    try{
                cart.appendChild(oImg);
                }catch(n){};
                try{
                save_page_to_file();
                }catch(n){};
            }
        },
        onEnter: function(dragging, cart){
            cart.style.backgroundImage =

    "url('../images/general/frame3r.png')"; }, onLeave: function(dragging, cart){ cart.style.backgroundImage = "url('../images/general/frame3.png')"; }, onCancel: function(dragging){ dragging.destroy(); } }); drag.start(event); });

    } window.addEvent('domready', function(){ if (document.images) {//this is for preloading the red frame image img1 = new Image();//this is for preloading the red frame image img1.src = "../images/general/frame3r.png";//this is for preloading the red frame image }//this is for preloading the red frame image if (document.getElementById('game-page').innerHTML=='') { get_page_from_file(); } });

    hope this helps ilan

    On Tue, Feb 7, 2012 at 6:49 AM, Olmo Maldonado < reply@reply.github.com

    wrote:

    Could you please provide us with the version of mootools and a jsfiddle (or code) that reproduces the crash?

    On Mon, Feb 6, 2012 at 10:46 PM, ilanle < reply@reply.github.com

    wrote:

    SCRIPT16389: Unspecified error. mootools-core.js, line 397 character 129

    on this token: var r=this.getBoundingClientRect(

    This happens intermittently when dragging objects (script based on one of the demos on this website). It happens during drag (not on drop, not on enter, not on leave and not on cancel, but during the drag itself)

    Reply to this email directly or view it on GitHub: https://github.com/mootools/mootools-core/issues/2278

    Reply to this email directly or view it on GitHub: https://github.com/mootools/mootools-core/issues/2278#issuecomment-3842561

    fabiomcosta commented 12 years ago

    ouch... @ilanle, @ibolmo was talking about creating a http://jsfiddle.net example, so we could see it happening, edit the code and probably fix it.

    Creating a jsfiddle is really straightforward.

    Thank you, by the way.