Added fade in/out effects to the live_search.js file. Also fixed some issues which were breaking the feature in IE7.

4 files changed, 40 insertions, 30 deletions

diff --git a/askbot/skins/default/media/js/live_search.js b/askbot/skins/default/media/js/live_search.js
index b94ecf07..0f6b79c3 100644
--- a/askbot/skins/default/media/js/live_search.js
+++ b/askbot/skins/default/media/js/live_search.js
@@ -398,40 +398,43 @@ var liveSearch = function(){
 
     var render_ask_page_result = function(data, text_status, xhr){
         var container = $('#' + q_list_sel);
-        container.children().remove();
-        if (data.length > 5){
-            container.css('overflow-y', 'scroll');
-            container.css('height', '120px');
-        } else {
-            container.css('height', data.length * 24 + 'px');
-            container.css('overflow-y', 'hidden');
-        }
-        $.each(data, function(idx, question){
-            var url = question['url'];
-            var title = question['title'];
-            var answer_count = question['answer_count'];
-            var list_item = $('<h2></h2>');
-            var count_element = $('<span class="item-count"></span>');
-            count_element.html(answer_count);
-            list_item.append(count_element);
-            var link = $('<a></a>');
-            link.attr('href', url);
-            list_item.append(link);
-            title_element = $('<span class="title"></span>');
-            title_element.html(title);
-            link.append(title)
-            container.append(list_item);
+        container.fadeOut(200, function() {
+            container.children().remove();
+            if (data.length > 5){
+                container.css('overflow-y', 'scroll');
+                container.css('height', '120px');
+            } else {
+                container.css('height', data.length * 24 + 'px');
+                container.css('overflow-y', 'hidden');
+            }
+            $.each(data, function(idx, question){
+                var url = question['url'];
+                var title = question['title'];
+                var answer_count = question['answer_count'];
+                var list_item = $('<h2></h2>');
+                var count_element = $('<span class="item-count"></span>');
+                count_element.html(answer_count);
+                list_item.append(count_element);
+                var link = $('<a></a>');
+                link.attr('href', url);
+                list_item.append(link);
+                title_element = $('<span class="title"></span>');
+                title_element.html(title);
+                link.append(title)
+                container.append(list_item);
+            });
+            container.fadeIn();
         });
     };
 
     var render_main_page_result = function(data, text_status, xhr){
         var old_list = $('#' + q_list_sel);
-        var new_list = $('<div></div>');
+        var new_list = $('<div></div>').hide();
         if (data['questions'].length > 0){
             new_list.html(render_question_list(data['questions']));
-            old_list.hide();
+            //old_list.hide();
             old_list.after(new_list);
-            old_list.remove();
+            //old_list.remove();
             //rename new div to old
             new_list.attr('id', q_list_sel);
             render_paginator(data['paginator']);
@@ -442,8 +445,13 @@ var liveSearch = function(){
             render_relevance_sort_tab();
             set_active_sort_tab(sortMethod);
             query.focus();
+            
+            //show new div with a fadeIn effect
+            old_list.fadeOut(200, function() {
+                old_list.remove();
+			            new_list.fadeIn(400);            
+            });
         }
-        //show new div
     }
 
     var try_again = function(){
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 34be550f..9671ec29 100755
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -331,6 +331,7 @@ blockquote {
 
 #question-list {
     float: left;
+    position: relative;
     background-color: #FFF;
     padding: 0;
     width: 100%;
@@ -474,6 +475,7 @@ ul#search-tags {
 
 .short-summary {
     position: relative;
+    filter: inherit;
     padding: 5px 2px 5px 2px;
     border-top: 1px dashed #ccccce;
     overflow: hidden;
diff --git a/askbot/skins/default/templates/macros.html b/askbot/skins/default/templates/macros.html
index d593fec5..0eb0b303 100644
--- a/askbot/skins/default/templates/macros.html
+++ b/askbot/skins/default/templates/macros.html
@@ -528,7 +528,7 @@ poor design of the data or methods on data objects #}
         sortButtonData["{{key_name}}"] = {
             label: "{{label}}",
             asc_tooltip: "{{asc_tooltip}}",
-            desc_tooltip: "{{desc_tooltip}}",
+            desc_tooltip: "{{desc_tooltip}}"
         };
     </script>
 {%- endmacro %}
@@ -645,7 +645,7 @@ poor design of the data or methods on data objects #}
             useCache: true,
             matchInside: true,
             maxCacheLength: 100,
-            delay: 10,
+            delay: 10
     });
     tagAc.decorate($("{{ id }}"));
 {%- endmacro -%}
diff --git a/askbot/skins/default/templates/main_page/tab_bar.html b/askbot/skins/default/templates/main_page/tab_bar.html
index 9189db13..12096a3b 100644
--- a/askbot/skins/default/templates/main_page/tab_bar.html
+++ b/askbot/skins/default/templates/main_page/tab_bar.html
@@ -45,7 +45,7 @@
                 sortButtonData['relevance'] = {
                     asc_tooltip: "{{asc_relevance_tooltip}}",
                     desc_tooltip: "{{desc_relevance_tooltip}}",
-                    label: "{{relevance_label}}",
+                    label: "{{relevance_label}}"
                 };
             </script>
         {% endif %}