[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 682
  • Last Modified:

Looking for an equivalent to "parentElement" in Mozilla?

Hello all,

I have a situaion where I want to retrieve the "href" attribute of any "A" element on the page with the "onmouseover" event: <a href=" >>> http://blahblah.com <<< ">Blah.com</a>

Now here's the thing, I have a script that checks the Source Element on mouseover, if it's an "A" link, then it alerts the Href value. Problem is, I want it to do so even if the actual link text is several elements within the Href.

Example:
<a href="http://blahblah.com">Link</a>  == source element "A".
<a href="http://blahblah.com"><font color="blue"><i><b>Link</b></i></font></a> == source element "b".

Now, I devised a script that will loop through all of the elements until it finds the "A" element, but, it does not work in Mozilla. Darn. I use "parentElement" to do so. Is there an equivalent in Mozilla? I tried "parentNode", but this returns the top element, "body".

Here's the script I use:

function findA(isElemA){
    while(isElemA.parentElement){
        if((isElemA.tagName == "A") && (!lnk)){
           alert('Your "A" Element Href is'+isElemA.href);
        }
        else{
           isElemA = isElemA.parentElement;
           findA(isElemA);
        }
    }
}    
function isLink(event) {
   var evt = event ? event : window.event;
       if(evt.target){
          var myEvt = evt.target;
          findA(myEvt);
       }
       else if(evt.srcElement){
          var myEvt = evt.srcElement;
          findA(myEvt);
       }
    return null;
}
document.onmouseover = isLink;

Any help will be much appreciated.

Thanks...
0
ziffgone
Asked:
ziffgone
  • 3
  • 3
  • 2
  • +3
1 Solution
 
ZylochCommented:
Hey, ziff :)

I think this is because parentNode is the next one up a LEVEL, per say, but parentElement is the next tag above, or something like that, I'm not too sure, but I recommend an up to down search with Mozilla:

function findA(start) {
   var children=start.childNodes;
   for (var i=0;i<children.length;i++) {
      if ((children[i].tagName=="A")&&(!lnk)) {
         alert('Your "A" Element href is'+children[i].href);
      } else {
         if (children[i].childNodes.length>0) {
            findA(children[i]);
         }
      }
   }
}


Then start calling it with findA(document.body);
0
 
ThogekCommented:
Silly question:
What is "lnk"?
    if((isElemA.tagName == "A") && (!lnk)){
0
 
ThogekCommented:
Can you verify what the original moused-over source element (gained from the event object) is, by way of something like:

    function findA(isElemA){
        alert(isElemA.tagName);
        ...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dakydCommented:
Hey ziffgone, we meet again.  =p  It looks like you've got a recursive call inside of a while loop - you're doing extra iterations for sure.  I took out the recursive call, and it seemed to work okay in both IE & Mozilla.  I set lnk to false by default to try to narrow down the problem - maybe that could be the problem.  Is that what you wanted, or am I missing something?  Either way, hope that helps.

<html>
<head>
<script type="text/javascript">
lnk = false;

function findA(isElemA){
    while(isElemA.parentNode){
        if((isElemA.tagName == "A") && (!lnk)){
           alert('Your "a" Element Href is'+isElemA.href);
           return;
        }
        else {
           isElemA = isElemA.parentNode;
        }
    }
}    
function isLink(event) {
   var evt = event ? event : window.event;
       if(evt.target){
          var myEvt = evt.target;
          findA(myEvt);
       }
       else if(evt.srcElement){
          var myEvt = evt.srcElement;
          findA(myEvt);
       }
    return null;
}
document.onmouseover = isLink;
</script>
</head>

<body>
<a href="http://blahblah_A.com">Link</a>
<a href="http://blahblah_B.com"><font color="blue"><i><b>Link</b></i></font></a>
</body>
</html>
0
 
ziffgoneAuthor Commented:
Hiya fellas, I'm going to have to suspend this question for a little while. My computer crashed something terrible, can't even access the hard drive to reformat. Aaaaaaaaaaaaargh!!!!!!!!!!

I'll have to get back to you when I can test again, currently I'm at a coin op computer kiosk and have no way to test. Wish me luck.

Regards....
0
 
hemebondCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>Show Href</title>
      </head>
      <body>
            <p>
                  <a href="link_1">link_1_text</a>
                  <a href="link_2">link_2_text</a>
            </p>
      </body>
      <script type="text/javascript">
            var all_links = document.getElementsByTagName("a");
            for(var i = 0; i < all_links.length; i++)
            {
                  all_links[i].addEventListener("mouseover",show_href,true);
            }

            function show_href(e)
            {
                  alert(e.currentTarget.getAttribute("href"));
            }
      </script>
</html>
0
 
ziffgoneAuthor Commented:
Thank you Dakyd, works like a charm.

hemebond, I kept getting an "Object doesn't support this Property or Method error" with your solution, any ideas why?

Hey Dakyd, some time ago I was browsing around and stumbled across a post of yours where you posted a link to your personal site. I was blown away by it! I wanted to show somebody else your work but lost the link with my crash, could you re-post it?

Thanks kindly.

Regards...
0
 
hemebondCommented:
Probably because you're using Internet Explorer. In which case you have to access events differently.
0
 
dakydCommented:
Wow, first time anyone's complimented that site.  There's really not that much there, and I think I may have pared it down a bit since you last saw it.  Either way, here you go:
http://www.freewebs.com/dakyd/index.html

Glad to hear you got what you wanted, and thanks for the points.
0
 
ziffgoneAuthor Commented:
Hi Dakyd,

I must apologize profusely. With a little more searching, I found that it was not your site that was the one I was referring to, but instead it was the personal site of davidlars99. Whups.

Although I do like your site, very clean an simple layout, it is David's that had me in awe. Quite frankly it should be posted as some kind of staple for which javascript can achieve.

Here is davidlars99's personal site:
http://www.frozendev.com/

Hope he doesn't mind me showing it.

I'm very sorry about the confusion Dakyd, hope you don't mind.

Kind Regards,
Perry.
0
 
dakydCommented:
Haha, nah ... don't mind at all.  Like I said, I was surprised it "blew you away", I really haven't put anything on my site that's THAT nice.  Cheers.
0
 
davidlars99Commented:
no ziffgone, I don't mind at all, indeed I would be happy to answer any question about that site   :)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 3
  • 3
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now