well, that is a snippet that needs to be adjusted to the menu classes in
your layout ....
the point more or less is: you have a "menu" that has no children....
changing the highlight on the clicked one leaves you nowhere, cause once a
link has been clicked you jump to the other page, so the second snippet is
the only one where the functionality actually works (i.e. applying a
different style on the page the user is in).
To do that, you must assign the class looking at where the page "stands",
that is location.pathname.
jQuery has a nice selector syntax where anything that is prefixed with $
means "that ends with this string".
So, assuming you are using the scaffolding app from trunk .....
<script>
jQuery(function() {
var path = location.pathname.substring(1);
if ( path ) jQuery('ul.nav a[href$="'+path+'"]').closest('li').addClass(
'highlight');
})
</script>
works
The broken-down functionality is:
- path is the current url
- please, find all A elements within the <ul class="nav"> ( *jQuery(ul.nav
a)*)
- filter this set searching for the ones that have an href ending with the
current location (i.e. the url of the page) *[href=$whatever]*
- go up in the DOM until you find a li (*closest(li)*)
- add a hihglight class (*addclass(highlight)*)
On Tuesday, May 7, 2013 6:24:19 PM UTC+2, Omi Chiba wrote:
>
> Niphlod , thank you for the reply!
>
> Can you provide me actual code workis on new app?
> I'm not sure where I should put the javascript and what value should I
> specify for 'all a in the menu'.
>
> On Tuesday, May 7, 2013 11:05:27 AM UTC-5, Niphlod wrote:
>>
>> javascript ......
>>
>> something like
>>
>> $('all a in the menu').click(function(e) {
>> $('all a in the menu').removeClass('highlighted');
>> $(this).addClass('highlighted');
>> })
>>
>> should work .
>>
>> You can even generalize it to highlight the current page url
>> automatically.
>>
>> var path = location.pathname.substring(1);
>> if ( path ) $('all a in menu[href$="' + path + '"]').closest('li').
>> addClass('highlight');
>>
>>
>>
>> Il giorno martedì 7 maggio 2013 17:56:10 UTC+2, Omi Chiba ha scritto:
>>
>>> I have a following response.menu in my menu.py. By default Home is
>>> highlighted but I want to highlight the menu clicked by the user. For
>>> example, when user click contact, 'highlighted' class should be added to
>>> contact and removed from home.
>>>
>>> response.menu = [
>>> (SPAN('Home', _class='highlighted'), False, URL('default', 'index'),
>>> []),
>>> (T('Order Status'), False, URL('default', 'orderstatus'), []),
>>> (T('Q&A'), False, URL('default', 'qa'), []),
>>> (T('Contact'), False, URL('default', 'contact'), [])
>>> ]
>>>
>>
--
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
