js-dynamic-timeline
Dynamic timeline script uses creative combination of ExpressionEngine functions with JS to organize entries and generate a sortable timeline.
exp:portal}
exp:portal}Example Usage with jQuery mMenu navigation
<nav id="menu">
<ul>
<li><a href="//domain.com/submit/" title="Load Last Week"><i class="fa fa-upload fa-menu-conform"></i>Post an Entry</a></li>
<!-- Load Last Week ==============================================================================================-->
<li><a href="//domain.com/app/{if segment_2}{segment_2}{/if}/last-week" title="Load Last Week"><i class="fa fa-table fa-menu-conform"></i>What happened last week?</a></li>
<!-- Load Last Week ==============================================================================================-->
<li><a href="//domain.com/app/{if segment_2}{segment_2}{/if}/last-month" title="Load Last 30 Days"><i class="fa fa-calendar-o fa-menu-conform"></i>Load the Last 30 Days</a></li>
<!-- Height and Weight Charts ==============================================================================================-->
<li><a href="//domain.com/app/{if segment_2}{segment_2}{/if}/last-90" title="Load Last 90 Days"><i class="fa fa-calendar-o fa-menu-conform"></i>Load the Last 90 Days</a></li>
<!-- Height and Weight Charts ==============================================================================================-->
<li><a href="//domain.com/app/{if segment_2}{segment_2}{/if}/last-180" title="Load Last 180 Days"><i class="fa fa-calendar-o fa-menu-conform"></i>Load the Last 180 Days</a></li>
<!-- Height and Weight Charts ==============================================================================================-->
{exp:channel:entries channel="our_child" disable="categories|pagination|category_fields" limit="1"}
<li><a href="//domain.com/charts/" title="Height & Weight Charts"><i class="fa fa-area-chart fa-menu-conform"></i>{child_first_name}'s Growth</a></li>
{/exp:channel:entries}
<!-- Load by Month =================================================================================================-->
<li><span title="Filter"><i class="fa fa-calendar fa-menu-conform"></i>Load by Month</span>
<ul>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2017</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2017/january" title="January"><i class="fa fa-calendar"></i>January</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/february" title="February"><i class="fa fa-calendar"></i>February</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/march" title="March"><i class="fa fa-calendar"></i>March</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/april" title="April"><i class="fa fa-calendar"></i>April</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/may" title="May"><i class="fa fa-calendar"></i>May</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/june" title="June"><i class="fa fa-calendar"></i>June</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/july" title="July"><i class="fa fa-calendar"></i>July</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/august" title="August"><i class="fa fa-calendar"></i>August</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/september" title="September"><i class="fa fa-calendar"></i>September</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/october" title="October"><i class="fa fa-calendar"></i>October</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/november" title="November"><i class="fa fa-calendar"></i>November</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/december" title="December"><i class="fa fa-calendar"></i>December</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2016</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2016/january" title="January"><i class="fa fa-calendar"></i>January</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/february" title="February"><i class="fa fa-calendar"></i>February</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/march" title="March"><i class="fa fa-calendar"></i>March</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/april" title="April"><i class="fa fa-calendar"></i>April</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/may" title="May"><i class="fa fa-calendar"></i>May</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/june" title="June"><i class="fa fa-calendar"></i>June</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/july" title="July"><i class="fa fa-calendar"></i>July</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/august" title="August"><i class="fa fa-calendar"></i>August</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/september" title="September"><i class="fa fa-calendar"></i>September</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/october" title="October"><i class="fa fa-calendar"></i>October</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/november" title="November"><i class="fa fa-calendar"></i>November</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/december" title="December"><i class="fa fa-calendar"></i>December</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2015</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2015/january" title="January"><i class="fa fa-calendar"></i>January</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/february" title="February"><i class="fa fa-calendar"></i>February</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/march" title="March"><i class="fa fa-calendar"></i>March</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/april" title="April"><i class="fa fa-calendar"></i>April</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/may" title="May"><i class="fa fa-calendar"></i>May</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/june" title="June"><i class="fa fa-calendar"></i>June</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/july" title="July"><i class="fa fa-calendar"></i>July</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/august" title="August"><i class="fa fa-calendar"></i>August</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/september" title="September"><i class="fa fa-calendar"></i>September</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/october" title="October"><i class="fa fa-calendar"></i>October</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/november" title="November"><i class="fa fa-calendar"></i>November</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/december" title="December"><i class="fa fa-calendar"></i>December</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2014</span>
<ul>
<!--<li><a href="//domain.com/app/{segment_2}/2014/january" title="January"><i class="fa fa-calendar"></i>January</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/february" title="February"><i class="fa fa-calendar"></i>February</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/march" title="March"><i class="fa fa-calendar"></i>March</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/april" title="April"><i class="fa fa-calendar"></i>April</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/may" title="May"><i class="fa fa-calendar"></i>May</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/june" title="June"><i class="fa fa-calendar"></i>June</a></li>-->
<li><a href="//domain.com/app/{segment_2}/2014/july" title="July"><i class="fa fa-calendar"></i>July</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/august" title="August"><i class="fa fa-calendar"></i>August</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/september" title="September"><i class="fa fa-calendar"></i>September</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/october" title="October"><i class="fa fa-calendar"></i>October</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/november" title="November"><i class="fa fa-calendar"></i>November</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/december" title="December"><i class="fa fa-calendar"></i>December</a></li>
</ul>
</li>
</ul>
</li>
<!-- Load by Season ================================================================================================-->
<li><span href="#" title="Filter"><i class="fa fa-leaf fa-menu-conform"></i>Load by Season</span>
<ul>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2017</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2017/spring" title="Spring"><i class="fa fa-tint" style="width:16px"></i>Spring</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/summer" title="Summer"><i class="fa fa-sun-o" style="width:20px"></i>Summer</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/autumn" title="Autumn"><i class="fa fa-leaf" style="width:20px"></i>Autumn</a></li>
<li><a href="//domain.com/app/{segment_2}/2017/winter" title="Winter"><i class="fa fa-asterisk" style="width:21px"></i>Winter</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2016</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2016/spring" title="Spring"><i class="fa fa-tint" style="width:16px"></i>Spring</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/summer" title="Summer"><i class="fa fa-sun-o" style="width:20px"></i>Summer</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/autumn" title="Autumn"><i class="fa fa-leaf" style="width:20px"></i>Autumn</a></li>
<li><a href="//domain.com/app/{segment_2}/2016/winter" title="Winter"><i class="fa fa-asterisk" style="width:21px"></i>Winter</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2015</span>
<ul>
<li><a href="//domain.com/app/{segment_2}/2015/spring" title="Spring"><i class="fa fa-tint" style="width:16px"></i>Spring</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/summer" title="Summer"><i class="fa fa-sun-o" style="width:20px"></i>Summer</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/autumn" title="Autumn"><i class="fa fa-leaf" style="width:20px"></i>Autumn</a></li>
<li><a href="//domain.com/app/{segment_2}/2015/winter" title="Winter"><i class="fa fa-asterisk" style="width:21px"></i>Winter</a></li>
</ul>
</li>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-calendar fa-menu-conform"></i>2014</span>
<ul>
<!-- <li><a href="//domain.com/app/{segment_2}/2014/spring" title="Spring"><i class="fa fa-tint" style="width:16px"></i>Spring</a></li> -->
<li><a href="//domain.com/app/{segment_2}/2014/summer" title="Summer"><i class="fa fa-sun-o" style="width:20px"></i>Summer</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/autumn" title="Autumn"><i class="fa fa-leaf" style="width:20px"></i>Autumn</a></li>
<li><a href="//domain.com/app/{segment_2}/2014/winter" title="Winter"><i class="fa fa-asterisk" style="width:21px"></i>Winter</a></li>
</ul>
</li>
</ul>
</li>
<!-- Find by Tags ================================================================================================-->
<li><span href="#" title="Filter"><i class="fa fa-tags fa-menu-conform"></i>Load by Tags</span>
<ul>
<li class="nocounter"><span class="menu-subopening-span"><i class="fa fa-tags"></i>No tagged entries exist.</strong>. </a></li>
<li><span class="app-menu-header-icon"><i class="fa fa-tags"></i></span><span class="app-menu-header">Tags!</span><span class="app-menu-message"><span class="menu_information_block">Find groups of entries by the descriptive tags above. Contact the site administrator to request tagging permissions.</span></span></li>
</ul>
</li>
<!-- TOGGLE Ascending/Descending =============================================================================================-->
<li><a href="//domain.com/{segment_1}/asc/{if segment_3}{segment_3}{/if}/{if segment_4}{segment_4}{/if}/{if segment_5}{segment_5}{/if}"><i class="fa fa-sort-amount-asc fa-menu-conform"></i>Display Oldest Entries First</a>
<input type="checkbox" class="mm-toggle" name="menutoggle1" checked="checked" id="toggle_asc-desc"/></li>
<label for="menutoggle1"></label>
<!-- TOGGLE Milestones Only ==================================================================================================-->
<li><a href="#" id="milestones-toggle"><i class="fa fa-bookmark fa-menu-conform"></i>Display Only Milestones</a>
<input type="checkbox" class="mm-toggle" name="menutoggle2" checked="checked" id="toggle_milestones"/></li>
<label for="menutoggle2"></label>
<!-- Load Complete Timeline ==========================================================================================================-->
<li><span href="#mm8" title="Show All"><i class="fa fa-cloud-download fa-menu-conform"></i>Load All Timeline Posts</span>
<ul>
<li><a href="//domain.com/app/{if segment_2 =='asc'}{segment_2}{/if}{if segment_2 =='desc'}{segment_2}{/if}/all/" title="Load All"><i class="fa fa-cloud-download"></i>I can wait. <strong>Load it all</strong>. </a></li>
{exp:stats channel="timeline_post" disable="categories|pagination|category_fields" status="open" limit="10000"}
<!-- Include Bandwith Speed Test-->
<li><span class="app-menu-header-icon"><i class="fa fa-spinner"></i></span><span class="app-menu-header">Heads Up!</span><span class="app-menu-message" id="include_estimated-load-all"></span></li>
<!--<div id="output0800"></div>-->
<!--<div id="output1200"></div> -->
{embed="embeds/include_estimated-load-all" total_open_entries="{total_entries}"}
{/exp:stats}
</ul>
</li>
</ul>
</nav>
Project Technologies
Languages, Libraries & CMS
- ExpressionEngine
- HTML5
- CSS3
- JavaScript
- jQuery
- PHP