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 2 of 2
  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

    difficulty with style assignment

    I believe this is the first time I have tried this, this way:
    There is an array, tagElements.ids. Each item is set to type object.
    There is an item in each tagElements.ids[index] object: 'over'
    It is supposed to change the background color of the target element.
    I have included the output of an alert dialog. There are no errors and
    nothing happens. These functions are called by tagElements.findId()
    which is the registered event handler.
    So, I don't understand why this is not working. The alert comes up
    as programmed, so I know the system is working as expected to
    that point.
    Being tested in Firefox, 3.5x/Mac OSX or thereabouts.
    The event register code is as follows

    (this added 1/25/3013)
    I solved the problem. For some reason I was not seeing the change in color. It was apparently working
    all along. But I had to assign a more contrasting color to see the rollover. I am not color blind and I can
    usually see the difference between a #009900 (dark green) and #339933 (next lighter shade of green)
    but I was not seeing the change here, nor in another element that was supposed to change from a dark red
    to the next lighter color red. So, lesson learned, make sure the change is drastic enough that you can see it.

    Code:
    var tagElements = new Object();
        tagElements.ids = new Array();
        tagElements.ids[0] = new Object
        tagElements.ids[0].tag = 'start'; // element id attribute value
        tagElements.ids[0].over = function(a){  a.background = '#009900';} //#339933 alert(a.background);
        // returned by alert dialog: rgb(51, 153, 51) none repeat scroll 0% 0%
        tagElements.ids[0].out = function(item){ item.background = '#339933';}
        tagElements.ids[0].click = function(a){  }// alert('click');
        
        tagElements.ids[1] = new Object
        tagElements.ids[1].tag = 'stop'; // element id attribute value
        tagElements.ids[1].over = function(){}
        tagElements.ids[1].out = function(){}
        tagElements.ids[1].click = function(){}
        
        tagElements.ids[2] = new Object
        tagElements.ids[2].tag = 'help'; // element id attribute value
        tagElements.ids[2].over = function(){}
        tagElements.ids[2].out = function(){}
        tagElements.ids[2].click = function(){}
        
        tagElements.ids[3] = new Object
        tagElements.ids[3].tag = 'dif1'; // element id attribute value
        tagElements.ids[3].over = function(){}
        tagElements.ids[3].out = function(){}
        tagElements.ids[3].click = function(){}
        
        tagElements.ids[4] = new Object
        tagElements.ids[4].tag = 'dif2'; // element id attribute value
        tagElements.ids[4].over = function(){}
        tagElements.ids[4].out = function(){}
        tagElements.ids[4].click = function(){}
        
        tagElements.ids[5] = new Object
        tagElements.ids[5].tag = 'dif3'; // element id attribute value
        tagElements.ids[5].over = function(){}
        tagElements.ids[5].out = function(){}
        tagElements.ids[5].click = function(){}
        
        tagElements.ids[6] = new Object
        tagElements.ids[6].tag = 'dif4'; // element id attribute value
        tagElements.ids[6].over = function(){}
        tagElements.ids[6].out = function(){}
        tagElements.ids[6].click = function(){}
        
        tagElements.ids[7] = new Object
        tagElements.ids[7].tag = 'target'; // element id attribute value
        tagElements.ids[7].over = function(){}
        tagElements.ids[7].out = function(){}
        tagElements.ids[7].click = function(){}
        
        tagElements.items = new Array();
        tagElements.registerEvents = function()
                    {
                     //// alert(this.ids.length)
                     for(var i = 0; i < this.ids.length; i++)
                        {
                         this.items[i] = document.getElementById(this.ids[i].tag);
                         ////if(this.items != null) alert(i+": "+this.ids[i].tag);
                         if(document.addEventListener && !document.attachEvent)
                           {
                            this.items[i].addEventListener('mouseover', function(e){ tagElements.findId(e) }, false);
                            this.items[i].addEventListener('mouseout', function(e){ tagElements.findId(e) }, false);
                            this.items[i].addEventListener('click', function(e){ tagElements.findId(e) }, false);
                           }
                         else if(document.attachEvent)
                           {
                            this.items[i].attachEvent('onmouseover', function(e){ tagElements.findId(e) });
                            this.items[i].attachEvent('onmouseout', function(e){ tagElements.findId(e) });
                            this.items[i].attachEvent('onclick', function(e){ tagElements.findId(e) });
                           }
                        }
                    }
                    
        tagElements.findId = function(e)
                    {
                     var evnt = e.target.id
                     var type = e.type;
                     var item = e.target.style;
                     if(!e)
                       {
                        evnt = window.event.srcElement.id;
                        type = window.event.type;
                        item = window.event.srcElement.style;
                       }
                     for(var i = 0; i < this.ids.length; i++)
                        {
                         if(evnt == this.ids[i].tag)
                           {
                            switch(type)
                              {
                               case 'mouseover':
                               this.ids[i].over(item);
                               break;
                               case 'mouseout':
                               this.ids[i].out(item);
                               break;
                               case 'click':
                               this.ids[i].click(item);
                               break;
                              }
                            break;
                           }
                        }
                    }
        
        tagElements.form = '';
        tagElements.setFormSubmit = function()
                    {
                     this.form = document.getElementById('form1');
                     if(document.addEventListener && !document.attachEvent)
                       {
                        this.form.addEventListener('submit', function(){alert('submit'); return false }, false);
                       }
                     else if(document.attachEvent)
                       {
                        this.form.attachEvent('onsubmit', function(){ alert('submit'); return false } );
                       }
                     
                    }
          
        
        tagElements.init = function()
                    {
                     this.setFormSubmit();
                     this.registerEvents();
                    }
    Last edited by anotherJEK; 01-27-2013 at 05:50 AM. Reason: I thought I requested a preview; SOLVED

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Instead of that nightmare, apply single mouseover mouseout event listeners to document. Each handler determines if its event took place on one of the relevant elements or one of its children. If so then change the appropriate attribute.


  •  

    Posting Permissions

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