Sticky floating headers inside of overflowing divs

In our latest project, we have some pretty sweet designs that have headers that drift down in the page as the user scrolls. But at some point the header will hit the end of the containing div and need to stop. (We have a date header for each transaction. The header stops floating once the next day's header is met in the scroll).

We had some luck using jquery plugin based on a good tutorial at Design Woop mixed with this updated Gist

But this fell apart when trying to use it with a div that had overflow set to 'auto' or 'scroll'. Since the plugin was calculating location based on document not the div element. Plus the plugin operated on single elements not on jquery objects.

CSS Looks like:
div.scroll {
        background-color: #eee;
        width: 600px;
        height: 200px;
        overflow:scroll;
      }

      .header {
        float: left;
        height: 30px;
        width: 600px;
        background-color: black;
        color: white;
        font-family: 'Times New Roman', serif;
        font-size: 20px;
      }

And html markup looks like (i've removed the extra text so it many not flow based on screen size and such).

html:
<div class="scroll">
  <div class="header" id="nowrapper">This is a header</div>
  <br class="clear">
   text here
  <div class="inside">
    <div class="header" id="lower">Lower Header</div>
    <br class="clear">
    more text here
  </div>
</div>

I couldn't find the plugin anywhere so I dumped it up in: https://github.com/lecar-red/jquery-stickyfloat and added support for floating inside a overflowed div.

To make that page work, after downloading updated stickfloat then add this javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stickyfloat.js"></script>
    <script type="text/javascript">
      $(function() { $(.header).stickyfloat({}) } );
    </script>

I'm hoping to put a tutorial but that will need to wait until another day. You can see how to use it in: https://github.com/lecar-red/jquery-stickyfloat/blob/master/overflow.html

__END__

Comments

Post a Comment

Popular posts from this blog

Changing Dancer::Plugin::Ajax's content type

Dancer does lots of great things. It has a nice clean way to define routes to handle AJAX routes using the plugin Dancer::Plugin::Ajax . ajax routes are defined in a clear way: ajax '/stuff' => sub { # do work and return }; This plugin technique allows for clear way to separate between ajax and other types of actions for the same route. ajax '/stuff' => sub { # do ajax-y stuff here }; get '/stuff' => sub { # handle html response }; Unfortunately, the one negative with Dancer::Plugin::Ajax is that is assumes all responses will be XML. A quick fix is to manually set the content type in each ajax handler. ajax '/stuff' => sub { content_type('application/json'); # do work }; or add set it as a general option in your main before hook or in each prefix route handler like: package WebApp; hook before => sub { if ( request->is_ajax ) { content_type('application/json'); } };
Read more

BootstrapX clickover

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse
Read more

2 ways to get SQLite to put dates into columns

2 ways to get SQLite to put dates into a column. insert into mytable values( null, datetime('now') ); insert into mytable values( null, strftime('%s', 'now')); The first one inserts a row somewhat like this: 1|2009-03-10 18:47:46 The second inserts an unix timestamp: 2|1236711411 It might be best to use that unix timestamp with an integer column type for dates since SQLite doesn't support a datetime one. It makes comparisons and ordering much easier: select * from dt where lu > strftime('%s', '2009-03-10'); Output of: id|lu 6|1236643200 2|1236711411 3|1236711516 4|1236711518 5|1236711519 But the formatting is pretty ugly. :-/ Hey what about formatting it within the select with the SQLite datetime function: select id, datetime(lu, 'unixepoch') lu from dt order by lu; id|lu 6|2009-03-10 00:00:00 2|2009-03-10 18:56:51 3|2009-03-10 18:58:36 4|2009-03-10 18:58:38 5|2009-03-10 18:58:39 Better but having to add that to each select is kin
Read more