Flask Mailinglist

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 
> 

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

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 
> 

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 

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 
>> 
>