Announcement

Collapse
No announcement yet.

Full (Screen) Width Footer

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [vB5] Full (Screen) Width Footer

    Hi Everyone,

    vBulletin Version: 5.6.1

    Full Width Footer
    I needed to make the footer span the entire screen width while leaving the #wrapper & #outer-wrapper margins in place.

    CSS Code
    The CSS is fairly simple but you could have to adjust the margin values depending on your own site's #wrapper & #outer-wrapper margin settings (left & right). I found fixed margin values gave a better result, without a horizontal scroll bar, rather than trying to use margins set with percentage values. Percentage values never quite gave a perfect fit.

    Mobile Screens
    For mobile screen widths 767px or below you need to set the margins back to zero using a CSS media query.

    Code Location
    Add the code here:
    AdminCP > Styles > Style Manger > (Your Chosen Style) > Edit Templates > CSS Templates > css_additional.css

    Code:
    #footer {
        margin-left: -20px; /* Make footer full width of screen */
        max-width: none; /* Remove width constraint */
    }
    #footer-tabbar {
        margin-right: -40px; /* Make footer full width of screen */
    }
    media (max-width: 767px) {
        #footer {
            margin-left: 0; /* Make footer full width of screen */
        }
        #footer-tabbar {
            margin-right: 0; /* Make footer full width of screen */
        }
    }
    Wide Screens

    Click image for larger version

Name:	footer-wide-screen.png
Views:	240
Size:	33.1 KB
ID:	4441062

    Mobile Screens

    Click image for larger version

