Project type
Experiment with jQuery, CSS3
w/Blueprint
Opinion?
Leave a comment! Duplicating the iTunes Smart Playlist Form with jQuery & CSS3
Okay, so this might rank up there as one of the strangest things I’ve wanted to want to experiment with, but I thought I’d take a crack at duplicating the Smart Playlist in iTunes using jQuery, CSS3, and Blueprint. But I’m doing it and so far, so good.
Smart Playlist in iTunes
Smart Playlist with CSS3 and jQuery
Didn’t take very long to get the basic’s down, though there’s more to go to make things really polished. Plus/Minus buttons are working; Expand (if that’s what it’s called) does nothing for now. Hopefully I’ll have more updates soon. Feel free to chime in.
Here’s the JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /* ----------------------------------------------- iTunes Smart Playlist (functions) an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ $(function() { var counter = 0; checkChildCount() $('.rule').live( 'click', function(e){ switch($(e.target).attr("class")){ case 'plus': counter++; var newItem = $(this).clone(); newItem.insertAfter(this).attr('id', 'rule' + counter); $(':input','#rule' + counter) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); break; case 'minus': $(this).remove(); break; case 'minus disabled': break; case 'expand': break; } checkChildCount(); } ); function checkChildCount(){ if($("#rule-group").children().size() >= 2){ $("#rule-group .rule .minus").removeClass("disabled"); } else { $("#rule-group .rule .minus").addClass("disabled"); } } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /* ----------------------------------------------- iTunes Smart Playlist an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ /* wrapper */ #smart-playlist {-moz-border-radius:4px 4px 0 0;-moz-box-shadow:0px 4px 10px #999;-webkit-border-radius:4px 4px 0 0;-webkit-box-shadow:0px 4px 10px #999;background:#ededed;border:1px solid #98999c;border-radius:4px 4px 0 0;box-shadow:0px 4px 10px #999;font-family: "HelveticaNeue", Helvetica, Arial, Sans-serif;font-size:110%;margin-bottom:1em;} #rule-header {background: #a8a8a8;background: -moz-linear-gradient(top, #a8a8a8 0%, #d8d8d8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(100%,#d8d8d8));background: -webkit-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -o-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -ms-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#d8d8d8',GradientType=0 );background: linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);border-bottom:1px solid #515151;font-weight:500;padding:.2em;text-align:center;text-shadow:1px 1px 1px #ddd;} #rule-group {-moz-box-shadow:inset 0px 0px 4px #999;-webkit-box-shadow:inset 0px 0px 4px #999;background:#e5e5e5;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0px 0px 4px #999;margin:1em;} #rule-group input, #rule-group select {width:13em;} #rule-group .plus, #rule-group .minus, #rule-group .expand {background:url(../../../images/iTunes-buttons.png) 0 0 no-repeat;display:inline-block;font-size:0;height:23px;margin:-4px 2px 0;width:22px;vertical-align:middle;text-indent:-9999px;} /* #rule-group .plus {background-position:-34px -3px;} #rule-group .minus {background-position:-34px -3px;} #rule-group .expand {background-position:-34px -3px;} */ #rule-group .plus {background-position:-34px -37px;} #rule-group .minus {background-position:-4px -37px;} #rule-group .minus.disabled {background-position:-4px -3px;} #rule-group .expand {background-position:-63px -37px;} .minus.disabled {color:#999;cursor:default;} .rule {padding:.75em;position:relative;} .rule a, .rule input, .rule select {margin:0 .5em} .rule a {text-decoration:none;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="smart-playlist">
<div id="rule-header"> Smart Playlist </div>
<form>
<div id="rule-group">
<div class="rule" id="rule">
<select id="select">
<option value="Album">Album</option>
<option value="Album Artist">Album Artist</option>
</select>
<select id="select">
<option value="contains">contains</option>
<option value="does not contain">does not contain</option>
<option value="is">is</option>
<option value="is not">is not</option>
</select>
<input type="text" id="text" />
<a href="#" class="minus">Minus</a> <a href="#" class="plus">Plus</a> <a href="#" class="expand">Expand</a> </div>
</div>
</form>
</div>
</div> |
[...] [ css, productivity ] Duplicating the iTunes Smart Playlist Form with jQuery & CSS3 » Experiment results Week 27 (2011) Lab ideas? Have ideas for experiments?Tell me! Posted in [...]
[...] Enhancing iTunes smart playlist like form Experiment duplicating a form in iTunes with CSS3 and jQuery. [...]
very nice . i’ll try to put this into something more useful for one of my clients who’s a big fan of apple designs . i have also used the itune slideshow clone found here in the project :
http://youhack.me/2011/08/11/create-an-itunes-like-banner-rotatorslideshow-with-jquery/
Thanks, Johny!
Took a look at your iTunes slideshow clone. Also nice. I might have to try recreating that myself – before I get tempted to mooch what you’ve already done!