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

Groups > comp.lang.javascript > #19406 > unrolled thread

javascript to test if anchor tag is contained within div tag

Back to article view | Back to comp.lang.javascript

Contents

  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

#19406 — javascript to test if anchor tag is contained within div tag

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

[toc] | [next] | [standalone]

#19410

To Charles

use .parentNode.tagName and .parentNode.id, check -> http://www.webdevout.net/test?02B&raw

[toc] | [prev] | [next] | [standalone]

#19411

To Charles

Also keep in mind that 

<!ELEMENT UL - - (LI)+                 -- unordered list -->

UL/OL's only take LI's, not Div's, any div will need to be a child of an LI

[toc] | [prev] | [next] | [standalone]

#19413

On Monday, April 22, 2013 3:22:21 PM UTC-5, Danny wrote:
> To Charles
> 
> 
> 
> Also keep in mind that 
> 
> 
> 
> <!ELEMENT UL - - (LI)+                 -- unordered list -->
> 
> 
> 
> UL/OL's only take LI's, not Div's, any div will need to be a child of an LI

To Danny,

Thanks for the link, I will check it out.  As for a DIV needing to be a child of an LI, I don't understand.  In my above HTML sample isn't the DIV a child of the Item2 LI?

Thanks for your help,

Charles

[toc] | [prev] | [next] | [standalone]

#19414

On Monday, April 22, 2013 7:34:00 PM UTC-5, charles.e....@gmail.com wrote:
> On Monday, April 22, 2013 3:22:21 PM UTC-5, Danny wrote:
> 
> > To Charles
> 
> > 
> 
> > 
> 
> > 
> 
> > Also keep in mind that 
> 
> > 
> 
> > 
> 
> > 
> 
> > <!ELEMENT UL - - (LI)+                 -- unordered list -->
> 
> > 
> 
> > 
> 
> > 
> 
> > UL/OL's only take LI's, not Div's, any div will need to be a child of an LI
> 
> 
> 
> To Danny,
> 
> 
> 
> Thanks for the link, I will check it out.  As for a DIV needing to be a child of an LI, I don't understand.  In my above HTML sample isn't the DIV a child of the Item2 LI?
> 
> 
> 
> Thanks for your help,
> 
> 
> 
> Charles
Hi All,

Well, what sounded easy is turning into a pain for me.  I have very basic HTML and javascript skills so please bear with me.

Based on my sample HTML code above anchor.parentNode.tagName only returns the element LI.  Also, since I am only looping the anchors I never seem to reach any DIV tag.

To Danny, I looked at your sample page but the problem for me is that the Item2-Sub# could be 3 levels deep or more in the future.  Your sample only seems to look up 1 level.

As an example:
I double click on Item2-Sub3 page.  This loads the browser with that page loaded in my display frame.  The menu frame is loaded with the correct menu item selected BUT it is hidden.  I have to click on Item2 to show/expand the 3 sub-levels.  When I show/expand Item2 the correct Item2-Sub3 menu item is selected, as it should.  Using anchor.parentNode.tagName at this point only returns the LI element.

So, does this mean I am not coding the HTML or javascript correctly?  Maybe a little example will help me.


Thanks for any help,

Charles

[toc] | [prev] | [next] | [standalone]

#19415

charles.e.finkenbiner@gmail.com wrote:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Please get a real name.

> Well, what sounded easy is turning into a pain for me.  I have very basic
> HTML and javascript skills so please bear with me.
> 
> Based on my sample HTML code above anchor.parentNode.tagName only returns
> the element LI.  Also, since I am only looping the anchors I never seem to
> reach any DIV tag.

/Element/, _not_ tag.   In a document, elements are nested, they have 
attributes and content (which may be text or other elements).  That is what 
forms a document *tree* structure.  *Every* node that is not at the root 
level has a parent element node – like a leaf has a twig, a twig has a 
branch, a branch has a trunk, and a trunk has a root it sits on.  You can 
retrieve a reference to an element node's parent (element) node by using the 
“parentNode” property (whose value is “null” at the root level).

