views:

434

answers:

1

Hello,

I'm using the filterable portfolio script by new media campaigns ( http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours ) which works fine when using normal links in a unordered list. I would like to offer the options in a selectbox though. Could anyone point me in the right direction?

edit: I'd like to use the filter by selecting options from a selectbox like so

<select id="someid">
  <option selected value="#All">All</option>            
  <option value="#Design">Design</option>      
  <option value="#Political">Political</option>
  <option value="#Business">Business</option>
</select> 
+1  A: 

you do have a change-event on your select. in this handler you need to call the same routine as clicking on the link would!

but: raising change-event is browser-depended. one may call it immediately, others when you blur!

combine the idea with filterable docu:

$(document).ready(function(){
 $('portfolio-list').filterable();
 $('#linkID').click(function(){
  $('portfolio-list').trigger('filter', [ '#jquery' ]);
 });
});

eg

var myFilterable = $('#myFilterable').filterable();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var tag = $(element).attr('value'); // jQuery variant
    //var tag = element.value; // html variant
    //var tag = $(element).val(); // should work either!
    // TODO: create an array with the variable value
    myFilterable.trigger('filter', /* array of tag(s) you want to show*/);
});
Andreas Niedermair
Thanks but I can't get it to work yet.. working from the example I provided in my initial question, should the array look like myFilterable.trigger('filter', new Array('#all','#Design','#Political','#Business') ); or differently?And what should I do with "// TODO ... get id/class and hand it to your component-call"
Taeke
have a look at my update: it (or the docu) tells you how the array should look like! the `TODO` is eg. `element.attr('id')`
Andreas Niedermair
Cheers Andreas! after changing element.attr to var tag = $(element).attr('value');it worked
Taeke
aahhh ... thanks ... mixed up jQuery and normal javaScript :) updated!
Andreas Niedermair