  
<div id="snippet_337" class="snippet">
  <h2><a href="/snippets/337-Atom-template-Rails-builder-template" title="Atom template Rails builder template - Ruby - atom, builder, category, tags">Atom template Rails builder template</a></h2>
  <div class="details">
    <a style="background-color: #FFFF94;" href="http://snippets.aktagon.com/languages/124-Ruby">
      Ruby</a> posted 10 months ago by christian
          
  </div>

  <div class="body">
    <p><pre class="active4d"><span class="line-numbers">   1 </span> <span class="FunctionName">atom_feed</span>(<span class="UserDefinedConstant"><span class="UserDefinedConstant">:</span>url</span> =&gt; <span class="FunctionName">formatted_posts_url</span>(<span class="UserDefinedConstant"><span class="UserDefinedConstant">:</span>atom</span>)) <span class="Keyword">do </span>|<span class="Variable">feed</span>|
<span class="line-numbers">   2 </span>   feed.<span class="FunctionName">title</span>(<span class="Variable"><span class="Variable">@</span>category</span>.<span class="FunctionName">name</span>)
<span class="line-numbers">   3 </span>   feed.<span class="FunctionName">updated</span>(<span class="Variable"><span class="Variable">@</span>posts</span>.<span class="FunctionName">first</span> <span class="Operator">?</span> <span class="Variable"><span class="Variable">@</span>posts</span>.<span class="FunctionName">first</span>.<span class="FunctionName">created_at</span> : <span class="LibraryClassType">Time</span>.<span class="FunctionName">now</span>.<span class="FunctionName">utc</span>)
<span class="line-numbers">   4 </span> 
<span class="line-numbers">   5 </span>   <span class="Keyword">for</span> post <span class="Keyword">in</span> <span class="Variable"><span class="Variable">@</span>posts</span>
<span class="line-numbers">   6 </span>     feed.<span class="FunctionName">entry</span>(post) <span class="Keyword">do </span>|<span class="Variable">entry</span>|
<span class="line-numbers">   7 </span>       entry.<span class="FunctionName">title</span>(post.<span class="FunctionName">title</span>)
<span class="line-numbers">   8 </span>       entry.<span class="FunctionName">content</span>(post.<span class="FunctionName">body_html</span>, <span class="UserDefinedConstant"><span class="UserDefinedConstant">:</span>type</span> =&gt; <span class="String"><span class="String">'</span>html<span class="String">'</span></span>)
<span class="line-numbers">   9 </span>       entry.<span class="FunctionName">updated</span> post.<span class="FunctionName">updated_at</span>
<span class="line-numbers">  10 </span> 
<span class="line-numbers">  11 </span>       <span class="Keyword">for</span> tag <span class="Keyword">in</span> post.<span class="FunctionName">tags</span>
<span class="line-numbers">  12 </span>         entry.<span class="FunctionName">category</span> <span class="UserDefinedConstant"><span class="UserDefinedConstant">:</span>term</span> =&gt; <span class="FunctionName">url_for</span>(tag), <span class="UserDefinedConstant"><span class="UserDefinedConstant">:</span>label</span> =&gt; tag.<span class="FunctionName">name</span>
<span class="line-numbers">  13 </span>       <span class="Keyword">end</span>
<span class="line-numbers">  14 </span>     <span class="Keyword">end</span>
<span class="line-numbers">  15 </span>   <span class="Keyword">end</span>
<span class="line-numbers">  16 </span> <span class="Keyword">end</span>
</pre></p>
  </div>

  <div style="font-size: 0.8em;margin:0.5em;">
    
      Tagged <a href="/tags/390-atom">atom</a>, <a href="/tags/743-builder">builder</a>, <a href="/tags/585-category">category</a>, <a href="/tags/517-tags">tags</a>
    
    
  </div>
</div>



  
<div id="snippet_311" class="snippet">
  <h2><a href="/snippets/311-How-to-implement-collapsible-content-folders-categories-jimmy-the-cat-with-jQuery" title="How to implement collapsible content (folders, categories, jimmy the cat) with jQuery - JavaScript - collapse, expand, jquery, folder, category">How to implement collapsible content (folders, categories, jimmy the cat) with jQuery</a></h2>
  <div class="details">
    <a style="background-color: #FFFF94;" href="http://snippets.aktagon.com/languages/61-JavaScript">
      JavaScript</a> posted 11 months ago by christian
          
  </div>

  <div class="body">
    <p>This here is a quick-and-dirty implementation of folders for jQuery:</p>
