{"id":2480,"date":"2009-04-01T06:10:20","date_gmt":"2009-04-01T13:10:20","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2480"},"modified":"2009-04-01T06:10:20","modified_gmt":"2009-04-01T13:10:20","slug":"filtering-blocks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/filtering-blocks\/","title":{"rendered":"Filtering Blocks"},"content":{"rendered":"

\"\"<\/p>\n

One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different “reason” why it’s on special. Perhaps it’s discontinued, perhaps its special pricing, perhaps it’s free shipping. Originally they wanted a special page built for a new type of discount: “rollback pricing”. We argued that in general, a visitor on the web doesn’t really care why<\/strong> a product is on sale, just that it is, and that it may be of disservice to split up the specials page into different pages. <\/p>\n

Instead, we compromised on leaving the specials page as a single page, but allowing the products within to be viewed all at once, or filtered<\/strong> by the type of special that it is. A little jQuery is always up for the job!<\/p>\n

 <\/p>\n

View Demo<\/a>   Download Files<\/a><\/p>\n

 <\/p>\n

<\/p>\n

The Markup<\/h3>\n

Each block has a wrapping div. It has one class that it shares with all other blocks for common styling and a class unique to its “type”. Div’s don’t have href elements, but they can have rel attributes, which I used to store a URL. In the demo, div clickablility isn’t implemented, but the code is just commented out in the JavaScript, so you can see how to make that happen there.<\/p>\n

<div class=\"discounted-item reduced\" rel=\"\/store\/catalog\/Dryline_Markers-47-1.html\">\r\n\r\n    <img src=\"images\/discountthumb-streamliner.jpg\" alt=\"streamliner\" \/>\r\n    \r\n    <div class=\"reasonbar\">\r\n        <div class=\"prod-title\">Streamliner Field Chalkers<\/div>\r\n        <div class=\"reason\">Rollback Pricing<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"discount-bar\">\r\n        Price lower than catalog. Save $30!\r\n    <\/div>\r\n\r\n<\/div><\/code><\/pre>\n
The “filtering” menu is just a series of links. Each link has an ID that matches the class of the type it intends to filter by:<\/p>\n
<p id=\"catpicker\">\r\n<a href=\"#\" id=\"allcat\" class=\"current\">VIEW ALL<\/a> | \r\n<a href=\"#\" id=\"reduced\" class=\"filter\">Rollback Pricing<\/a> | \r\n<a href=\"#\" id=\"freeshipping\" class=\"filter\">Free Shipping<\/a> | \r\n<a href=\"#\" id=\"discontinued\" class=\"filter\">Closeout<\/a> | \r\n<a href=\"#\" id=\"webonly\" class=\"filter\">Web Only<\/a>\r\n<\/p><\/code><\/pre>\n
The CSS<\/h3>\n
There is nothing too tricky going on in the CSS, but I’ll drop it in here just for good measure.<\/p>\n
*                           { margin: 0; padding: 0; }\r\nhtml                        { overflow-y: scroll; }\r\nbody                        { font: 12px Georgia; }\r\n\r\n#page-wrap                  { width: 690px; margin: 20px auto; }\r\n\r\nh1                          { font: 30px Georgia; margin: 0 0 10px 0;  }\r\n\r\n.discounted-item            { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer;\r\n                              height: 79px; }\r\n\r\n.discount-bar               { padding: 10px 0 10px 150px; font: italic 18px Georgia, Serif; }\r\n\r\n.reasonbar                  { padding: 4px 0 4px 150px; overflow: hidden;\r\n                              width: 540px; color: white; }\r\n                 \r\n.prod-title                 { width: 49%; float: left; font: bold 17px Helvetica, Sans-Serif; }\r\n.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; \r\n                              letter-spacing: 2px; padding: 0 5px 0 0; }\r\n                              \r\n.discounted-item img        { position: absolute; top: 0; left: 0; }\r\n\r\n.reduced                    { border: 2px solid #A34427; }\r\n.reduced .reasonbar         { background: #A34427; }\r\n.reduced .discount-bar      { color: #A34427; background: white; }<\/code><\/pre>\n
Random things of note:<\/p>\n