librelist archives

Re: Styling the current navigation element?

From:

Michael Fogleman

Date:

2011-07-29 @ 21:14

Here's what I came up with, but still curious if there's a better way:

{% macro nav_link(endpoint, name) %}
    {%- if url_for(endpoint) == request.script_root + request.path -%}
        <a class="active" href="{{ url_for(endpoint) }}">{{ name }}</a>
    {%- else -%}
        <a href="{{ url_for(endpoint) }}">{{ name }}</a>
    {%- endif -%}
{% endmacro %}

On Fri, Jul 29, 2011 at 4:52 PM, Michael Fogleman <fogleman@gmail.com> wrote:
> I'd like to add a CSS class to the current page in the navigation
> menu. For example:
>
>    <li><a class="active" href="{{ url_for('page1') }}">Page 1</a></li>
>    <li><a href="{{ url_for('page2') }}">Page 2</a></li>
>    etc.
>
> I was going to write a simple template macro to do this. But how can I
> tell which element to stylize in the menu?
>
> Also, it seems odd that the request object doesn't contain an
> attribute that would match what url_for returns. (script_root + path)
> It'd be nice to compare url_for('page1') to request.something (not
> sure what it should be called?)
>
> Thanks,
> Michael
>

There's a helpful snippet in the Jinja docs:

http://jinja.pocoo.org/docs/tricks/#highlighting-active-menu-items

Jesse

On Fri, Jul 29, 2011 at 2:14 PM, Michael Fogleman <fogleman@gmail.com> wrote:
> Here's what I came up with, but still curious if there's a better way:
>
> {% macro nav_link(endpoint, name) %}
>    {%- if url_for(endpoint) == request.script_root + request.path -%}
>        <a class="active" href="{{ url_for(endpoint) }}">{{ name }}</a>
>    {%- else -%}
>        <a href="{{ url_for(endpoint) }}">{{ name }}</a>
>    {%- endif -%}
> {% endmacro %}
>
> On Fri, Jul 29, 2011 at 4:52 PM, Michael Fogleman <fogleman@gmail.com> wrote:
>> I'd like to add a CSS class to the current page in the navigation
>> menu. For example:
>>
>>    <li><a class="active" href="{{ url_for('page1') }}">Page 1</a></li>
>>    <li><a href="{{ url_for('page2') }}">Page 2</a></li>
>>    etc.
>>
>> I was going to write a simple template macro to do this. But how can I
>> tell which element to stylize in the menu?
>>
>> Also, it seems odd that the request object doesn't contain an
>> attribute that would match what url_for returns. (script_root + path)
>> It'd be nice to compare url_for('page1') to request.something (not
>> sure what it should be called?)
>>
>> Thanks,
>> Michael
>>
>

Hi,

On 2011-07-29 11:14 PM, Michael Fogleman wrote:
> Here's what I came up with, but still curious if there's a better way:
The endpoint is stored on the request.  You can do this:

{% if endpoint == request.endpoint %}
    ...
{% endif %}

This is how I usually do that.  Example:
https://github.com/mitsuhiko/bf3-aggregator/blob/master/templates/layout.html


Regards,
Armin

What's the benefit of doing it this way over using javascript?  I have
always used jquery's navtab for navigation and it works.
On Jul 29, 2011 5:23 PM, "Armin Ronacher" <armin.ronacher@active-4.com>
wrote:
> Hi,
>
> On 2011-07-29 11:14 PM, Michael Fogleman wrote:
>> Here's what I came up with, but still curious if there's a better way:
> The endpoint is stored on the request. You can do this:
>
> {% if endpoint == request.endpoint %}
> ...
> {% endif %}
>
> This is how I usually do that. Example:
>
https://github.com/mitsuhiko/bf3-aggregator/blob/master/templates/layout.html
>
>
> Regards,
> Armin

How do you do it with jQuery (example)? Why use JS when it isn't needed?

Michael

On Fri, Jul 29, 2011 at 5:57 PM, Josh Finnie <joshua.finnie@gmail.com> wrote:
> What's the benefit of doing it this way over using javascript?  I have
> always used jquery's navtab for navigation and it works.
>
> On Jul 29, 2011 5:23 PM, "Armin Ronacher" <armin.ronacher@active-4.com>
> wrote:
>> Hi,
>>
>> On 2011-07-29 11:14 PM, Michael Fogleman wrote:
>>> Here's what I came up with, but still curious if there's a better way:
>> The endpoint is stored on the request. You can do this:
>>
>> {% if endpoint == request.endpoint %}
>> ...
>> {% endif %}
>>
>> This is how I usually do that. Example:
>>
>> https://github.com/mitsuhiko/bf3-aggregator/blob/master/templates/layout.html
>>
>>
>> Regards,
>> Armin
>

Perfect!

request.endpoint isn't really shown in the documentation here:
http://flask.pocoo.org/docs/api/#incoming-request-data (Beyond a
slight mention of it in the Request constructor description)

Michael

On Fri, Jul 29, 2011 at 5:22 PM, Armin Ronacher
<armin.ronacher@active-4.com> wrote:
> Hi,
>
> On 2011-07-29 11:14 PM, Michael Fogleman wrote:
>> Here's what I came up with, but still curious if there's a better way:
> The endpoint is stored on the request.  You can do this:
>
> {% if endpoint == request.endpoint %}
>    ...
> {% endif %}
>
> This is how I usually do that.  Example:
> https://github.com/mitsuhiko/bf3-aggregator/blob/master/templates/layout.html
>
>
> Regards,
> Armin
>

Hi,

On 2011-07-30 1:19 AM, Michael Fogleman wrote:
> request.endpoint isn't really shown in the documentation here:
> http://flask.pocoo.org/docs/api/#incoming-request-data (Beyond a
> slight mention of it in the Request constructor description)
Indeed.  While it was documented the Sphinx docs did not pull in the 
information from the docstrings due to a bug.  I just fixed this and 
updated the docs online.


Regards,
Armin

Le 29/07/2011 23:22, Armin Ronacher a écrit :
> The endpoint is stored on the request.  You can do this:
>
> {% if endpoint == request.endpoint %}
>      ...
> {% endif %}

Hi,

If some view serve more than one element in your navigation (ie. it 
takes arguments) you might want to compare

     (request.endpoint, request.view_args)

Regards,
-- 
Simon Sapin