librelist archives

« back to archive

Styling the current navigation element?

Styling the current navigation element?

From:
Michael Fogleman
Date:
2011-07-29 @ 20:52
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

Styling the current navigation element?

From:
amri.aymen@gmail.com
Date:
2014-02-24 @ 17:54
Hi,

I am using Flask/Jinja2 and Bootstrap 3.

I'd like to add|class="active"|to the current navigation element.

Those links are stored in|prog_ids|:

|/programme/23022014
/programme/24022014
/programme/25022014|

I saw this thread 

<http://flask.pocoo.org/mailinglist/archive/2011/7/29/styling-the-current-navigation-element/#781bf538b4711e8e38e1a42198dc1274>

and I tried to do something similar . In the view function code I am 
using this route :

@app.route('/programme/<prog_id>', endpoint='programme')

And my HTML code where I created the macro and I used it, is :

			{% macro nav_link(endpoint, prog_id) %}
				{% if endpoint == request.endpoint  %}
				<li class="active">
					<a href="{{ url_for(endpoint) }}">
					<span class="badge pull-right">-</span>
					{{prog_id|strftime_b}}
					</a>
				</li>
			{% else %}
				<li>
					<a href="{{ url_for(endpoint) }}">
					<span class="badge pull-right">-</span>
					{{prog_id|strftime_b}}
					</a>
				</li>
			{% endif %}
			{% endmacro %}
			<!--List of days-->
			<ul class="nav nav-pills ">
			{% for prog_id in prog_ids %}
				{{ nav_link(endpoint, prog_id) }}
			{% endfor %}
			</ul>

The code is not working, the error was :

    if endpoint[:1] == '.':
    UndefinedError: 'endpoint' is undefined

    Any suggestions ? Thanks in advance

    Aymen.

Re: [flask] Styling the current navigation element?

From:
Emanuil Tolev
Date:
2014-02-24 @ 18:13
I use request.path for this purpose, although not in a clever macro :). Is
that what you need?