Name:	footer-mobile-screen.png
Views:	160
Size:	30.4 KB
ID:	4441063

    Hope this CSS helps someone.

    Aly

  • #2
    Hi Everyone,

    Update to CSS
    An update to this CSS only solution for there were some drawbacks I found over time, with certain screen widths not always calculating correctly.

    JavaScript Solution
    To fix this issue I came up with a JavaScript function that calculates the full screen width every time and modifies the CSS left & right margins to always fit the screen perfectly.

    In this example my left & right margins for the site are 20px each, adding up to 40px total. If you have different margins just adjust the 40px figure in the code to match your site.

    Code:
    // Add in left & right margin (20+20)=40px
    let outerWrapperMargin = (outerWrapperOffset + 40);
    Debounce Function Optional
    The debounce function can be removed if you prefer for speed of redraw.

    The benefit of debounce is a 10ms time delay (or whatever you set) before taking action. This helps by reducing the number of JavaScript calls made. The drawback is sometimes it introduces a fractional redraw delay, so on slower devices your footer can visibly pause (within the normal site margins) before displaying full screen width.

    The JavaScript has to calculate the margin values every time the screen is resized.

    Without the debounce this redraw delay is reduced to give the fastest rendering possible. Simply remove debounce if the redraw is too noticeable.

    Footer Template
    Place this JavaScript into the footer template.

    Code:
    <script type="text/javascript">
    
    // START - Calculate Footer widths to be full screen
    
        function outerWrapperWidth() {
    
            if (window.innerWidth <= 767) {
    
                // Find width of browser screen (#outer-wrapper)
                let outerWrapperOffset = document.getElementById('outer-wrapper').offsetWidth;
    
                // Set margin to offset width
                let outerWrapperMargin = (outerWrapperOffset);
    
                // Find width of footer (#footer)
                let footer = document.getElementById('footer').offsetWidth;
    
                // Difference between #outer-wrapper & #footer widths
                let difference = (outerWrapperMargin - footer);
    
                let halfdifference = (difference / 2)
    
                // Set #footer & #footer-tabbar styles dynamically adjusting for browser width
                document.getElementById('footer').style.marginLeft = (-halfdifference + "px");
                document.getElementById('footer-tabbar').style.marginRight = (-difference + "px");
    
            } else {
    
                // Find width of browser screen (#outer-wrapper)
                let outerWrapperOffset = document.getElementById('outer-wrapper').offsetWidth;
    
                // Add in left & right margin (20+20)=40px
                let outerWrapperMargin = (outerWrapperOffset + 40);
    
                // Find width of footer (#footer)
                let footer = document.getElementById('footer').offsetWidth;
    
                // Difference between #outer-wrapper & #footer widths
                let difference = (outerWrapperMargin - footer);
    
                let halfdifference = (difference / 2)
    
                // Set #footer & #footer-tabbar styles dynamically adjusting for browser width
                document.getElementById('footer').style.marginLeft = (-halfdifference + "px");
                document.getElementById('footer-tabbar').style.marginRight = (-difference + "px");
    
            }
    
        }
    
        // Function (dbounce) take resize action only after window resize completed
        // (Time delay 10ms) a compromise between reducing number of JS calls & smoothness of action
        function debounce(func) {
    
            let timer;
    
            return function(event) {
    
                if (timer) clearTimeout(timer);
                timer = setTimeout(func, 10, event);
    
            };
    
        }
    
        // On document loaded event
        document.addEventListener('DOMContentLoaded', function() {
    
            // Calculate #footer width
            outerWrapperWidth();
    
        });
    
    
        // On window resize event
        window.addEventListener('resize', debounce(function() {
    
            // Calculate #footer width
            outerWrapperWidth();
    
        }));
    
      // END - Calculate Footer widths to be full screen
    
    </script>
    Hope this code helps someone.

    Aly

    Comment


    • #3
      Code Update 10/21/2020 - vBulletin version 5.6.4

      For some reason I can't figure out, after the upgrade from 5.6.3 => 5.6.4, the code required a couple of minor adjustments in the JavaScript to make the right-hand side of the footer apply full width. The footer template hadn't changed and I can't honestly explain the cause of the issue but here's the working solution with 5.6.4.

      Here's the updated code replacing the halfdifference calculated variable with a fixed value equal to the left hand margin of your site, in this case -20px.

      Code:
      <script type="text/javascript">
      
        // START - Calculate Footer widths to be full screen
      
          function outerWrapperWidth() {
      
              if (window.innerWidth <= 767) {
      
                  // Find width of browser screen (#outer-wrapper)
                  let outerWrapperOffset = document.getElementById('outer-wrapper').offsetWidth;
      
                  // Set margin to offset width
                  let outerWrapperMargin = (outerWrapperOffset);
      
                  // Find width of footer (#footer)
                  let footer = document.getElementById('footer').offsetWidth;
      
                  // Difference between #outer-wrapper & #footer widths
                  let difference = (outerWrapperMargin - footer);
      
                  // Set #footer & #footer-tabbar styles dynamically adjusting for browser width
                  document.getElementById('footer').style.marginLeft = (0 + "px");
                  document.getElementById('footer-tabbar').style.marginRight = (-difference + "px");
      
              } else {
      
                  // Find width of browser screen (#outer-wrapper)
                  let outerWrapperOffset = document.getElementById('outer-wrapper').offsetWidth;
      
                  // Add in left & right margin (20+20)=40px
                  let outerWrapperMargin = (outerWrapperOffset + 40);
      
                  // Find width of footer (#footer)
                  let footer = document.getElementById('footer').offsetWidth;
      
                  // Difference between #outer-wrapper & #footer widths
                  let difference = (outerWrapperMargin - footer);
      
                  // Set #footer & #footer-tabbar styles dynamically adjusting for browser width
                 document.getElementById('footer').style.marginLeft = (-20 + "px");
                  document.getElementById('footer-tabbar').style.marginRight = (-difference + "px");
      
              }
      
          }
      
          // Function (dbounce) take resize action only after window resize or scroll are completed
          // (Time delay 5ms) a compromise between reducing number of JS calls & smoothness of action
          function debounce(func) {
      
              let timer;
      
              return function(event) {
      
                  if (timer) clearTimeout(timer);
                  timer = setTimeout(func, 5, event);
      
              };
      
          }
      
          // On document loaded event
          document.addEventListener('DOMContentLoaded', function() {
      
              // Calculate #footer width
              outerWrapperWidth();
      
          });
      
          // On window resize event
          window.addEventListener('resize', debounce(function() {
      
              // Calculate #footer width
              outerWrapperWidth();
      
          }));
      
        // END - Calculate Footer widths to be full screen
      
      </script>

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...
      X