TheBnl 0 Posted September 11, 2012 Report Share Posted September 11, 2012 Hey, I got some problems and i cant figure out whats wrong,i have a menu where you can filter the content displayed on the right.It works but it uses some weird animations and i can't figure out what's wrong.I use Quicksand for the filtering and the jQuery Easing Plugin for the animations. The link:http://bram-de-leeuw.nl/test/portfolio/index.html Thanks in advance! Quote Link to post Share on other sites
TheBnl 0 Posted September 17, 2012 Author Report Share Posted September 17, 2012 this is the script: $(document).ready(function() { // get the action filter option item on page load var $filterType = $('#filterOptions li.active a').attr('class'); // get and assign the ourHolder element to the// $holder varible for use later var $holder = $('ul.content'); // clone all items within the pre-assigned $holder element var $data = $holder.clone(); // attempt to call Quicksand when a filter option// item is clicked$('#filterOptions li a').click(function(e) { // reset the active class on all the buttons $('#filterOptions li').removeClass('active'); // assign the class of the clicked filter option // element to our $filterType variable var $filterType = $(this).attr('class'); $(this).parent().addClass('active'); if ($filterType == 'all') { // assign all li items to the $filteredData var when // the 'All' filter option is clicked var $filteredData = $data.find('li'); } else { // find all li elements that have our required $filterType // values for the data-type element var $filteredData = $data.find('li[data-type=' + $filterType + ']'); } // call quicksand and assign transition parameters $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }); return false;});}); Related HTML: <ul id="content" class="content seven column push-five"> <li data-type="ontwerpen" data-id="id-1" class="twelve"> <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a> </li> <li data-type="interactief" data-id="id-2" class="twelve"> <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a> </li> <!-- ETC.... --></ul> Quote Link to post Share on other sites
TheBnl 0 Posted September 18, 2012 Author Report Share Posted September 18, 2012 I use a responsive lay-out (Foundation: http://foundation.zurb.com/) and i think that is the problem.On Github there are some fixes but non of them seem to work,any ideas on how to solve this problem? Quote Link to post Share on other sites
smiles 7 Posted September 18, 2012 Report Share Posted September 18, 2012 Follow Quicksand's homepage http://razorjack.net/quicksand/, I see one difference - Your div that contains <ul id='content' ...> also contains filterOptions, while in Quicksand's homepage, filterOptions place outside that div - That div also has its width nearly two times larger than <ul id='content' ...> (I think object will based on width of object's container to calculate the offset for animation) Quote Link to post Share on other sites
TheBnl 0 Posted September 18, 2012 Author Report Share Posted September 18, 2012 Ahhh Thanks! i needed that other pair of eyes!I fixed it by putting the <ul> in a <div> simple as that! Many thanks! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.