# HG changeset patch # User casties # Date 1372068826 -7200 # Node ID b0ed3974efbd8374de7646b3fd1d8c7158724555 # Parent b67bfb9970799e02e5ec0531d52eb2f9b4e93ee0 working on flyout divs. diff -r b67bfb997079 -r b0ed3974efbd css/mpiwg.css --- a/css/mpiwg.css Fri Jun 21 09:06:11 2013 +0200 +++ b/css/mpiwg.css Mon Jun 24 12:13:46 2013 +0200 @@ -1320,6 +1320,28 @@ text-decoration: underline; } +/* + * flyout divs (for webpages) + */ +.flyout { + position: relative; + z-index: 0; +} +.flyout.flying { + background-color: white; + z-index: 10; +} + +.flyout .flyout_open, +.flyout .flyout_close { + position: absolute; + bottom: 0; + right: 0; +} +.flyout .flyout_close { + /* close initially hidden */ + display: none; +} /* * sidebar diff -r b67bfb997079 -r b0ed3974efbd js/mpiwg.js --- a/js/mpiwg.js Fri Jun 21 09:06:11 2013 +0200 +++ b/js/mpiwg.js Mon Jun 24 12:13:46 2013 +0200 @@ -109,7 +109,7 @@ * foldout divs * * foldable: .foldable is ancestor of .fold_head and .fold_body - * that are folded simultaneously. + * all children are folded simultaneously. * * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body * where each pair has a common unique .foldId_xxx. @@ -180,4 +180,28 @@ } }).css('cursor', 'pointer'); }); + + /* + * flyout divs + */ + $('.flyout').each(function () { + var $flyout = $(this); + var parent = $flyout.parent(); + var ph = parent.height(); + var pw = parent.width(); + // size up to parent in folded state + var dh = ph - $flyout.outerHeight(); + if (dh > 0) { + $flyout.height($flyout.height()+dh); + } + $flyout.find('.flyout_open').on('click', function () { + console.debug('flyout click on ', this); + $flyout.addClass('flying'); + $flyout.css('position','absolute'); + $flyout.width(2*pw); + $flyout.height(2*ph); + }).css('cursor', 'pointer'); + + }); + }); \ No newline at end of file