So, in real life, what do you do when you want to get from the leaf to the 
branch its twig sits on?  What do you do when you are sitting on a twig and 
want to get from the twig to the trunk, or to the root?

And not all elements can be nested in all other ones.  The “div” element 
cannot be nested *directly* in a “ul” element, that is, as its /child/ 
element.  The child elements of “ul” elements must be “li” elements.  So 
before you go any further, you must fix your markup.  You must decide on 
HTML code that suits your purpose *and* is Valid: <http://validator.w3.org/>

> To Danny,

This is NetNews, not private e-mail.  Skip the “to $Person” thing unless you 
really only want answers from $Person.  Do not follow Danny's bad example.

> […]
> So, does this mean I am not coding the HTML or javascript correctly? 

It means that you are programming and posting without thought, and you are 
listening to people who do not really have a clue.  So the outcome is 
necessarily rarely positive.  You need to understand the underlying theory, 
the concepts, first, and you need to structure your thinking, considering 
carefully the current situation, the target, and *how* you could get to the 
target.  Just dabbling around will _not_ get you there.

BTW, there is no javascript: <http://PointedEars.de/es-matrix>.

> Maybe a little example will help me.

Maybe not.  What good is an example, what good is an explanation, that you 
do not understand because you are lacking the minimum clue?

Maybe reading the FAQ, and the references to documentation; following those 
references, and *reading* the documentation, *before* posting, will help 
you.  After all, that is why we put it there.  So why do you not use it?

<http://jibbering.com/faq/>
<http://PointedEars.de/faq>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#19428

to CharlesEF

Well, those collapsible menus are usually done on the expand-first then click, so, once the item is clicked, is the selected one or it can be done all in the same click, load the page and make it selected, one function.

What you're describing is, you click on a menu item and a submenu content loads, without any expansion of the submenu, I'd think it may be your markup, yes, the way you're structuring the menus and submenus.

[toc] | [prev] | [next] | [standalone]

#19431

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

[toc] | [prev] | [next] | [standalone]

#19437

CharlesEF wrote:
> 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>

Note that these id's are invalid in HTML 4.01.
The standard states:
    "ID and NAME tokens must begin with a
     letter ([A-Za-z]) and may be followed by
     any number of letters, digits ([0-9]),
     hyphens ("-"), underscores ("_"),
     colons (":"), and periods (".")."

In HTML 5:
    "The id global attribute is now allowed
     to have any value, as long as it is
     unique, is not the empty string, and
     does not contain space characters."

So, make sure you are using the appropriate
doctype.

-- 
Regards,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[toc] | [prev] | [next] | [standalone]

#19447

On Wednesday, April 24, 2013 1:42:08 PM UTC-5, Martin Leese wrote:
> CharlesEF wrote:
> 
> > 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>
> 
> 
> 
> Note that these id's are invalid in HTML 4.01.
> 
> The standard states:
> 
>     "ID and NAME tokens must begin with a
> 
>      letter ([A-Za-z]) and may be followed by
> 
>      any number of letters, digits ([0-9]),
> 
>      hyphens ("-"), underscores ("_"),
> 
>      colons (":"), and periods (".")."
> 
> 
> 
> In HTML 5:
> 
>     "The id global attribute is now allowed
> 
>      to have any value, as long as it is
> 
>      unique, is not the empty string, and
> 
>      does not contain space characters."
> 
> 
> 
> So, make sure you are using the appropriate
> 
> doctype.
> 
> 
> 
> -- 
> 
> Regards,
> 
> Martin Leese
> 
> E-mail: please@see.Web.for.e-mail.INVALID
> 
> Web: http://members.tripod.com/martin_leese/

Hi,

Yes, I am using HTML5 doctype, which according to W3.org is <!DOCTYPE HTML>


Thanks,

Charles

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web