// toolbar is now better than ever \!

This commit is contained in:
mMarinetti
2011-11-14 10:19:06 +00:00
parent 9370253d88
commit 177938b784
2 changed files with 16 additions and 12 deletions
+1 -1
View File
@@ -140,7 +140,7 @@ a.module_toggle_all{color: #268CCD;}
.table td span.color_field { font-size:11px; padding:2px 5px; border-radius:3px; text-transform:uppercase; text-shadow:0 1px 0 #fff; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .table td span.color_field { font-size:11px; padding:2px 5px; border-radius:3px; text-transform:uppercase; text-shadow:0 1px 0 #fff; color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
/*toolbarBox*/ /*toolbarBox*/
.toolbarBox { background-color: #F8F8F8; border: 1px solid #CCCCCC; margin-bottom:10px; padding: 10px 0; width:100% !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .toolbarBox { background-color: #F8F8F8; border: 1px solid #CCCCCC; margin-bottom:10px; padding: 10px 0; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.toolbarBox .pageTitle { margin-left:10px; line-height:48px} .toolbarBox .pageTitle { margin-left:10px; line-height:48px}
.toolbarBox .pageTitle h3 {font-size: 2em; font-weight: bold; line-height: 48px; margin: 0; padding: 0;} .toolbarBox .pageTitle h3 {font-size: 2em; font-weight: bold; line-height: 48px; margin: 0; padding: 0;}
.toolbarBox ul.cc_button {float:right;margin:0;padding:0;} .toolbarBox ul.cc_button {float:right;margin:0;padding:0;}
+15 -11
View File
@@ -54,37 +54,41 @@
</script> </script>
{/if} {/if}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
var message = $('.toolbarHead'); var message = $('.toolbarHead');
var view = $(window); var view = $(window);
// bind only if message exists. placeholder will be its parent // bind only if message exists. placeholder will be its parent
view.bind("scroll resize", function(e) view.bind("scroll resize", function(e)
{ {
message.each(function(el){ message.each(function(el){
if (message.length) if (message.length)
{ {
placeholder = $(this).parent(); placeholder = $(this).parent();
if(e.type == 'resize') if(e.type == 'resize')
$(this).css('width', $(this).width()); $(this).css('width', $(this).parent().width());
placeholderTop = placeholder.offset().top; placeholderTop = placeholder.offset().top;
var viewTop = view.scrollTop() + 15; var viewTop = view.scrollTop() + 15;
// here we force the toolbar to be "not fixed" when
if ((viewTop > placeholderTop) && !$(this).hasClass("fix-toolbar")) // the height of the window is really small (toolbar hiding the page is not cool)
window_is_more_than_twice_the_toolbar = view.height() > message.parent().height() * 2;
if (!$(this).hasClass("fix-toolbar") && (window_is_more_than_twice_the_toolbar && (viewTop > placeholderTop)))
{ {
$(this).css('width', $(this).width()); $(this).css('width', $(this).width());
// fixing parent height will prevent that annoying "pagequake" thing
// the order is important : this has to be set before adding class fix-toolbar
$(this).parent().css('height', $(this).parent().height());
$(this).addClass("fix-toolbar"); $(this).addClass("fix-toolbar");
} }
else if ( (viewTop <= placeholderTop) && $(this).hasClass("fix-toolbar")) else if ($(this).hasClass("fix-toolbar") && (!window_is_more_than_twice_the_toolbar || (viewTop <= placeholderTop)) )
{ {
$(this).removeClass("fix-toolbar"); $(this).removeClass("fix-toolbar");
} }
} }
});
}); });
}); // end bind
}); });
</script> </script>