提交 | 用户 | 时间
|
58d006
|
1 |
/** |
A |
2 |
<b>Auto content padding on fixed navbar & breadcrumbs</b>. |
|
3 |
Navbar's content and height is often predictable and when navbar is fixed we can add appropriate padding to content area using CSS. |
|
4 |
|
|
5 |
But when navbar is fixed and its content size and height is not predictable we may need to add the necessary padding to content area dynamically using Javascript. |
|
6 |
|
|
7 |
It's not often needed and you can have good results using CSS3 media queries to add necessary paddings based on window size. |
|
8 |
*/ |
|
9 |
(function($ , undefined) { |
|
10 |
|
|
11 |
var navbar = $('.navbar').eq(0); |
|
12 |
var navbar_container = $('.navbar-container').eq(0); |
|
13 |
|
|
14 |
var sidebar = $('.sidebar').eq(0); |
|
15 |
|
|
16 |
var main_container = $('.main-container').get(0); |
|
17 |
|
|
18 |
var breadcrumbs = $('.breadcrumbs').eq(0); |
|
19 |
var page_content = $('.page-content').get(0); |
|
20 |
|
|
21 |
var default_padding = 8 |
|
22 |
|
|
23 |
if(navbar.length > 0) { |
|
24 |
$(window).on('resize.auto_padding', function() { |
|
25 |
if( navbar.css('position') == 'fixed' ) { |
|
26 |
var padding1 = !ace.vars['nav_collapse'] ? navbar.outerHeight() : navbar_container.outerHeight(); |
|
27 |
padding1 = parseInt(padding1); |
|
28 |
main_container.style.paddingTop = padding1 + 'px'; |
|
29 |
|
|
30 |
if(ace.vars['non_auto_fixed'] && sidebar.length > 0) { |
|
31 |
if(sidebar.css('position') == 'fixed') { |
|
32 |
sidebar.get(0).style.top = padding1 + 'px'; |
|
33 |
} |
|
34 |
else sidebar.get(0).style.top = ''; |
|
35 |
} |
|
36 |
|
|
37 |
if( breadcrumbs.length > 0 ) { |
|
38 |
if(breadcrumbs.css('position') == 'fixed') { |
|
39 |
var padding2 = default_padding + breadcrumbs.outerHeight() + parseInt(breadcrumbs.css('margin-top')); |
|
40 |
padding2 = parseInt(padding2); |
|
41 |
page_content.style['paddingTop'] = padding2 + 'px'; |
|
42 |
|
|
43 |
if(ace.vars['non_auto_fixed']) breadcrumbs.get(0).style.top = padding1 + 'px'; |
|
44 |
} else { |
|
45 |
page_content.style.paddingTop = ''; |
|
46 |
if(ace.vars['non_auto_fixed']) breadcrumbs.get(0).style.top = ''; |
|
47 |
} |
|
48 |
} |
|
49 |
} |
|
50 |
else { |
|
51 |
main_container.style.paddingTop = ''; |
|
52 |
page_content.style.paddingTop = ''; |
|
53 |
|
|
54 |
if(ace.vars['non_auto_fixed']) { |
|
55 |
if(sidebar.length > 0) { |
|
56 |
sidebar.get(0).style.top = ''; |
|
57 |
} |
|
58 |
if(breadcrumbs.length > 0) { |
|
59 |
breadcrumbs.get(0).style.top = ''; |
|
60 |
} |
|
61 |
} |
|
62 |
} |
|
63 |
}).triggerHandler('resize.auto_padding'); |
|
64 |
|
|
65 |
$(document).on('settings.ace.auto_padding', function(ev, event_name, event_val) { |
|
66 |
if(event_name == 'navbar_fixed' || event_name == 'breadcrumbs_fixed') { |
|
67 |
if(ace.vars['webkit']) { |
|
68 |
//force new 'css position' values to kick in |
|
69 |
navbar.get(0).offsetHeight; |
|
70 |
if(breadcrumbs.length > 0) breadcrumbs.get(0).offsetHeight; |
|
71 |
} |
|
72 |
$(window).triggerHandler('resize.auto_padding'); |
|
73 |
} |
|
74 |
}); |
|
75 |
|
|
76 |
/**$('#skin-colorpicker').on('change', function() { |
|
77 |
$(window).triggerHandler('resize.auto_padding'); |
|
78 |
});*/ |
|
79 |
} |
|
80 |
|
|
81 |
})(window.jQuery); |