Jump to content

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...