On Sun, Aug 4, 2013 at 6:39 AM, DJ-Tom <eventel...@gmail.com> wrote:
> Hi,
>
> I don't think I know how to actually do what you are suggesting.
>
> Lets say I have three menu options with the following URLS:
>
> "One" - /one/show
> "Two" - /two/show
> "Three" - /three/show
>
> Currently I have somthing like this in my main.html page template:
>
> {% if navi %}
>> {% for entry in navi %}
>> <li class=""><a href="{{ entry.href }}">{{
>> entry.name}}</a></li>
>> {% endfor %}
>> {% endif %}
>>
>
> With the following view function:
>
> def show_mainPage(request):
>>
>> navigation = [ {'href':'/one', 'name':"One"},
>> {'href':'/two', 'name':"Two"},
>> {'href':'/three', 'name':"Three"}]
>> return TemplateResponse(request, 'main_page/main.html', {'navi':
>> navigation, 'main_settings':main_settings.objects.get(id=1)})
>>
>
> So how would I set the "active" CSS class in my template for the correct
> nav entry?
>
> Perhaps I don't understand the nature of the problem. I'm assuming that
the nav entry to be highlighted by default is a function of which page is
being viewed. Further, I presume that you know which page to display
because a GET request was issued (either vanilla or AJAX), and the path
part of the URL (possibly in combination with query parameters, if you have
a truly complex scheme) allows the combination of your urlpatterns and view
functions to know what to render. It follows (to me, at least) that the
information available in the request is enough to know which item should be
highlighted.
If that's correct, then nclude whatever attribute you need to on a navi
entry object that it can be compared with a value derived from the request
(either in your view, in a template tag, or (best) placed in the context by
a template context processor (still has to be a request context to give you
access to the request object)). Use this with an "if" tag to control
adding a class to the "li" element (for instance) which, in common with
simple CSS, highlights it.
There are also schemes with mutually unique classes on your "li" elements,
the same, or related, class as for the one to be highlighted on a
containing element, and a set of CSS rules, one for each highlight-able
menu item, to highlight the "li" if the outer class is an ancestor of the
corresponding "LI"'s class. This is messy, potentially requiring
dynamically generated CSS if your Nav tree changes dynamically. The use
case is where you are pulling new data through AJAX to morph the page into
a new one, so that a new menu item should be highlighted. The JavaScript
need only change the class on the outer element, allowing your to to avoid
having to loop across the nav removing the one highlight class (from the
first approach), or from the one that your JavaScript knows was
highlighted, before applying it to the newly selected "li" (mutually unique
classes are still a help to this JavaScript).
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
For more options, visit https://groups.google.com/groups/opt_out.
