You're a dude, thank you.
I agree that it would be better server-side, but it would involve
hacking the core and I'm against that kind of thing, particularly for
something that is purely to satisfy a designer's poncy preference.
Thanks for your help.
osu
On Sep 29, 11:54 am, Liam Potter <radioactiv...@gmail.com> wrote:
> oh I see, this would be better done with some server side code but this
> is how you could do that.
>
> Similar code, just checking for a class.
>
> $("li a.nav-selected").each(function(){
>
> $(this).parents("ul").parents("li").children("a").addClass("nav-selected");
>
> });
> osu wrote:
> > Hi Liam,
>
> > Thanks, I think I didn't make myself clear enough - rather than
> > occurring when you click the link, I need the class to stay in place
> > whenever a child link (i.e. Link 3a, 3b or 3c) is active. I can see
> > the class is being applied on click, but how would I make the class
> > stay in place? Like this didn't work:
>
> > $("li a").ready(function(){
> > $(this).parents("ul").parents("li").addClass("nav-selected");
> > });
>
> > Thanks,
>
> > osu
>
> > On Sep 29, 11:35 am, Liam Potter <radioactiv...@gmail.com> wrote:
>
> >> It all works fine, except for this bit
> >> $("li ul").siblings("a").click(function(){
> >> return false;
> >> });
> >> there are no a tag siblings of the UL, so that will not work.
>
> >> I've just tested it, and when I click on a subnav link, the class is
> >> added to the LI containing Link 3, if you need it to be added to the a
> >> tag use this
>
> >> $("li a").click(function(){
> >>
> >> $(this).parents("ul").parents("li").children("a").addClass("nav-selected");
>
> >> });
> >> osu wrote:
>
> >>> Hi Liam,
>
> >>> This is the list I'm working with:
>
> >>> <ul>
> >>> <li class="nav-path-selected"><a href="#">Link 1</a></li>
> >>> <li><a href="#">Link 2</a></li>
> >>> <li class="nav-path-selected"><a href="#">Link 3</a>
> >>> <ul>
> >>> <li><a href="#" class="nav-selected">Link 3a</a></li>
> >>> <li><a href="#">Link 3b</a></li>
> >>> <li><a href="#">Link 3c</a></li>
> >>> </ul>
> >>> </li>
> >>> <li><a href="#">Link 4</a></li>
> >>> </ul>
>
> >>> I need to add the class 'nav-selected' to Link 3 so I can highlight it
> >>> using the same CSS as used to style Link 3a (the active link in the
> >>> example above). As you can see, Link 1 has a class of 'nav-path-
> >>> selected', so I need to differentiate between that and Link 3 (hence
> >>> why I want to add a 'nav-selected' class to Link 3)
>
> >>> The JQuery I've added to the footer of my page is:
>
> >>> <script type="text/javascript">
> >>> //<![CDATA[
>
> >>> $(document).ready(function() {
> >>> // Disabledparentlink
> >>> $("li ul").siblings("a").click(function(){
> >>> return false;
> >>> });
> >>> $("li a").click(function(){
> >>>
> >>> $(this).parents("ul").parents("li").addClass("nav-selected");
> >>> });
> >>> });
>
> >>> //]]>
> >>> </script>
>
> >>> But nothing is happening...no JS errors in Firebug either - any ideas?
>
> >>> Thanks for your patience,
>
> >>> osu
>
> >>> On Sep 29, 11:07 am, Liam Potter <radioactiv...@gmail.com> wrote:
>
> >>>> I'm assuming you posted an example list and the real list does contain a
> >>>> tags? I'm also assuming you are running that script with a document
> >>>> ready handler?
>
> >>>> osu wrote:
>
> >>>>> Thanks Liam, but that's not working...
>
> >>>>> Not sure why .click is in your example? Am I right in thinking by
> >>>>> adding .parents to the end of each tag in your example that you're
> >>>>> 'going down' different levels in the unordered list?
>
> >>>>> This is what I have:
>
> >>>>> $("li a").click(function(){
> >>>>> $(this).parents("ul").parents("li").addClass("nav-selected");
> >>>>> });
>
> >>>>> Any ideas what's going wrong?
>
> >>>>> On Sep 29, 10:29 am, Liam Potter <radioactiv...@gmail.com> wrote:
>
> >>>>>> $("li a").click(function(){
> >>>>>> $(this).parents("ul").parents("li").addClass("className");
>
> >>>>>> });
> >>>>>> osu wrote:
>
> >>>>>>> Hi Ryan,
>
> >>>>>>> That only affects the child of theparent.
>
> >>>>>>> What I want to do is this:
>
> >>>>>>> <ul>
> >>>>>>> <li>Link 1</li>
> >>>>>>> <li>Link 2 *This is the link I want to add a class to*
> >>>>>>> <ul>
> >>>>>>> <li>Link 2a</li>
> >>>>>>> <li>Link 2b</li> *This is the active link*
> >>>>>>> <li>Link 2c</li>
> >>>>>>> </ul>
> >>>>>>> </li>
> >>>>>>> <li>Link 3</li>
> >>>>>>> </ul>
>
> >>>>>>> Rather than affecting a descendent/child of theparentlink, I need to
> >>>>>>> work on the *parentlink* under which the active link is found.
>
> >>>>>>> Any ideas?
>
> >>>>>>> Thanks,
>
> >>>>>>> osu
>
> >>>>>>> On Sep 26, 7:48 pm, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
>
> >>>>>>>> $('.nav-selected:first')
>
> >>>>>>>> On Sep 26, 5:36 pm, osu <onesiz...@googlemail.com> wrote:
>
> >>>>>>>>> Can anyone help with this one please?
>
> >>>>>>>>> Thanks,
>
> >>>>>>>>> osu
>
> >>>>>>>>> On Sep 25, 2:03 pm, osu <onesiz...@googlemail.com> wrote:
>
> >>>>>>>>>> Thanks Ryan for the alternative,
>
> >>>>>>>>>> However, I need to do the following now (see message above your
> >>>>>>>>>> last
> >>>>>>>>>> post):
>
> >>>>>>>>>> I need to highlight *only* the top-parentitem (the same one I just
> >>>>>>>>>> ran 'return false;' on) with the class 'nav-selected'.
>
> >>>>>>>>>> Any idea how I could do that?
>
> >>>>>>>>>> Thanks,
>
> >>>>>>>>>> osu
>
> >>>>>>>>>> On Sep 25, 11:13 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
>
> >>>>>>>>>>> rather than removing the href you could use the preventDefault
> >>>>>>>>>>> function, which will leave the href intact should you want to
> >>>>>>>>>>> unbind
> >>>>>>>>>>> it at a later date.
>
> >>>>>>>>>>> usage is something like..
>
> >>>>>>>>>>> $('a.submit-button').click(function(e){
> >>>>>>>>>>> e.preventDefault();
> >>>>>>>>>>> doSubmit( $(this).html() );
>
> >>>>>>>>>>> })
>
> >>>>>>>>>>> On Sep 24, 5:32 pm, osu <onesiz...@googlemail.com> wrote:
>
> >>>>>>>>>>>> Thanks Andi,
>
> >>>>>>>>>>>> Yes, I meant an unordered list as you showed.
>
> >>>>>>>>>>>> Rather than remove the <a> tag, is it possible to just
> >>>>>>>>>>>> 'deactivate'
> >>>>>>>>>>>> it? i.e. when you click it, nothing happens, but the <a> tag
> >>>>>>>>>>>> stays in
> >>>>>>>>>>>> place?
>
> >>>>>>>>>>>> I ask, because I'd like to keep the CSS as simple as possible.
>
> >>>>>>>>>>>> Thanks,
>
> >>>>>>>>>>>> osu
>
> >>>>>>>>>>>> On Sep 24, 6:05 pm, Andi23 <dowhatyouw...@gmail.com> wrote:
>
> >>>>>>>>>>>>> First of all, let's clarify the actual HTML. I assume this is
> >>>>>>>>>>>>> what
> >>>>>>>>>>>>> you have:
> >>>>>>>>>>>>> <ul>
> >>>>>>>>>>>>> <li><a href="#">Link 1</a></li>
> >>>>>>>>>>>>> <li><a href="#">Link 2</a></li>
> >>>>>>>>>>>>> <li><a href="#">Link 3</a>
> >>>>>>>>>>>>> <ul>
> >>>>>>>>>>>>> <li><a href="#">Link 3a</a></li>
> >>>>>>>>>>>>> <li><a href="#">Link 3b</a></li>
> >>>>>>>>>>>>> <li><a href="#">Link 3c</a></li>
> >>>>>>>>>>>>> </ul>
> >>>>>>>>>>>>> </li>
> >>>>>>>>>>>>> <li><a href="#">Link 4</a></li>
> >>>>>>>>>>>>> </ul>
>
> >>>>>>>>>>>>> When you say "remove the link", I assume you want to turn this:
> >>>>>>>>>>>>> <li><a href="#">Link 3</a>
> >>>>>>>>>>>>> into this:
> >>>>>>>>>>>>> <li>Link 3
>
> >>>>>>>>>>>>> Given that, try this jQuery:
> >>>>>>>>>>>>> $("li ul").siblings("a").each(function(){
> >>>>>>>>>>>>> $(this).replaceWith($(this).html());
>
> >>>>>>>>>>>>> });
