Improved scrolling roboustness.

index.html

@@ -5,8 +5,10 @@
        <title>ScrollMagnifyer</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
+       <!--
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
+       -->
        <script src="utils.js"></script>
        <script src="studylist.js"></script>
        <script src="listPeek.js"></script>
@@ -48,16 +50,13 @@
          <div class="metadata">
             <div class="abstract lead"></div>
             <div class="buttons">
-               <button class="btn btn-info"><i class="icon-info-sign"> </i> Mer metadata</button>
-               <button class="btn btn-success"><i class="icon-ok-sign"> </i> Velg studie</button>
+               <button class="btn btn-info"><i class="icon-info-sign"></i> Mer metadata</button>
+               <button class="btn btn-success"><i class="icon-ok-sign"></i> Velg studie</button>
             </div>
          </div>
       </div>
       <script>
          load_data();
-         $(window).resize(function() {
-            build_list();
-         });
       </script>
    </body>
 </html>

listPeek.js

@@ -3,13 +3,14 @@ var centerOfHeadline = 0;
 var focusedListElement;
 var target_top = 0;
 var scrollVal;
+var currently_selected_element = null;
 
 var initialize_list_peek = function() {
     target_top = $('#content').position().top;
     $('#target').css({top: target_top});
     horizontalCenter = Math.floor(window.innerWidth/2);
     centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
-    set_selected_element($('#studies_list li:first-child').get());
+    set_selected_element();
 };
 
 var register_event_handlers = function() {
@@ -33,9 +34,14 @@ var register_event_handlers = function() {
     $('#studies_list li').click(function() {
         set_selected_element($(this).get());
     });
+
+    $(window).resize(function() {
+        set_selected_element(currently_selected_element);
+    });
 };
 
 var show_expanded_info = function() {
+    console.log("expanding");
     var listElem = $('#studies_list li.selected');
     $('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
         $('#target').animate({height: listElem.height()}, 'fast', function() {
@@ -60,17 +66,19 @@ var find_and_select_element = function() {
 };
 
 var set_selected_element = function (element) {
+    if (!element) {
+        element = $('#studies_list li:first-child').get();
+    }
     $('#expander:visible').slideUp();
     $('ul#studies_list li').removeClass("selected");
 
     if (element) {
         var listElem = $(element).closest('li');
-
+        currently_selected_element = listElem;
         if (listElem.is("LI")) {
             listElem.addClass('selected');
             scrollVal = listElem.offset().top - $('#studies_list').position().top;
-            //debounce(show_expanded_info, 500, false)();
-            show_expanded_info();
+            debounce(show_expanded_info, 500, false)();
         }
     } else {
         $('#expander').hide();

utils.js

@@ -39,7 +39,7 @@ inScroll = false;
                 } else {
                     inScroll = true;
                     evt.type = 'scrollstart';
-                    jQuery.event.handle.apply(_self, _args);
+                    $(this).trigger(evt.type, _args);
                 }
 
                 timer = setTimeout( function(){
@@ -78,11 +78,10 @@ inScroll = false;
                         inScroll = false;
                         timer = null;
                         evt.type = 'scrollstop';
-                        jQuery.event.handle.apply(_self, _args);
+                        $(this).trigger(evt.type, _args);
 
                     }, special.scrollstop.latency);
                 }
-
             };
 
             jQuery(this).bind('scroll', handler).data(uid2, handler);
@@ -92,6 +91,4 @@ inScroll = false;
             jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
         }
     };
-
 })();
-