<h2>Markup</h2>
<p>Any markup following the naming conventions should work, for example:</p>
<p><pre class="active4d"><span class="line-numbers">   1 </span> <span class="Operator">&lt;</span>ul <span class="Storage">class</span><span class="Operator">=</span><span class="String"><span class="String">&quot;</span>collapsible<span class="String">&quot;</span></span><span class="Operator">&gt;</span>
<span class="line-numbers">   2 </span>   <span class="Operator">&lt;</span>li<span class="Operator">&gt;</span>
<span class="line-numbers">   3 </span>      <span class="Operator">&lt;</span>a href<span class="Operator">=</span><span class="String"><span class="String">&quot;</span><span class="String">&quot;</span></span> <span class="Storage">class</span><span class="Operator">=</span><span class="String"><span class="String">&quot;</span>toggle-button<span class="String">&quot;</span></span><span class="Operator">&gt;</span>This be the folder<span class="Operator">&lt;</span>/a<span class="Operator">&gt;</span>
<span class="line-numbers">   4 </span>     <span class="Operator">&lt;</span>ul style<span class="Operator">=</span><span class="String"><span class="String">&quot;</span>display:none<span class="String">&quot;</span></span> <span class="Storage">class</span><span class="Operator">=</span><span class="String"><span class="String">&quot;</span>collapsible-content<span class="String">&quot;</span></span><span class="Operator">&gt;</span>
<span class="line-numbers">   5 </span>         <span class="Operator">&lt;</span>li<span class="Operator">&gt;</span>This be the folder content<span class="Operator">&lt;</span>/li<span class="Operator">&gt;</span>
<span class="line-numbers">   6 </span>         <span class="Operator">&lt;</span>li<span class="Operator">&gt;</span>This be the folder content<span class="Operator">&lt;</span>/li<span class="Operator">&gt;</span>
<span class="line-numbers">   7 </span>     <span class="Operator">&lt;</span>/ul<span class="Operator">&gt;</span>
<span class="line-numbers">   8 </span>   <span class="Operator">&lt;</span>/li<span class="Operator">&gt;</span>
<span class="line-numbers">   9 </span> <span class="Operator">&lt;</span>/ul<span class="Operator">&gt;</span>
</pre></p>
<h2>JavaScript</h2>
<p><pre class="active4d"><span class="line-numbers">   1 </span> <span class="BlockComment"><span class="BlockComment">/**</span></span>
<span class="line-numbers">   2 </span> <span class="BlockComment"> * Collapsible categories implementation.</span>
<span class="line-numbers">   3 </span> <span class="BlockComment"> * </span>
<span class="line-numbers">   4 </span> <span class="BlockComment"> <span class="BlockComment">*/</span></span>
<span class="line-numbers">   5 </span> <span class="Storage">var</span> category <span class="Operator">=</span> {
<span class="line-numbers">   6 </span>   <span class="FunctionName">find_category</span>: <span class="Storage">function</span>(<span class="FunctionArgument">target</span>) {
<span class="line-numbers">   7 </span>     <span class="Storage">var</span> category <span class="Operator">=</span> target;
<span class="line-numbers">   8 </span>     <span class="LineComment"><span class="LineComment">//</span> This isn't the category, so look for it</span>
<span class="line-numbers">   9 </span>     <span class="Keyword">if</span>(<span class="Operator">!</span>target.hasClass(<span class="String"><span class="String">'</span>collapsible<span class="String">'</span></span>)) {
<span class="line-numbers">  10 </span>       category <span class="Operator">=</span> target.closest(<span class="String"><span class="String">'</span>.collapsible<span class="String">'</span></span>);
<span class="line-numbers">  11 </span>     }
<span class="line-numbers">  12 </span>     <span class="Keyword">return</span> category;
<span class="line-numbers">  13 </span>   },
<span class="line-numbers">  14 </span>   <span class="FunctionName">collapse</span>: <span class="Storage">function</span>(<span class="FunctionArgument">target</span>) {
<span class="line-numbers">  15 </span>     <span class="Storage">var</span> category <span class="Operator">=</span> <span class="Variable">this</span>.find_category(target);
<span class="line-numbers">  16 </span>     category.<span class="CommandMethod">find</span>(<span class="String"><span class="String">'</span>.collapsible-content<span class="String">'</span></span>).hide();
<span class="line-numbers">  17 </span>     category.removeClass(<span class="String"><span class="String">'</span>expanded<span class="String">'</span></span>);
<span class="line-numbers">  18 </span>     category.addClass(<span class="String"><span class="String">'</span>collapsed<span class="String">'</span></span>);
<span class="line-numbers">  19 </span>   },
<span class="line-numbers">  20 </span>   <span class="FunctionName">expand</span>: <span class="Storage">function</span>(<span class="FunctionArgument">target</span>) {
<span class="line-numbers">  21 </span>     <span class="Storage">var</span> category <span class="Operator">=</span> <span class="Variable">this</span>.find_category(target);
<span class="line-numbers">  22 </span>     category.<span class="CommandMethod">find</span>(<span class="String"><span class="String">'</span>.collapsible-content<span class="String">'</span></span>).show();
<span class="line-numbers">  23 </span>     category.addClass(<span class="String"><span class="String">'</span>expanded<span class="String">'</span></span>);
<span class="line-numbers">  24 </span>     category.removeClass(<span class="String"><span class="String">'</span>collapsed<span class="String">'</span></span>);
<span class="line-numbers">  25 </span>   },
<span class="line-numbers">  26 </span>   <span class="FunctionName">toggle</span>: <span class="Storage">function</span>(<span class="FunctionArgument">target</span>) {
<span class="line-numbers">  27 </span>     <span class="Storage">var</span> category <span class="Operator">=</span> <span class="Variable">this</span>.find_category(target);
<span class="line-numbers">  28 </span> 
<span class="line-numbers">  29 </span>     <span class="Storage">var</span> is_expanded <span class="Operator">=</span> category.hasClass(<span class="String"><span class="String">'</span>expanded<span class="String">'</span></span>);
<span class="line-numbers">  30 </span> 
<span class="line-numbers">  31 </span>     <span class="Keyword">if</span>(is_expanded) {
<span class="line-numbers">  32 </span>       <span class="Variable">this</span>.collapse(category);
<span class="line-numbers">  33 </span>     } <span class="Keyword">else</span> {
<span class="line-numbers">  34 </span>       <span class="Variable">this</span>.expand(category);
<span class="line-numbers">  35 </span>     }
<span class="line-numbers">  36 </span>   }
<span class="line-numbers">  37 </span> }
</pre></p>
<h2>Usage</h2>
<p><pre class="active4d"><span class="line-numbers">   1 </span> <span class="Operator">$</span>(<span class="String"><span class="String">'</span>.toggle-button<span class="String">'</span></span>).live(<span class="String"><span class="String">'</span>click<span class="String">'</span></span>, <span class="Storage">function</span>() {
<span class="line-numbers">   2 </span>   category.toggle(<span class="Operator">$</span>(<span class="Variable">this</span>));
<span class="line-numbers">   3 </span>   <span class="Keyword">return</span> <span class="BuiltInConstant">false</span>;
<span class="line-numbers">   4 </span> });
</pre></p>
  </div>

  <div style="font-size: 0.8em;margin:0.5em;">
    
      Tagged <a href="/tags/685-collapse">collapse</a>, <a href="/tags/686-expand">expand</a>, <a href="/tags/355-jquery">jquery</a>, <a href="/tags/350-folder">folder</a>, <a href="/tags/585-category">category</a>
    
    
  </div>
