Make the floating title transition smoother

Previously the floating title would not appear until the real title
scrolled entirely out of view, which was visually distracting.  Now it
appears at the point when its bottom lines up with the real title’s
bottom.  This isn’t perfect yet due to small differences between the
two titles’ layouts, but it’s much closer.

We now need to use visibility: visible|hidden instead of display:
block|none to show and hide the floating title, in order to be able to
retrieve its height while it’s hidden.  It’s important to use that
height because occasionally line wrapping differences make the
floating title shorter than the real title, and we don’t want the real
title to poke out from underneath.

Also fix scrollToRowId to offset by the 4 pixel top margin (like
cdmScrollToArticleId already does), so that it goes back to a point
when the floating title was hidden; and set the right margin on the
floating title so that it’s the same width as the real title and
doesn’t overlap the scroll bar.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>

diff --git a/index.php b/index.php
index 4f2a9a860dd9292e97a77efd0813c71b20c6614c..058e7d8e3396cd4230e2175c192a967a06166c00 100644 (file)
--- a/index.php
+++ b/index.php
@@ -265,7 +265,7 @@
 
        <div id="headlines-wrap-inner" dojoType="dijit.layout.BorderContainer" region="center">
 
-               <div id="floatingTitle" style="display : none"></div>
+               <div id="floatingTitle" style="visibility : hidden"></div>
 
                <div id="headlines-frame" dojoType="dijit.layout.ContentPane"
                                onscroll="headlines_scroll_handler(this)" region="center">

diff --git a/js/viewfeed.js b/js/viewfeed.js
index c319a8ed02e2c40c3ea362841d3680a110696ede..f236e1f7ce37e74b405eb1bac48cdf637d8eb753 100644 (file)
--- a/js/viewfeed.js
+++ b/js/viewfeed.js
@@ -56,7 +56,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                                if (infscroll_req == false) {
                                        $("headlines-frame").scrollTop = 0;
 
-                                       Element.hide("floatingTitle");
+                                       $("floatingTitle").style.visibility = "hidden";
                                        $("floatingTitle").setAttribute("rowid", 0);
                                        $("floatingTitle").innerHTML = "";
                                }
@@ -1532,7 +1532,7 @@ function cdmCollapseArticle(event, id, unmark) {
                        if (row.offsetTop < $("headlines-frame").scrollTop)
                                scrollToRowId(row.id);
 
-                       Element.hide("floatingTitle");
+                       $("floatingTitle").style.visibility = "hidden";
                        $("floatingTitle").setAttribute("rowid", false);
                }
 
@@ -2357,7 +2357,7 @@ function scrollToRowId(id) {
                var row = $(id);
 
                if (row)
-                       $("headlines-frame").scrollTop = row.offsetTop;
+                       $("headlines-frame").scrollTop = row.offsetTop - 4;
 
        } catch (e) {
                exception_error("scrollToRowId", e);
@@ -2402,11 +2402,12 @@ function updateFloatingTitle(unread_only) {
                                        PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, child);
                                }
 
-                               if (child.offsetTop < hf.scrollTop - header.offsetHeight &&
-                                               child.offsetTop + child.offsetHeight - hf.scrollTop > header.offsetHeight)
-                                       Element.show("floatingTitle");
+                               $("floatingTitle").style.marginRight = hf.offsetWidth - child.offsetWidth + "px";
+                               if (header.offsetTop + header.offsetHeight < hf.scrollTop + $("floatingTitle").offsetHeight - 5 &&
+                                   child.offsetTop + child.offsetHeight >= hf.scrollTop + $("floatingTitle").offsetHeight - 5)
+                                       $("floatingTitle").style.visibility = "visible";
                                else
-                                       Element.hide("floatingTitle");
+                                       $("floatingTitle").style.visibility = "hidden";
 
                                return;