incubator-bloodhound-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Apache Bloodhound" <bloodhound-...@incubator.apache.org>
Subject Re: [Apache Bloodhound] #65: Sticky panels in Bloodhound theme
Date Fri, 01 Jun 2012 07:16:13 GMT
#65: Sticky panels in Bloodhound theme
--------------------------+-----------------------
  Reporter:  olemis       |      Owner:  olemis
      Type:  enhancement  |     Status:  accepted
  Priority:  major        |  Milestone:
 Component:  ui design    |    Version:
Resolution:               |   Keywords:  bootstrap
--------------------------+-----------------------

Comment (by olemis):

 ==== Instructions to setup sticky panels ====

 Markup needed to insert sticky panels looks like shown below (assuming
 ''theme.js'' is included , included ootb if bloodhound theme is in use) :

 {{{
 #!xml

 <div class="stickyBox">
   <div id="panelId" class="stickyStatus">
     <div class="whitebox"></div>
     <!-- Panel contents -->
     <div class="stickyEndMark"></div>
   </div>
 </div>
 <script type="text/javascript">
   setup_sticky_panel('#panelId');
 </script>

 }}}

 ==== Sticky panel explained ====

 Panel `.stickyStatus` is the most important , as it contains the contents
 of sticky panel and actually remains fixed at `top=0` on page scroll.
 `.stickyBox` is a wrapper . It's goal is to substitute `.stickyStatus`
 when it becomes sticky, otherwise contents below will jump abruptly to the
 top. On the other hand `.whitebox` provides white background to hide
 contents moving below sticky panel. Nonetheless sometimes (e.g. floating
 elements) panel contents are rendered outside of the box and are visible ,
 thus creating an annoying overlapping effect . The goal of using
 `.stickyEndMark` is to control this kind of overflow . Code inside
 `script` tag at the bottom selects sticky element and installs scroll
 handlers , etc ... So far in each call it's recommended to select panels
 by ''ID'' or panels aligned in a row .

 '''PS:''' It's possible to simplify markup in templates by inserting all
 those ''DIV''s (except `.stickyStatus`) dynamically under the hood . In
 that case ''Genshi templates'' will be more readable and look better .
 Nonetheless , if this is a good idea I suggest to create a new ticket
 (enhancement) for this task. It may include also smarter behavior for use
 cases when more complex selectors are needed.

 '''PS:''' thnx jdreimman ... ''':)'''

-- 
Ticket URL: <https://issues.apache.org/bloodhound/ticket/65#comment:3>
Apache Bloodhound <https://issues.apache.org/bloodhound/>
The Apache Bloodhound (incubating) issue tracker

Mime
View raw message