Solved

Looking for an equivalent to "parentElement" in Mozilla?

Posted on 2004-09-08
12
673 Views
Last Modified: 2010-05-18
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
Comment
Question by:ziffgone
  • 3
  • 3
  • 2
  • +3
12 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12012953
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
 
LVL 15

Expert Comment

by:Thogek
ID: 12013493
Silly question:
What is "lnk"?
    if((isElemA.tagName == "A") && (!lnk)){
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12013511
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
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
ID: 12017350
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
 
LVL 14

Author Comment

by:ziffgone
ID: 12036167
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
 
LVL 3

Expert Comment

by:hemebond
ID: 12149306
<!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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Author Comment

by:ziffgone
ID: 12459379
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
 
LVL 3

Expert Comment

by:hemebond
ID: 12460402
Probably because you're using Internet Explorer. In which case you have to access events differently.
0
 
LVL 19

Expert Comment

by:dakyd
ID: 12465026
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
 
LVL 14

Author Comment

by:ziffgone
ID: 12475637
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
 
LVL 19

Expert Comment

by:dakyd
ID: 12475926
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 12479271
no ziffgone, I don't mind at all, indeed I would be happy to answer any question about that site   :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now