Awkward jump when filtering with jQuery Quicksand -
i'm working on filterable site using quicksand , jquery. i've set (the imgs generic now). there's set of categories above group of images, , when select category, projects in category should show. filter , show right projects jumps , down in awkward way when filtering - when should easing.
the link http://lllh.dk/filtering/work3.html
part of html:
<div id="content"> <div class="txtdiv"> <h1>a selection of work</h1> <h2>2009-present</h2> </div> <div id="workleft"> <ul class="filteroptions"> <txt> <li class="active"><a href="#" class="all">all</a></li> <li><a href="#" class="graphicdesign">graphic design</a></li> <li><a href="#" class="printmatters">design of printed matters</a></li> <li><a href="#" class="designlanguages">design languages</a></li> <li><a href="#" class="typo">typography , lettering</a></li> <li><a href="#" class="visualidentity">visual identity</a></li> </txt> </ul> </div> <div id="workright"> <ul class="filteroptions"> <txt> <li><a href="#" class="photo">photography</a></li> <li><a href="#" class="camless">cameraless photography</a></li> <li><a href="#" class="co-socialdesign">co-design / social design</a></li> <li><a href="#" class="conceptualdesign">conceptual design</a></li> <li><a href="#" class="criticaldesign">critical design</a></li> </txt> </ul> </div> <div class="workdiv"> <ul class="ourholder"> <li class="item" data-id="id-1" data-type="graphicdesign typo"> <a href="work/braille_calendar.html" onmouseover="document.braille.src='workbuttons/braille2.jpg';" onmouseout="document.braille.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="braille"> </a> </li> <li class="item" data-id="id-3" data-type="camless photo"> <a href="work/braille_calendar.html" onmouseover="document.rapanui.src='workbuttons/braille2.jpg';" onmouseout="document.rapanui.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="rapanui"> </a> </li> <li class="item" data-id="id-2" data-type="graphicdesign"> <a href="work/braille_calendar.html" onmouseover="document.name.src='workbuttons/braille2.jpg';" onmouseout="document.name.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="name"> </a> </li> <li class="item" data-id="id-2" data-type="typo"> <a href="work/braille_calendar.html" onmouseover="document.something.src='workbuttons/braille2.jpg';" onmouseout="document.something.src='workbuttons/braille1.jpg';"> <img src="workbuttons/braille1.jpg" name="something"> </a> </li> </ul> </div> </div> and of css
/* load headline fonts */ @font-face { font-family: 'acpregular'; src: url('acaslonpro-regular-webfont.eot'); src: url('acaslonpro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('acaslonpro-regular-webfont.woff') format('woff'), url('acaslonpro-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'acpbold'; src: url('acaslonpro-bold-webfont.eot'); src: url('acaslonpro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('acaslonpro-bold-webfont.woff') format('woff'), url('acaslonpro-bold-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* page content */ #content { margin-top:75px; position:absolute; width:850px; z-index:0; border-bottom:45px; border-bottom-style:solid; border-bottom-color:#fff; } .txtdiv { width:400px; margin: 0px auto 0px auto; text-align:center; } /* typography */ h1 { font-family:acpbold; letter-spacing:1px; font-size:2em; font-weight:normal; padding:0px; margin:0px; margin-bottom:3px; } h2 { font-family:acpregular; font-size:1.2em; font-weight:normal; padding:0px; margin-top:0px; margin-bottom:15px; } txt { font-family:arial, helvetica, sans-serif; font-size:0.7em; line-height:160%; margin-left:auto; margin-right:auto; } ul { list-style-type: none; padding: 0px; margin: 0px; overflow: auto; } /* work page */ #workleft { width:421px; margin: 0px 8px 0px 0px; text-align:right; float:left; } #workright { width:421px; text-align:left; overflow:hidden; } .workdiv { width:741px; margin: 0px auto 0px auto; margin-top:45px; } /*- portfolio -*/ ul.ourholder { width: 800px; height: 850px; overflow: hidden; } ul.ourholder li.item { width: 247px; height: 164px; float: left; text-align: center; overflow: hidden; } and js..
$(document).ready(function() { // action filter option item on page load var $filtertype = $('.filteroptions li.active a').attr('class'); // , assign portfolio element // $holder varible use later var $holder = $('ul.ourholder'); // clone items within pre-assigned $holder element var $data = $holder.clone(); // attempt call quicksand when filter option // item clicked $('.filteroptions li a').click(function(e) { // reset active class on buttons $('.filteroptions li').removeclass('active'); // assign class of clicked filter option // element our $filtertype variable var $filtertype = $(this).attr('class'); $(this).parent().addclass('active'); if ($filtertype == 'all') { // assign li items $filtereddata var when // 'all' filter option clicked var $filtereddata = $data.find('li'); } else { // find li elements have our required $filtertype // values data-type element var $filtereddata = $data.find('li[data-type~=' + $filtertype + ']'); } // call quicksand , assign transition parameters $holder.quicksand($filtereddata, { duration: 800, easing: 'easeinoutquad' }); return false; }); }); it seems somehow part of layout disrupts easing. in attempt troubleshoot, seems within part above images problem, maybe txtdiv div. if remove of css except applies filter function, easing , filtering works fine.
i know problem. here question: css bubbling while using jquery quicksand
for me works, when change multiple css lines. don't know anymore, maybe can in source: http://www.annagebhardt.de/ (to see effect click on 'projekte' , sub entry)
Comments
Post a Comment