(Just {{ request.path }} in the footer of your pages and browse around to
see whether the values are what you're seeking.)

Greetings,
Emanuil


On 24 February 2014 17:54, amri.aymen@gmail.com <amri.aymen@gmail.com>wrote:

>  Hi,
>
> I am using Flask/Jinja2 and Bootstrap 3.
>
> I'd like to add class="active" to the current navigation element.
>
> Those links are stored in prog_ids:
>
> /programme/23022014/programme/24022014/programme/25022014
>
> I saw this 
thread<http://flask.pocoo.org/mailinglist/archive/2011/7/29/styling-the-current-navigation-element/#781bf538b4711e8e38e1a42198dc1274>and
I tried to do something similar . In the view function code I am using
> this route :
>
> @app.route('/programme/<prog_id>', endpoint='programme')
>
> And my HTML code where I created the macro and I used it, is :
>
> 			{% macro nav_link(endpoint, prog_id) %}
> 				{% if endpoint == request.endpoint  %}
> 				<li class="active">
> 					<a href="{{ url_for(endpoint) }}">
> 					<span class="badge pull-right">-</span>
> 					{{prog_id|strftime_b}}
> 					</a>
> 				</li>
> 			{% else %}
> 				<li>
> 					<a href="{{ url_for(endpoint) }}">
> 					<span class="badge pull-right">-</span>
> 					{{prog_id|strftime_b}}
> 					</a>
> 				</li>
> 			{% endif %}
> 			{% endmacro %}
> 			<!--List of days-->
> 			<ul class="nav nav-pills ">
> 			{% for prog_id in prog_ids %}
> 				{{ nav_link(endpoint, prog_id) }}
> 			{% endfor %}
> 			</ul>
>
> The code is not working, the error was :
>
> if endpoint[:1] == '.':
> UndefinedError: 'endpoint' is undefined
>
> Any suggestions ? Thanks in advance
>
> Aymen.
>
>
>

Re: [flask] Styling the current navigation element?

From:
Cory Dolphin
Date:
2014-02-24 @ 18:37
Two comments:

1. request.path should do what you want here. A simple test II have used in
the past is request.script_root + request.path == urlfor(...)
2. You can simplify your view logic by moving your conditional into the li
tag:

In this case, I woukld is also useful to simply use a jinja2 inline
conditional:

			{% macro nav_link(endpoint, prog_id) %}
				<li {% if yourCoolConditional %} class="active" {% endif %}>
					<a href="{{ url_for(endpoint) }}">
					<span class="badge pull-right">-</span>
					{{prog_id|strftime_b}}
					</a>
				</li>
			{% endmacro %}
			<!--List of days-->
			<ul class="nav nav-pills ">
			{% for prog_id in prog_ids %}
				{{ nav_link(endpoint, prog_id) }}
			{% endfor %}
			</ul>



On Mon, Feb 24, 2014 at 1:13 PM, Emanuil Tolev <emanuil@cottagelabs.com>wrote:

> I use request.path for this purpose, although not in a clever macro :). Is
> that what you need?
>
> (Just {{ request.path }} in the footer of your pages and browse around to
> see whether the values are what you're seeking.)
>
> Greetings,
> Emanuil
>
>
> On 24 February 2014 17:54, amri.aymen@gmail.com <amri.aymen@gmail.com>wrote:
>
>>  Hi,
>>
>> I am using Flask/Jinja2 and Bootstrap 3.
>>
>> I'd like to add class="active" to the current navigation element.
>>
>> Those links are stored in prog_ids:
>>
>> /programme/23022014/programme/24022014/programme/25022014
>>
>>  I saw this 
thread<http://flask.pocoo.org/mailinglist/archive/2011/7/29/styling-the-current-navigation-element/#781bf538b4711e8e38e1a42198dc1274>and
I tried to do something similar . In the view function code I am using
>> this route :
>>
>> @app.route('/programme/<prog_id>', endpoint='programme')
>>
>>  And my HTML code where I created the macro and I used it, is :
>>
>> 			{% macro nav_link(endpoint, prog_id) %}
>> 				{% if endpoint == request.endpoint  %}
>> 				<li class="active">
>> 					<a href="{{ url_for(endpoint) }}">
>> 					<span class="badge pull-right">-</span>
>> 					{{prog_id|strftime_b}}
>> 					</a>
>> 				</li>
>> 			{% else %}
>> 				<li>
>> 					<a href="{{ url_for(endpoint) }}">
>> 					<span class="badge pull-right">-</span>
>> 					{{prog_id|strftime_b}}
>> 					</a>
>> 				</li>
>> 			{% endif %}
>> 			{% endmacro %}
>> 			<!--List of days-->
>> 			<ul class="nav nav-pills ">
>> 			{% for prog_id in prog_ids %}
>> 				{{ nav_link(endpoint, prog_id) }}
>> 			{% endfor %}
>> 			</ul>
>>
>>  The code is not working, the error was :
>>
>> if endpoint[:1] == '.':
>> UndefinedError: 'endpoint' is undefined
>>
>> Any suggestions ? Thanks in advance
>>
>> Aymen.
>>
>>
>>
>

Re: [flask] Styling the current navigation element?

From:
amri.aymen@gmail.com
Date:
2014-02-25 @ 16:55
Thanks to both of you .
Finally, I used this code that I found easier :

			<ul class="nav nav-pills ">
			{% for prog_id in prog_ids %}
				<li class="{% if  url_for('programme', prog_id=prog_id)  ==  
request.path %} active {% endif %}">
					<a href="{{ prog_id }}">
					<span class="badge pull-right">-</span>
					{{prog_id|strftime_b}}
					</a>
				</li>
			{% endfor %}
			</ul>


If there are improvements that I can make, please don't hesitate to tell 
me :-)

