SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)

    Scot Andrews addEvent function with parameters?

    Hi,

    Here's the page in question,
    http://www.alistairwhyte.com/gallery_2.htm

    I'm trying to get rid of all the inline javascript on these pages,
    So i'm making an array of id's of the images and trying to setup listeners for the popups.

    Here's my script,

    Code JavaScript:
    var images = new Array (
    	'spiralBowl',
    	'beakers',
    	'whiteCups',
    	'blackGold',
    	'cups',
    	'blueLeafBowl',
    	'yellowBowl',
    	'blueLeafVase',
    	'celadon',
    	'greenLeafVase',
    	'marble', 
    	'teapots');
    	var len = images.length;
    	for (var i=0; i<len; i++) {
    		var element = document.getElementById(images[i]+'_thumb');
    		addEvent(element, 'mouseover', show(images[i]), true);
    		addEvent(element, 'mouseout', hide(images[i]), true);
    	}

    In the page, for the top three images I have removed the inline eventListeners for testing the new method.

    If people are unfamiliar with the addEvent function by Scott Andrews here it is,

    Code JavaScript:
    function addEvent(elm, evType, fn, useCapture)
    // cross-browser event handling for IE5+, NS6+ and Mozilla 
    // By Scott Andrew 
    {
      if (elm.addEventListener) { 
        elm.addEventListener(evType, fn, useCapture); 
        return true; 
      } else if (elm.attachEvent) { 
        var r = elm.attachEvent('on' + evType, fn); 
        return r; 
      } else {
        elm['on' + evType] = fn;
      }
    }
    The pristine markup nazi's are on my case


    Any help?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) There are many better addEvent functions around. I recommend Dean Edwards' event manipulation functions.

    2) Why does your code include document.layers references? Do you actually test in NS4.x?

    3) You're passing the result of the show and hide functions to the calls to addEvent(). You need to pass functions. Use anonymous functions for this.

    Code:
            addEvent(element, 'mouseover', function(){show(images[i])}, true);
            addEvent(element, 'mouseout', function(){hide(images[i])}, true);
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Thanks a bunch Kravvitz,

    1)
    Thanks, i'll have a good look at this solution.

    2)
    I didn't actually know why using layers was suggested, so if that's the only reason I suppose I can safely leave that out.

    3)
    Firebug is turning up this error, when mouseover or mouseout occur.. testing in Firefox 2.
    Code:
    document.getElementById(id) has no properties
    show(undefined)dom.js (line 33)
    (no name)()
    It makes me think the value of images[i] isn't getting put into the function..

    Any thoughts?

    The page has been updated
    http://www.alistairwhyte.com/gallery_2.htm


    Thanks,

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right, I forgot to mention that you need to use a closure [1] as well.

    Try this.
    Code:
            function(){
                addEvent(element, 'mouseover', function(){show(images[i])}, true);
                addEvent(element, 'mouseout', function(){hide(images[i])}, true);
            }();
    Also, NS4.x doesn't have a style object, so the code for it wouldn't even work. I might simplify those two functions to this:
    Code:
    if(!document.getElementById && document.all) { //IE4 support
      document.getElementById = function(id) { return document.all[id]; }
    }
    function show(id) {
      if(!document.getElementById) return;
      var el = document.getElementById(id);
      if(el) el.style.visibility = 'visible';
    }
    function hide(id) {
      if(!document.getElementById) return;
      var el = document.getElementById(id);
      if(el) el.style.visibility = 'hidden';
    }
    P.S. It's a good thing you PMed me. I didn't receive a topic reply notification email.

    [1] They're explained here: why does setting an onclick event trigger it?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, you're losing me with the closure stuff

    Is this what you had in mind?

    Code JavaScript:
    function init() {
    	var images = new Array (
    	'spiralBowl',
    	'beakers',
    	'whiteCups',
    	'blackGold',
    	'cups',
    	'blueLeafBowl',
    	'yellowBowl',
    	'blueLeafVase',
    	'celadon',
    	'greenLeafVase',
    	'marble', 
    	'teapots');
    	var len = images.length;
    	for (var i=0; i<len; i++) {
    		var element = document.getElementById(images[i]+'_thumb');
    		function(){
    			addEvent(element, 'mouseover', function(){show(images[i])}, true);
    			addEvent(element, 'mouseout', function(){hide(images[i])}, true);
    		}();
    	}
    }

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's what I said. I forgot that you have to name the function when you're not passing it as an argument.

    Try this.
    Code:
            var tempFn = function(){
                addEvent(element, 'mouseover', function(){show(images[i])}, true);
                addEvent(element, 'mouseout', function(){hide(images[i])}, true);
            }();
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Nope that doesn't do anything

    http://www.alistairwhyte.com/gallery_2.htm

    If I add a call to that function it makes the first one work?

    Code JavaScript:
    for (var i=0; i<len; i++) {
    	var element = document.getElementById(images[i]+'_thumb');
    	var tempFn = function(){
                addEvent(element, 'mouseover', function(){show(images[i])}, true);
                addEvent(element, 'mouseout', function(){hide(images[i])}, true);
            }();
    	tempFn();
    }

    Am I showing how little I know javascript or is this tricky?

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use a <ul> for the thumbnails.

    Try this.
    Code:
        var element = document.getElementById(images[i]+'_thumb');
        function tempFn(id){
          addEvent(element, 'mouseover', function(){show(id)}, true);
          addEvent(element, 'mouseout', function(){hide(id)}, true);
        }
        tempFn(images[i]);
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Yep, that one looked like it would work and did.

    Thanks for all the help with this one, I may even mark it up as a list.


Bookmarks

Posting Permissions

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