</div>



  
<div id="snippet_259" class="snippet">
  <h2><a href="/snippets/259-Recurse-through-a-Ruby-tree" title="Recurse through a Ruby tree - CSS - recursive, tree, category, ruby">Recurse through a Ruby tree</a></h2>
  <div class="details">
    <a style="background-color: #FFFF94;" href="http://snippets.aktagon.com/languages/26-CSS">
      CSS</a> posted about 1 year ago by christian
          
  </div>

  <div class="body">
    <p>The model:</p>


	<p><pre class="active4d"><span class="line-numbers">   1 </span> class Category
<span class="line-numbers">   2 </span> ...
<span class="line-numbers">   3 </span>   def recurse
<span class="line-numbers">   4 </span>     yield(self)
<span class="line-numbers">   5 </span> 
<span class="line-numbers">   6 </span>     children<span class="TagAttribute"><span class="TagAttribute">.</span>each</span> do |child|
<span class="line-numbers">   7 </span>       child<span class="TagAttribute"><span class="TagAttribute">.</span>recurse</span> {|sibling| yield sibling}
<span class="line-numbers">   8 </span>     end
<span class="line-numbers">   9 </span>   end
<span class="line-numbers">  10 </span> end
</pre></p>


	<p>The recusion:</p>


	<p><pre class="active4d"><span class="line-numbers">   1 </span> Category<span class="TagAttribute"><span class="TagAttribute">.</span>root</span><span class="TagAttribute"><span class="TagAttribute">.</span>recurse</span> do |child|
<span class="line-numbers">   2 </span>   puts child
<span class="line-numbers">   3 </span> end
</pre></p>
  </div>

  <div style="font-size: 0.8em;margin:0.5em;">
    
      Tagged <a href="/tags/57-recursive">recursive</a>, <a href="/tags/584-tree">tree</a>, <a href="/tags/585-category">category</a>, <a href="/tags/8-ruby">ruby</a>
    
    
  </div>
</div>






