on webpage visitors can sort menu either "relevance" or "date". when 1 chooses "relevance" , loads new page, selection goes "date". far found out, not possible solve problem without cookies!? uploaded "jquery-1.11.3.min.js" , "jquery.cookie.js" page.
can start activate cookies button now? how can save cookies option stays after refresh? since 'date' default option need save cookies when people select 'relevance'. code reach goal?
here code use menu:
/** * hier beginnt im jsfiddle der javascript bereich * * @param sortcriteria * name of data-attribute sorting. * @param itemstosort * string selector items sorting. * @param container * container put items. * @returns {function} */ var sortbydataattr = function (sortcriteria, itemstosort, container) { return function () { // grab items sorting. var $collection = $(itemstosort); // sort them , append in container. $collection.sort(function (a, b) { return $(b).data(sortcriteria) - $(a).data(sortcriteria) }).appendto($(container)); }; }, /** * remove class elements , apply current. * * @param current * html node apply class. * @param activeclass * active-state string class. */ highlightactive = function (current, activeclass) { $('.' + activeclass).removeclass(activeclass); $(current).addclass(activeclass); }; // sort 'data-date' @ start. highlightactive('.btn-sort-date', 'btn-sort--active'); sortbydataattr('date', '.item', '.list'); $('.btn-sort-date').on('click', function () { highlightactive(this, 'btn-sort--active'); sortbydataattr('date', '.item', '.list')(); }); $('.btn-sort-relevance').on('click', function () { highlightactive(this, 'btn-sort--active'); sortbydataattr('relevance', '.item', '.list')(); }); // hier endet im jsfiddle der javascript bereich<!-- im jsfiddle startet der html bereich hier --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <aside id="nav_menu-5" class="widget-1 widget-first widget-odd widget widget_nav_menu"> <div class="menu-projects-container"> <ul id="menu-projects" class="menu"> <div style="color:#a4a4a4" class="daterel"> <span class="btn btn-sort-date"><i>date</i></span> <span>|</span> <span class="btn btn-sort-relevance"><i>relevance</i></span> </div> <div class="projects"> <b>projects</b> </div> <div class="list"> <li id="menu-item-649" class="item" data-relevance="11" data-date="2015.6"><a href="http://thomasmedicus.at/brickstone-blues/">brickstone blues</a> <span style="color:#a4a4a4">video</span> <li id="menu-item-649" class="item" data-relevance="7" data-date="2015.5"><a href="http://thomasmedicus.at/copypaste/">copy&paste</a> <span style="color:#a4a4a4">installation</span> <li id="menu-item-649" class="item" data-relevance="6" data-date="2015.4"><a href="http://thomasmedicus.at/zebral-fluids/">zebral fluids</a> <span style="color:#a4a4a4">gif</span> <li id="menu-item-649" class="item" data-relevance="8" data-date="2015.3"><a href="http://thomasmedicus.at/fried-egg-variation/">fried egg variation</a> <span style="color:#a4a4a4">glass</span> </li> <li id="menu-item-649" class="item" data-relevance="8" data-date="2015.2"><a href="http://thomasmedicus.at/bearrr/">bearrr…</a> <span style="color:#a4a4a4">illustration</span> </li> <li id="menu-item-649" class="item" data-relevance="7" data-date="2015.1"><a href="http://thomasmedicus.at/glass-ribbon/">glass ribbon</a> <span style="color:#a4a4a4">glass</span> </li> <li id="menu-item-649" class="item" data-relevance="13" data-date="2014.5"><a href="http://thomasmedicus.at/emulsifier/">emulsifier</a> <span style="color:#a4a4a4">sculpture</span> </li> <li id="menu-item-649" class="item" data-relevance="9" data-date="2014.4"><a href="http://thomasmedicus.at/black-holes/">black holes</a> <span style="color:#a4a4a4">illustration</span> </li> <li id="menu-item-649" class="item" data-relevance="7" data-date="2014.3"><a href="http://thomasmedicus.at/this/">**** this!</a> <span style="color:#a4a4a4">concept</span> </li> <li id="menu-item-649" class="item" data-relevance="10" data-date="2014.2"><a href="http://thomasmedicus.at/heads/">heads</a> <span style="color:#a4a4a4">mask</span> </li> <li id="menu-item-649" class="item" data-relevance="5" data-date="2014.1"><a href="http://thomasmedicus.at/staining-glass/">staining glass</a> <span style="color:#a4a4a4">glass</span> </li> <li id="menu-item-649" class="item" data-relevance="11" data-date="2013.2"><a href="http://thomasmedicus.at/fishbird/">fish&bird</a> <span style="color:#a4a4a4">flipbook</span> </li> <li id="menu-item-649" class="item" data-relevance="6" data-date="2013.1"><a href="http://thomasmedicus.at/faces/">faces</a> <span style="color:#a4a4a4">sculpture</span> </li> </div> <!-- im jsfiddle geht der html bereich bis hier -->thank support!
if want use cookies, should add following after sortbydataattr('relevance', '.item', '.list')(); :
$.cookie('sortby', 'relevance', {expires:30}); and @ beginning of javascript :
$(document).ready(function() { if ('relevance' == $.cookie('sortby')) { sortbydataattr('relevance', '.item', '.list')(); } else { sortbydataattr('date', '.item', '.list')(); } }); it'll cookie name "sortby" , if value "relevance" it'll sort list accordingly.
Comments
Post a Comment