Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19431

Re: javascript to test if anchor tag is contained within div tag

Show all headers | View raw

On Monday, April 22, 2013 10:15:13 AM UTC-5, CharlesEF wrote:
> Hi All.
> 
> 
> 
> I need help with javascript.  Here is sample HTML code.
> 
> 
> 
> <ul>
> 
>     <li><a href="" target="" onclick="">Item1</a></li>
> 
>     <li><a href="javascript:toggleDiv('bony');">Item2</a></li>
> 
>     <div id="bony" class="hide">
> 
>         <li><a href="" target="" onclick="">Item2-Sub1</a></li>
> 
>         <li><a href="" target="" onclick="">Item2-Sub2</a></li>
> 
>         <li><a href="" target="" onclick="">Item2-Sub3</a></li>
> 
>     </div>
> 
>     <li><a href="" target="" onclick="">Item3</a></li>
> 
> </ul>
> 
> 
> 
> The menu uses CSS but because I use framesets I had to use javascript to do some things, like select the menu item clicked on.  When the page loads Item2-Sub's are hidden.
> 
> 
> 
> I use this javascript to select the correct menu entry when the page loads. This is only done once, when a page is first loaded.
> 
> 
> 
> var a_tags = document.getElementsByTagName("a");
> 
> for(var i=0, max=a_tags.length; i < max; i++)
> 
> {
> 
>     if(unescape(a_tags[i].href) == menuitem)
> 
>     {
> 
>         a_tags[i].className = "selected";
> 
>         break;
> 
>     }
> 
> }
> 
> 
> 
> This works correctly but the problem is that if a Item2-Sub page is loaded then I need to show/expand the div 'bony'. The sample HTML menu could expand to include more hidden div's latter on.  I wanted to keep it simple for this post.
> 
> 
> 
> So, how can I tell if the anchor tag is contained within a div tag and if so then return the id of the div?
> 
> 
> 
> Thanks for any help,
> 
> 
> 
> Charles

Hi All.

I case someone else needs answer, here is the solution I came up with.  Here is the updated HTML code (per W3.org guidelines):

<ul>
 <li><a href="" target="main" onclick="">Item1</a></li>
 <li id="1"><a href="javascript:toggleUl('sony');">Item2</a>
  <ul id="sony" class="hide">
   <li id="1.1"><a href="" target="main" onclick="">Item2-Sub1</a></li>
   <li id="1.2"><a href="" target="main" onclick="">Item2-Sub2</a></li>
   <li id="1.3"><a href="" target="main" onclick="">Item2-Sub3</a></li>
  </ul>
 </li>
 <li><a href="" target="main" onclick="">Item3</a></li>
</ul>

Instead of walking the DOM to find what I needed I took a different approach. I assigned an id value to the parent LI. I also assigned an id to each child LI using the 1.1, 1.2, 1.3 format, meaning they are children of parent id 1.

Below is the javascript code used to walk all A tags and compare href's to tell which menu item to select.

var a_tags = document.getElementsByTagName("a");
for(var i=0, max=a_tags.length; i < max; i++)
{
 if(unescape(a_tags[i].href) == unescape(parent.frames['main'].location.href))
 {
  a_tags[i].className = "selected";
  break;
 }
}

Below is the code I used to show/expand a hidden sub-menu.

var li = a_tags[i].parentNode.id;
if(li.indexOf("."))
{
 document.getElementById(parseInt(li, 10)).childNodes[0].click();
}

So far I have only tested this code on IE 10 and Firefox v20.0.1 but I see no reason it should not work on other browsers.


Thanks for the pointers,

Charles

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

javascript to test if anchor tag is contained within div tag charles.e.finkenbiner@gmail.com - 2013-04-22 08:15 -0700
  Re: javascript to test if anchor tag is contained within div tag Danny <dann90038@gmail.com> - 2013-04-22 13:18 -0700
  Re: javascript to test if anchor tag is contained within div tag Danny <dann90038@gmail.com> - 2013-04-22 13:22 -0700
    Re: javascript to test if anchor tag is contained within div tag charles.e.finkenbiner@gmail.com - 2013-04-22 17:34 -0700
      Re: javascript to test if anchor tag is contained within div tag charles.e.finkenbiner@gmail.com - 2013-04-22 20:31 -0700
        Re: javascript to test if anchor tag is contained within div tag Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-04-23 10:07 +0200
  Re: javascript to test if anchor tag is contained within div tag Danny <dann90038@gmail.com> - 2013-04-23 11:50 -0700
  Re: javascript to test if anchor tag is contained within div tag CharlesEF <charles.e.finkenbiner@gmail.com> - 2013-04-24 01:51 -0700
    Re: javascript to test if anchor tag is contained within div tag Martin Leese <please@see.Web.for.e-mail.INVALID> - 2013-04-24 12:42 -0600
      Re: javascript to test if anchor tag is contained within div tag CharlesEF <charles.e.finkenbiner@gmail.com> - 2013-04-24 14:40 -0700

csiph-web