Jump to content

MediaWiki:Vector-2022.js: Difference between revisions

From Climbopedia
m minor code cleanup - put bg overlay outside of the body wrapper
adjustment of both overlays, reformatted
Line 1: Line 1:
$(function() {
$(function() {
     // create body overlay
     // Wrap all body children to get the body size
     $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');
     $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');


     // create object just for backgrounds
     // Background body overlay (configuration finished in Vector-2022.css)
     $('body').prepend('<div class="custom-bg-overlay"></div>');
     $('body').prepend('<div class="custom-bg-overlay"></div>');
     $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
     $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
Line 9: Line 9:
                                 'pointer-events': 'none'});
                                 'pointer-events': 'none'});


    // Header background overlay (configuration finished in Vector-2022.css)
     $('.vector-header-container').prepend('<div class="custom-header-container-overlay"></div>');
     $('.vector-header-container').prepend('<div class="custom-header-container-overlay"></div>');
     $('.custom-header-container-overlay').css({
     $('.custom-header-container-overlay').css({
         'height': $('.vector-header-container').height(),
         'height': $('.vector-header-container').height(),
         'position': 'absolute'});
         'position': 'absolute'},
        'z-index': '-1');


     const ro = new ResizeObserver(([entry]) => {
     // Update on window resize
    $(window).on('resize', function() {
         $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
         $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
    });
        $('.custom-header-container-overlay').height($('.vector-header-container').height());
 
    ro.observe($('.mw-body-wrapper')[0]);
});
});

Revision as of 05:59, 9 November 2025

$(function() {
    // Wrap all body children to get the body size
    $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');

    // Background body overlay (configuration finished in Vector-2022.css)
    $('body').prepend('<div class="custom-bg-overlay"></div>');
    $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
                                 'position': 'absolute',
                                 'pointer-events': 'none'});

    // Header background overlay (configuration finished in Vector-2022.css)
    $('.vector-header-container').prepend('<div class="custom-header-container-overlay"></div>');
    $('.custom-header-container-overlay').css({
        'height': $('.vector-header-container').height(),
        'position': 'absolute'},
        'z-index': '-1');

    // Update on window resize
    $(window).on('resize', function() {
        $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
        $('.custom-header-container-overlay').height($('.vector-header-container').height());
});