added filter to the list of books by beginner, intermediate, advanced and some js improvements

Author: Michael Lancaster

css/index.css

@@ -1356,6 +1356,7 @@ footer {
 .booksection {
   margin-bottom: 30px;
 }
+
 .booksection #cover {
   float: left;
   position: relative;
@@ -1552,12 +1553,31 @@ a#infos:hover {
 }
 .pythonbooks {
   background-color: transparent;
-  margin: 0 0 30px;
+  margin: 0;
 }
 .pythonbooks > * {
   display: inline;
   margin-right: 10px;
 }
+#filterBy {
+  float: left;
+  overflow: hidden;
+  margin: 0 0 30px;
+}
+#filterBy li {
+  float: left;
+  margin: 0 0 0 10px;
+  list-style: none;
+}
+#filterBy li:first-child {
+  margin-left: 0;
+}
+#filterBy a {
+  color: #eedb59;
+}
+ #filterBy .active {
+  color: #fff;
+}
 /*!
  * Bootstrap Responsive v2.0.4
  *

index.html

@@ -89,13 +89,22 @@ <h4>About us :</h4>
     =========================== -->
     <div class="container">
         <div class="row">
-            <a class="recrutement span12" href="http://www.revolunet.com/recrutement-developpeur-web" target="_blank"> We're hiring talented web developers in Paris, France </a>
             <div class="pythonbooks span12">
                 <p>See also :</p>
                 <a href="http://pythonbooks.revolunet.com/" target="_blank">
                     <img src="./img/logo_pythonbooks.png" alt="Python Books" title="Learn Python for free !" width="100" height="16">
                 </a>
             </div>
+            <a class="recrutement span12" href="http://www.revolunet.com/recrutement-developpeur-web" target="_blank"> We're hiring talented web developers in Paris, France </a>
+            <div class="span12 row-fluid">
+                <p class="span1">Filter by :</p>
+                <ul id="filterBy">
+                    <li><a href="#" class="active all" title="filter books by All">All</a></li>
+                    <li><a href="#" class="beginner" title="filter books by Beginner">Beginner</a></li>
+                    <li><a href="#" class="intermediate" title="filter books by Intermediate">Intermediate</a></li>
+                    <li><a href="#" class="advanced" title="filter books by Advanced">Advanced</a></li>
+                </ul>
+            </div>
         </div>
 
         <!-- ////////// WRAPPER BOOKS -->
@@ -123,23 +132,86 @@ <h4>About us :</h4>
       return (Math.round(Math.random())-0.5); 
     }
 
+    function filterBy() {
+        var // var's sort by
+            active = 'active',
+            btFilterBy = $('#filterBy').find('a'),
+            elBeginner = $('.Beginner'),
+            elIntermediate = $('.Intermediate'),
+            elAdvanced = $('.Advanced'),
+            booksection = $('.booksection');
+
+        // interaction filter by level
+        btFilterBy.on('click', function(e) {
+            e.preventDefault();
+
+            booksection.each(function() {
+                $(this).show();
+            });
+
+            if ( $(this).hasClass('all') ) {
+                booksection.each(function() {
+                    $(this).show();
+                });
+            }
+
+            if ( $(this).hasClass('beginner') ) {
+                booksection.each(function() {
+                    if ( ! $(this).hasClass('Beginner') ) {
+                        $(this).fadeOut('fast');
+                    }
+                });
+            }
+
+            if ( $(this).hasClass('intermediate') ) {
+                booksection.each(function() {
+                    if ( ! $(this).hasClass('Intermediate') ) {
+                        $(this).fadeOut('fast');
+                    }
+                });
+            }
+
+            if ( $(this).hasClass('advanced') ) {
+                booksection.each(function() {
+                    if ( ! $(this).hasClass('Advanced') ) {
+                        $(this).fadeOut('fast');
+                    }
+                });
+            }
+
+            btFilterBy.removeClass(active);
+            $(this).addClass(active);
+        });
+    }
+
     $(document).ready(function() {
-      $.getJSON('./issues.json?' + Math.random(), function(data) {
-        var template = $('#booktpl').html();
-        data.books.sort(randOrd);
-        var html = Mustache.to_html(template, data);
-        $('#issueswrap').html(html);
-      });
-      $('#jsinfos').hide();
-      $('a.#infos').on('click', function(){
-          $('#jsinfos').slideToggle();
-      });
+        // get the data and compile into the html template
+        $.getJSON('./issues.json?' + Math.random(), function(data) {
+            var template = $('#booktpl').html(),
+                html = Mustache.to_html(template, data),
+                issuesWrap = $('#issueswrap');
+
+            data.books.sort(randOrd);
+            issuesWrap.html(html);
+
+            filterBy();
+        });
+
+        var // var's info
+            jsInfos = $('#jsinfos'),
+            btInfo = $('a.#infos');
+
+        // interaction show more info about it
+        jsInfos.hide();
+        btInfo.on('click', function(){
+          jsInfos.slideToggle();
+        });
     });
     </script>
 
     <script id="booktpl" type="text/template">
         {{#books}} 
-         <div class="span4 booksection">
+         <div class="span4 booksection {{level}}">
           <a  target="_blank" href="{{url}}">
            <div class="view"> READ </div>
            <div id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;">
@@ -153,8 +225,6 @@ <h3><a href="{{authorUrl}}" target="_blank">{{author}}</a></h3>
         {{/books}}
     </script>
 
-    
-
     <script type="text/javascript">
         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));