just let know, i'm rookie. try programm function menu-navigation on website. (http://thomasmedicus.at/)
i want visitors on website able sort projects either "date" or "relevance". created image can understand me better: preview
in first image projects sortet relevance. therefor "date" striked trough. when click on stricked trough "date" order of projects (2, 1, 3) changes. happens "relevance" strickt trough , "date" not anymore. of course should work other way round when click on "relevence" again. hope idea!?
i managed create badly programmed script, isnt programmed here striking through:
<html> <head> <style type="text/css"> <!-- body { text-align: left; } #fulldescrip { width: 450px; height: 200px; border: solid #000000 2px; margin: 0 auto; text-align: justify; padding: 20px; } #prodcontainer .products { margin: 10px; border: solid #aaaaaa 1px; width: 100px; height: 100px; } #prodcontainer2 .products { margin: 10px; border: solid #aaaaaa 1px; width: 100px; height: 100px; } --> </style> <script> var rand = math.floor(math.random() * 2);//the number here must total number of products have listed var prod = new array(); prod[0] = "<width='100' height='100'>changed here!"; prod[1] = "<width='100' height='100'>changed again!"; function loadprod(content){ document.getelementbyid('fulldescrip').innerhtml = content; } </script> </head> <body> <div id="fulldescrip"> <script> document.getelementbyid('fulldescrip').innerhtml = prod[rand]; </script> </div> <table id="prodcontainer"> <tr> <td> <div id="prod1" class="products" onclick="loadprod(prod[0])"> button 1 </div> </td> <td> <table id="prodcontainer2"> <tr> <td> <div id="prod2" class="products" onclick="loadprod(prod[1])"> button 2 </div> </td> </body> </html>it awesome if can me here. since no programmer i'm not able on own...
thanks, tom
i think should leave vanilla javascript later , use jquery library make life easier. website using it, don't have adjust anything.
here example of sorting jquery jquery sort elements using data id
all need provide criteria sorting, example above relies on data-attribute, handy kind of functionality.
/** * function returns callback data-attribute based sorting. * * @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 $(a).data(sortcriteria) - $(b).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-weight' @ start. highlightactive('.btn-sort-weight', 'btn-sort--active'); sortbydataattr('weight', '.item', '.list'); $('.btn-sort-weight').on('click', function() { highlightactive(this, 'btn-sort--active'); sortbydataattr('weight', '.item', '.list')(); }); $('.btn-sort-index').on('click', function() { highlightactive(this, 'btn-sort--active'); sortbydataattr('index', '.item', '.list')(); });.btn { text-decoration: line-through;; } .btn-sort--active { text-decoration: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-sort-weight">sort weight</button> <button class="btn btn-sort-index">sort index</button> <ul class="list"> <li class="item" data-index="133" data-weight="5">first - weight: 5 - index: 133</li> <li class="item" data-index="2" data-weight="1">second - weight: 1 - index: 2</li> <li class="item" data-index="87" data-weight="16">third - weight: 16 - index: 87</li> </ul>
Comments
Post a Comment