js filter for content on page (need it done in 1 day)
Budget: £20 – £250 GBP
I need a filter built which will filter content(divs), the content is not important but there needs to be the following:
- filters should be toggle type filters where you can select more than one and if you click all it will remove unselect the other filters.
- filters need to contain their value via a data attribute which should be checked by the code to see which filter has been selected.
- first set of filters are called 'type' and have the following filters: all, mandatory, incentive and bonus.
- second set of filters are called 'categories' with the following filters: all, test1, test2, test3, test4.
- both filters work seperately to each other checking for different tags on the content div.
- filter tags should be placed in the class element on the content divs for easy extraction.
- selecting filters should update the url (without a page reload) so that if the user refreshes the page the same filters are selected on page load. This also allows the user to copy the url so that preselected filters can be linked directly from other pages.
- we also need a sort custom drop down with custom styling not default dropdown HTML!!, it should be possible to sort the content by different options. Sorting will respect whatever filters are also currently active. Default sort order should be newest to oldest.
- Possible sort options are: Newest-oldest (set a random time stamp on each element as data attribute for this) – default, Oldest-newest (set a random time stamp on each element as data attribute for this), Alphabetical (add a data attribute with random names to organise them), Most progress (set a data attribute with a number between 1-100 100 being the highest and 1 the lowest), Least progress (set a data attribute with a number between 1-100 100 being the highest and 1 the lowest).
- please do using jquery
- filters should be toggle type filters where you can select more than one and if you click all it will remove unselect the other filters.
- filters need to contain their value via a data attribute which should be checked by the code to see which filter has been selected.
- first set of filters are called 'type' and have the following filters: all, mandatory, incentive and bonus.
- second set of filters are called 'categories' with the following filters: all, test1, test2, test3, test4.
- both filters work seperately to each other checking for different tags on the content div.
- filter tags should be placed in the class element on the content divs for easy extraction.
- selecting filters should update the url (without a page reload) so that if the user refreshes the page the same filters are selected on page load. This also allows the user to copy the url so that preselected filters can be linked directly from other pages.
- we also need a sort custom drop down with custom styling not default dropdown HTML!!, it should be possible to sort the content by different options. Sorting will respect whatever filters are also currently active. Default sort order should be newest to oldest.
- Possible sort options are: Newest-oldest (set a random time stamp on each element as data attribute for this) – default, Oldest-newest (set a random time stamp on each element as data attribute for this), Alphabetical (add a data attribute with random names to organise them), Most progress (set a data attribute with a number between 1-100 100 being the highest and 1 the lowest), Least progress (set a data attribute with a number between 1-100 100 being the highest and 1 the lowest).
- please do using jquery