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 8 of 8
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts

    replacing inline event handlers

    I'm trying to replace some inline event handlers in some code I wrote...

    So I wrote a function that attaches the events in an external JS file...this has worked for me before, but this time, I've noticed that the variable "num" in my JS always evaluates to "8"....I'd tried passing "num" as a parameter in my anonymous functions, but that just caused "num" to evaluate to something like "[event object]" (if memory serves me)...

    I need "num" to evaluate as a number between 1-8, inside my anonymous functions, depending on the iteration of the for loop...here is the code and thanks for any help:

    The markup:

    PHP Code:
        <div id="menu">
            <img id="logo" src="name_image.jpg" alt="" />
            <h2 style="top:92px" id="cat1" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=1">********</a></h2>
            <h2 style="top:116px" id="cat2" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=2">********</a></h2>
            <h2 style="top:140px" id="cat3" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=3">********</a></h2>
            <h2 style="top:164px" id="cat4" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=4">********</a></h2>
            <h2 style="top:188px" id="cat5" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=5">********</a></h2>
            <h2 style="top:212px" id="cat6" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=6">********</a></h2>
            <h2 style="top:236px" id="cat7" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=7">********</a></h2>
            <h2 style="top:260px" id="cat8" class="fade1"><a href="<? echo $_SERVER['PHP_SELF']; ?>?div=11">********</a></h2>
        </div>
    And the JS:
    Code:
    function configMenuLinks()
    {
        var menuDiv = document.getElementById('menu');
        var menuLinks = menuDiv.getElementsByTagName("a");
        var num = 0;
        
        for (i=0; i<menuLinks.length; i++)
        {
            num = i + 1;
            menuLinks[i].onclick = function()
            {
                if (num == menuLinks.length)
                    showTransDivs('div11');
                else
                    showTransDivs('div'+num);
                return false;
            }
            menuLinks[i].onmouseover = function()
            {
                alert('cat'+num);
                linkFade('cat'+num,1);
            }
            menuLinks[i].onmouseout = function()
            {
                linkFade('cat'+num,2);
            }
        }
    }
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    Code:
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    //          the     function   event(NO 'on')
    // the funtion  'this' is the object and parameter 0 the event
    //zxcAddEvt(object,'zxcMseUp','mouseup');
    // e.g.
    //function zxcMseUp(zxcevt){
    // this.tagName is the object
    // zxceven is mouseup
    //}
    
    // + the event type call cannot be duplicated for the object
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    VW, no offense, but you need to work on creating more comprehensive object and variable names...Especially if you're not including any kind of helpful comments or instructions with your code...I'm not going to even bother trying to understand the code or see how I could apply it to my problem, because of the extra effort (and some level of ESP) it would take to do that.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Other ideas:

    Use a RegExp to get the number from the end of "this.href".

    Or traverse up the parent chain to the H2 and get the number from its ID.

    It looks like you have some DIVs named 'div1', 'div2', etc. And I assume these correspond to 'cat1', 'cat2', etc. So let the divs have IDs like 'divcat1' etc. Then ...

    showTransDivs('div' + this.parentNode.id)


  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    'num' is always 8 because that was its value at the completion of the 'for' loop. The event listeners are called "later" - so at that time num == 8.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    VW, no offense, but yo
    no offece taken.

    I will put you on my ignore list so I dont wast any more time on you
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Vic, rather than taking offense (despite claiming otherwise), why not try to consider whether the guy has a valid point?
    Tbh, I too have felt that your in-script naming policy makes the scripts seem more obtuse, complex and intimidating than they are.

    If the purpose of storing and publishing your scripts is to communicate them to others, then you undermine that and do yourself a disservice by presenting them in such a seemingly 'obfuscated' way.


    You also do yourself no favours by choosing to ignore those offering constructive criticism.
    Last edited by Bill Posters; 02-16-2007 at 08:51 PM.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Relax VW, it's just constructive criticism....what good is offering help if you don;t explain your code, or write it in a manner that other coders can't understand and read it?

    Here is the answer, Mike was on the right track:

    Code:
    function assignMenuEvents(num,obj,numLinks)
    {
        obj.onclick = function()
        {
            if (num == numLinks)
                showTransDivs('div11');
            else
                showTransDivs('div'+num);
            return false;
        }
        obj.onmouseover = function()
        {
            linkFade('cat'+num,1);
        }
        obj.onmouseout = function()
        {
            linkFade('cat'+num,2);
        }
    }
    
    function configMenuLinks()
    {
        var menuDiv = document.getElementById('menu');
        var menuLinks = menuDiv.getElementsByTagName("a");
        var num = 0; 
        
        for (i=0; i<menuLinks.length; i++)
        {
            num = i + 1;
            assignMenuEvents(num,menuLinks[i],menuLinks.length);
        }
    }
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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