Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    event registration in Opera??

    I am having difficulty with all versions of Opera I have to test script with.

    I thought that Opera was a DOM compliant browser. But I have event
    registration code via either setAttribute, addEventListener, or attachEvent
    the script in question works in both Firefox, and other DOM compliant browsers,
    and in IE 7.

    But Opera does not respond properly to mouse clicks that are suppose to
    swap coordinates between absolutely positioned div, that are create and
    appended in by code.
    I have been watching the error consoles in Opera and no complaints, it
    just goes DUH? Occasionally it will swap, but most of the time it won't.
    Any suggestions?
    Code:
    //// preceding code...
                         var TIT = document.createElement('pre');
                               TIT.className = 'title';
                               TIT.appendChild(document.createTextNode(tit));
                               CNT.appendChild(TIT);
                           var HR = document.createElement('hr');
                           CNT.appendChild(HR)
                           var SUBDIV = '';
                           var samp = '';
                           var XOFST = 80; // larger sizes may need a different value
                           var YOFST = 40
                           var out = '';
                           for(var i = 0; i < idLst.length; i++)
                              {
                               var y = parseInt(idLst[idLstShuf[i]][2]) - YOFST;
                               var x = parseInt(idLst[idLstShuf[i]][3]) - XOFST;
                               SUBDIV = document.createElement('div');
                               SUBDIV.setAttribute('id', input.charAt(i)+i);
                               this.gameSet[i] = input.charAt(i)+i;
                               SUBDIV.style.position = 'absolute';
                               SUBDIV.style.top = y+'px';
                               SUBDIV.style.left = x+'px';
                               SUBDIV.style.height = '15px';
                               SUBDIV.style.width = '15px';
                               SUBDIV.style.padding = '10px';
                               SUBDIV.style.borderStyle = 'groove';
                               SUBDIV.style.borderWidth = '2px';
                               SUBDIV.style.background = '#6666ff';
                               SUBDIV.style.visibility = 'visible';
                               SUBDIV.style.zIndex = '2';
                               if(document.addEventListener)
                                 {
                                  SUBDIV.setAttribute('onclick', "_WW.swap(this.id, "+this.name+");");
                                 }
                               var SPN = document.createElement('span');
                                   SPN.className = 'letters';
                                   SPN.setAttribute('id', 'sp'+input.charAt(i)+i)
                                   SPN.appendChild(document.createTextNode(input.charAt(i)));
                              SUBDIV.appendChild(SPN);
                              CNT.appendChild(SUBDIV);
                             } // so now after content is appended:
                           if(document.attachEvent)
                             {
                              for(var i = 0; i < this.gameSet.length; i++)
                                 {
                                  var el = document.getElementById(this.gameSet[i]);
                                      el.setCapture();
                                      el.attachEvent('onclick', function(){ _WW.IEFindId() });
                                      el.childNodes[0].attachEvent('onclick', function(){ _WW.IEFindId() })
                                 }
                             }
    //// etc...
    
    //// specific swap code
      //// preceding code....
                    var IE = false;
                    if(!e)
                      {
                       e = window.event.srcElement.id;
                       IE = true;
                      }
                    var BLNK = document.getElementById(this.blnkId);
                    var BLNKY = parseInt(BLNK.style.top);
                    var BLNKX = parseInt(BLNK.style.left);
                    var IT = document.getElementById(e);
                    var ITY = parseInt(IT.style.top);
                    var ITX = parseInt(IT.style.left);
                    var limit = 40;
                    var i = 0;
                    if((BLNKY - limit == ITY && BLNKX == ITX) || (BLNKX - limit == ITX && BLNKY == ITY) || (BLNKY + limit == ITY && BLNKX == ITX) || (BLNKX + limit == ITX && BLNKY == ITY))
                      {
                       if(IE == true)
                         {
                          IT.setAttribute('style', 'position:absolute;top'+BLNKY+'px;left:'+BLNKX+'px;height:15px;width:15px;padding:10px;border-style:groove;border-width:2px;background:#6666ff;visibility:visible;z-index:2')
                          BLNK.setAttribute('style', 'position:absolute;top'+ITY+'px;left:'+ITX+'px;height:15px;width:15px;padding:10px;border-style:groove;border-width:2px;background:#000033;visibility:visible;z-index:2')
                         }
                       else
                         {
                          IT.style.position = 'absolute';
                          IT.style.top = BLNKY+'px';
                          IT.style.left = BLNKX+'px';
                          IT.style.height = '15px';
                          IT.style.width = '15px';
                          IT.style.padding = '10px';
                          IT.style.borderStyle = 'groove';
                          IT.style.borderWidth = '2px';
                          IT.style.background = '#6666ff';
                          IT.style.visibility = 'visible';
                          IT.style.zIndex = '2';
                 
                          BLNK.style.position = 'absolute';
                          BLNK.style.top = ITY+'px';
                          BLNK.style.left = ITX+'px';
                          BLNK.style.height = '15px';
                          BLNK.style.width = '15px';
                          BLNK.style.padding = '10px';
                          BLNK.style.borderStyle = 'groove';
                          BLNK.style.borderWidth = '2px';
                          BLNK.style.background = '#000033';
                          BLNK.style.visibility = 'visible';
                          BLNK.style.zIndex = '2';
        //// etc.....

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Opera like other DOM compliant browsers supports addEventListener so if that isn't working then you have coded it wrong.

    attachEvent is used by JScript (which is a similar language to Javascript that runs in IE8 and earlier)

    you use setAttribute to atach attributes and event handlers/listeners are not attributes.

    What you are doing wrong is that after testing if the browser supports addEventListener you then proceed to ignore that and try to use some other way to attach the event instead of attaching it correctly using addEventListener.

    Instead of:

    Code:
    if(document.addEventListener)
                                 {
                                  SUBDIV.setAttribute('onclick', "_WW.swap(this.id, "+this.name+");");
                                 }
    You should be using:

    Code:
    if(document.addEventListener)
                                 {
                                  SUBDIV.addEventListener('click',function() {_WW.swap(this.id, "+this.name+");},false);
                                 }

    Your code doesn't work because it is not DOM compliant and is adding an invalid attribute called onclick instead of an event listener/handler.

    If you wanted to add the event handler instead of the event listener you would use
    Code:
    SUBDIV.onclick = function() {_WW.swap(this.id, "+this.name+");
    Last edited by felgall; 09-27-2012 at 03:41 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    anotherJEK (09-30-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    O.k.

    The idea of using set attribute was that the event handler was being added
    before the element is appended to the page, so, perhaps I am wrong, an event
    listener/handler could not be added at this point because the element has not
    been appended at this point.

    I coded it for IE to attachEvent after the element is appended.

    So Opera does have some difference from other DOM browsers, because this
    does work in all versions of FF, Safari, Chrome, and NN (yes I have a test
    version of AOL NN on Windows) that I have to hand.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by anotherJEK View Post
    The idea of using set attribute was that the event handler was being added
    before the element is appended to the page, so, perhaps I am wrong, an event
    listener/handler could not be added at this point because the element has not
    been appended at this point.
    That is not an issue. As you were told, an event handler is not an attribute, therefore there is no obligation on setAttribute to install it; if there were, Opera would.
    The rule is: Never use setAttribute unless direct assignment fails.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Location
    Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
    Posts
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    OK, I won't argue.....

    Here is what I came up to solve in Opera.
    Code:
    /// code
                          if(document.attachEvent)
                             {
                              for(var i = 0; i < this.gameSet.length; i++)
                                 {
                                  var el = document.getElementById(this.gameSet[i]);
                                     // el.setCapture();// Opera complains, Win IE captures anywhere in the page
                                      if(navigator.appName == 'Opera')
                                        {
                                         // Opera stumbles badly, will run as this.IEFindId() but throws errors for every event 
                                         el.attachEvent('onclick', function(){ this.IEFindId() }); 
                                         el.childNodes[0].attachEvent('onclick', function(){ this.IEFindId() })
                                        }
                                      else // obj is an argument passed after instantiation of object
                                        {
                                         el.attachEvent('onclick', function(){ obj.IEFindId() }); 
                                         el.childNodes[0].attachEvent('onclick', function(){ obj.IEFindId() })
                                        }
                                 }
                             }
    // etc.....
    Anyhow, this is working in Opera, now.
    Another fine point I discovered is that when writing a multiline string to Opera, it will run "\n\r" as "\n\n" ( when, for instance, the string is to be
    wrapped in <pre> tags). IE uses "\n\r". All other browsers I have tested in
    will run "\n\r" as "\n"

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Why are you testing for attachEvent first rather than for addEventListener?

    attachEvent is only needed for IE8 and earlier but by testing it first you force IE9 and IE10 to use that rather than the better alternative that they have available.

    With new lines in JavaScript you shouldn't be using \r at all as that is not a part of what javaScript defines as the new line character which is just a single \n by itself. Internet explorer will add the \r that it requires without you needing to specify it and the other browsers don't need the \r at all and so you are just complicating the code by adding it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •