uhm. nope. you have to remove the _class="highlighted" alltogether from the
Home.
Unless you need to highlight "Home" while you're in an hypotetical "menu3".
Is that the case ?
On Wednesday, May 8, 2013 11:07:52 PM UTC+2, Omi Chiba wrote:
>
>
>
> It's almost there!! Your code works perfect but I want to highlight the
> Home by default. When I do, the highlight on home won't removed when I
> click menu1 or menu2.
>
> I user your span approach so this is my response.menu
>
> response.menu = [
> (SPAN('Home', _class='highlighted'), False, URL('default', 'index'),
> []),
> (SPAN('Menu1'), False, URL('default', 'menu1'), []),
> (SPAN('Menu2'), False, URL('default', 'menu2'), [])
> ]
>
>
> and this is the javascript. No change for CSS.
>
> <script>
> jQuery(function() {
> var path = location.pathname.substring(1);
> if ( path ) jQuery('ul.nav
> a[href$="'+path+'"]').find('span').addClass('highlighted');
> })
> </script>
>
>
>
>
> On Wednesday, May 8, 2013 1:50:37 PM UTC-5, Niphlod wrote:
>>
>> it's working as intended!!!
>>
>> <li class="web2py-menu-last highlight"><a
>> href="/highlight/default/menu2">Menu2</a></li>
>>
>> is what it becomes when you access the menu2 link.
>>
>> You just need to play with the css now...
>>
>> By default the "home" link is constructed with a
>> SPAN('Home', _class='highlighted')
>> that is inside the A link.
>> if you don't want to play with the css you should build your A with the
>> same logic
>> response.menu = [
>> (SPAN('Home'), False, URL('default', 'index'), []),
>> (SPAN('Menu1'), False, URL('default', 'menu1'), []),
>> (SPAN('Menu2'), False, URL('default', 'menu2'), [])
>> ]
>>
>> and then modify the javascript snippet a bit
>> var path = location.pathname.substring(1);
>> if ( path ) jQuery('ul.nav
>> a[href$="'+path+'"]').find('span').addClass('highlighted');
>>
>> the logic step-by-step is more or less the same as before but
>> find('span') now searches within the A instead of going on level up
>> the class added is "highlighted" and not "highlight"
>>
>> if instead you don't want to use SPAN inside the menu elements, retain
>> the previous javascript snippet and add this css rule
>>
>> ul.nav li.highlight a {
>> color: #D8D800;
>> }
>>
>> of course you should at least turn the first element of the menu to match
>> the others, so
>>
>>
>> response.menu = [
>> (T('Home'), False, URL('default', 'index'), []),
>> (T('Menu1'), False, URL('default', 'menu1'), []),
>> (T('Menu2'), False, URL('default', 'menu2'), [])
>> ]
>>
>>
>> would be needed.
>>
>> On Tuesday, May 7, 2013 11:41:48 PM UTC+2, Omi Chiba wrote:
>>>
>>> I created new app called highlight. Can you take a look?
>>>
>>> 1. Added your javascript code right before </head> tag
>>> 2. Modifiled response.menu in menu.py
>>>
>>> response.menu = [
>>> (SPAN('Home', _class='highlighted'), False, URL('default', 'index'),
>>> []),
>>> (T('Menu1'), False, URL('default', 'menu1'), []),
>>> (T('Menu2'), False, URL('default', 'menu2'), [])
>>> ]
>>>
>>> 3. created empty control and view for menu1 and menu2.
>>>
>>>
>>> On Tuesday, May 7, 2013 3:07:49 PM UTC-5, Niphlod wrote:
>>>>
>>>> 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 web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