On 02/24/2014 07:37 PM, Cory Dolphin wrote:
> Two comments:
>
> 1. request.path should do what you want here. A simple test II have 
> used in the past is request.script_root + request.path == urlfor(...)
> 2. You can simplify your view logic by moving your conditional into 
> the li tag:
>
> In this case, I woukld is also useful to simply use a jinja2 inline 
> conditional:
> 			{% macro nav_link(endpoint, prog_id) %}
> 				<li {% if yourCoolConditional %} class="active" {% endif %}>
> 					<a href="{{ url_for(endpoint) }}">
> 					<span class="badge pull-right">-</span>
> 					{{prog_id|strftime_b}}
> 					</a>
> 				</li>
> 			{% endmacro %}
> 			<!--List of days-->
> 			<ul class="nav nav-pills ">
> 			{% for prog_id in prog_ids %}
> 				{{ nav_link(endpoint, prog_id) }}
> 			{% endfor %}
> 			</ul>
>
>
> On Mon, Feb 24, 2014 at 1:13 PM, Emanuil Tolev 
> <emanuil@cottagelabs.com <mailto:emanuil@cottagelabs.com>> wrote:
>
>     I use request.path for this purpose, although not in a clever
>     macro :). Is that what you need?
>
>     (Just {{ request.path }} in the footer of your pages and browse
>     around to see whether the values are what you're seeking.)
>
>     Greetings,
>     Emanuil
>
>
>     On 24 February 2014 17:54, amri.aymen@gmail.com
>     <mailto:amri.aymen@gmail.com> <amri.aymen@gmail.com
>     <mailto:amri.aymen@gmail.com>> wrote:
>
>         Hi,
>
>         I am using Flask/Jinja2 and Bootstrap 3.
>
>         I'd like to add|class="active"|to the current navigation element.
>
>         Those links are stored in|prog_ids|:
>
>         |/programme/23022014
>         /programme/24022014
>         /programme/25022014
>         |
>
>         I saw this thread
>         
<http://flask.pocoo.org/mailinglist/archive/2011/7/29/styling-the-current-navigation-element/#781bf538b4711e8e38e1a42198dc1274>
>         and I tried to do something similar . In the view function
>         code I am using this route :
>
>         @app.route('/programme/<prog_id>', endpoint='programme')
>
>         And my HTML code where I created the macro and I used it, is :
>
>         			{% macro nav_link(endpoint, prog_id) %}
>         				{% if endpoint == request.endpoint  %}
>         				<li class="active">
>         					<a href="{{ url_for(endpoint) }}">
>         					<span class="badge pull-right">-</span>
>         					{{prog_id|strftime_b}}
>         					</a>
>         				</li>
>         			{% else %}
>         				<li>
>         					<a href="{{ url_for(endpoint) }}">
>         					<span class="badge pull-right">-</span>
>         					{{prog_id|strftime_b}}
>         					</a>
>         				</li>
>         			{% endif %}
>         			{% endmacro %}
>         			<!--List of days-->
>         			<ul class="nav nav-pills ">
>         			{% for prog_id in prog_ids %}
>         				{{ nav_link(endpoint, prog_id) }}
>         			{% endfor %}
>         			</ul>
>
>         The code is not working, the error was :
>
>             if endpoint[:1] == '.':
>             UndefinedError: 'endpoint' is undefined
>
>             Any suggestions ? Thanks in advance
>
>             Aymen.
>
>
>
>


-- 
-------------------------------------------
Aymen Elamri
Linux/Web Consultant


Mobile: 0033 6 04 08 77 82
Email : amri.aymen@gmail.com / me@webzerone.com

Blog : www.webzerone.com
Twitter : www.twitter.com/eon01
Skype : eon-01

GPG/PGP Key-ID : 0x4CDD56A0
Fingerprint : 452F 17EE BC65 6EC1 A79D 5F4D 07CB 6DD4 4CDD 56A0

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
>

Re: [flask] Re: Styling the current navigation element?

From:
Jesse
Date:
2011-07-29 @ 21:17
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
>>
>

Re: [flask] Re: Styling the current navigation element?

From:
Armin Ronacher
Date:
2011-07-29 @ 21:22
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

Re: [flask] Re: Styling the current navigation element?

From:
Josh Finnie
Date:
2011-07-29 @ 21:57
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

Re: [flask] Re: Styling the current navigation element?

From:
Michael Fogleman
Date:
2011-07-29 @ 23:20
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
>

Re: [flask] Re: Styling the current navigation element?

From:
Michael Fogleman
Date:
2011-07-29 @ 23:19
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
>

Re: [flask] Re: Styling the current navigation element?

From:
Armin Ronacher
Date:
2011-07-30 @ 00:08
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

Re: [flask] Re: Styling the current navigation element?

From:
Simon Sapin
Date:
2011-08-01 @ 07:44
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