<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blowing Through Lines &#187; site navigation</title>
	<atom:link href="http://blowingthroughlines.com/category/site-navigation/feed/" rel="self" type="application/rss+xml" />
	<link>http://blowingthroughlines.com</link>
	<description>Highly addictive code.</description>
	<lastBuildDate>Tue, 15 Jun 2010 18:14:52 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Highlight selected navigation item in ruby on rails</title>
		<link>http://blowingthroughlines.com/2008/02/03/ruby/highlight-selected-navigation-item-in-ruby-on-rails/</link>
		<comments>http://blowingthroughlines.com/2008/02/03/ruby/highlight-selected-navigation-item-in-ruby-on-rails/#comments</comments>
		<pubDate>Sun, 03 Feb 2008 15:54:30 +0000</pubDate>
		<dc:creator>jeff</dc:creator>
				<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[site navigation]]></category>

		<guid isPermaLink="false">http://blowingthroughlines.com/2008/02/03/flash-as3/highlight-selected-navigation-item-in-ruby-on-rails/</guid>
		<description><![CDATA[For an example site where I used this technique please refer to www.howcuteismypet.com you&#8217;ll notice that when you click on best / worst or most recent it is highlighted with a black underline.  This type of highlighting seems trivial.  However to do it in rails in a nice elegant way is not obvious. [...]


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>For an example site where I used this technique please refer to <a href="http://www.howcuteismypet.com" target="_blank">www.howcuteismypet.com</a> you&#8217;ll notice that when you click on best / worst or most recent it is highlighted with a black underline.  This type of highlighting seems trivial.  However to do it in rails in a nice elegant way is not obvious.  So without further a do, I present my method.  This method dis-involves the controller which makes for a cleaner more centralized place for managing your highlighted navigation.</p>
<p>The primary thing required is a method for creating navigation items.  I choose to put my method / helper. in the app/helpers/application_helper.rb that way it will be available to all all of my views.   The method I chose to use is</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p32code3'); return false;">View Code</a> RUBY</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p323"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code" id="p32code3"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> nav_selected_no_span<span style="color:#006600; font-weight:bold;">&#40;</span>hash_name, selectedkey <span style="color:#006600; font-weight:bold;">&#41;</span>
                result =<span style="color:#996600;">&quot;&quot;</span>
                hash_name.<span style="color:#9900CC;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>item<span style="color:#006600; font-weight:bold;">|</span>
                        <span style="color:#9966CC; font-weight:bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>item<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span>== selectedkey<span style="color:#006600; font-weight:bold;">&#41;</span>
                                result <span style="color:#006600; font-weight:bold;">+</span>=<span style="color:#996600;">&quot;&lt;li class=&quot;</span>selected<span style="color:#996600;">&quot;+item[0].to_s.gsub(&quot;</span> <span style="color:#996600;">&quot;, &quot;</span>_<span style="color:#996600;">&quot;).downcase+&quot;</span> selected<span style="color:#996600;">&quot;&gt;&quot;</span><span style="color:#006600; font-weight:bold;">+</span>link_to<span style="color:#006600; font-weight:bold;">&#40;</span>item<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span>,item<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#996600;">&quot;&lt;/li&gt;&quot;</span>
                        <span style="color:#9966CC; font-weight:bold;">else</span>
                                result <span style="color:#006600; font-weight:bold;">+</span>=<span style="color:#996600;">&quot;&lt;li class=&quot;</span><span style="color:#996600;">&quot;+item[0].to_s.gsub(&quot;</span> <span style="color:#996600;">&quot;,&quot;</span>_<span style="color:#996600;">&quot;).downcase+&quot;</span> ns<span style="color:#996600;">&quot;&gt;&quot;</span><span style="color:#006600; font-weight:bold;">+</span>link_to<span style="color:#006600; font-weight:bold;">&#40;</span>item<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span>,item<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color:#9900CC;">to_s</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">+</span><span style="color:#996600;">&quot;&lt;/li&gt;&quot;</span>
                        <span style="color:#9966CC; font-weight:bold;">end</span>
                  <span style="color:#9966CC; font-weight:bold;">end</span>
                  <span style="color:#0000FF; font-weight:bold;">return</span> result
        <span style="color:#9966CC; font-weight:bold;">end</span></pre></td></tr></table></div>

<p>This function is fairly, simple what it allows you to do in your view is, make an unorded list of your navigation items.  You would use this method most likely in your app/views/layout/application.rb.  An example of the navigation from howcuteismypet.com is:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p32code4'); return false;">View Code</a> RUBY</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p324"><td class="line_numbers"><pre>6
7
8
</pre></td><td class="code" id="p32code4"><pre class="ruby" style="font-family:monospace;"><span style="color:#006600; font-weight:bold;">&lt;</span>ul<span style="color:#006600; font-weight:bold;">&gt;</span>
     <span style="color:#006600; font-weight:bold;">&lt;%</span>= nav_selected_no_span<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;Vote On Pets&quot;</span>,home_path<span style="color:#006600; font-weight:bold;">&#93;</span>,<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;Best / Worst&quot;</span>,best_worst_path<span style="color:#006600; font-weight:bold;">&#93;</span>,<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">&quot;Most Recent&quot;</span>,most_recent_path<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#93;</span>, params<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:location</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span>
<span style="color:#006600; font-weight:bold;">&lt;/</span>ul<span style="color:#006600; font-weight:bold;">&gt;</span></pre></td></tr></table></div>

<p>The important thing to notice is the params[:location] the function above says that if params[:location] matches one of the names like &#8220;Vote On Pets&#8221; then highlight that item.  Pretty simple.  Then in your css you can define the rules that make something selected.  Now you may be wondering where params[:location] is set.  And you would be correct to wonder that.  That parameter is actually set in your routes file believe it or not.  As an example i&#8217;ll show you the route for &#8220;Vote On Pets&#8221;.  located in config/routes.rb your could do something like this.</p>
<pre>map.home '', :controller =&gt; 'index', :action =&gt; 'index', :location=&gt;'Vote On Pets'</pre>
<p>if you wanted most recent you would do something like this</p>
<pre>map.most_recent '/most_recent', :controller=&gt;'index',:action=&gt;'recent',:location=&gt;'Most Recent'</pre>
<p>The location parameter is sent to the helper and the correct items is selected.  So I hope this helps you in your efforts to stay dry and much more organized.</p>
<p>Questions and comments are very welcome on this blog.  We like to know we are not talking to ourselves, so if you would like further explanation please feel free to post a comment.</p>


<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blowingthroughlines.com/2008/02/03/ruby/highlight-selected-navigation-item-in-ruby-on-rails/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
