Announcement

Collapse
No announcement yet.

Adding Event Listeners in Header Template

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

  • Adding Event Listeners in Header Template

    Hi There,

    Support Variables
    • 5.6.1 Patch Level 1 - vBulletin
    • 7.2.7 - PHP
    • 5.6.47-cll-lve - MySQL
    • vbmods (Main Navigation Menu Dropdown) - Addons
    • Yes - Default Style Issue Present
    • Yes - English language
    • No - Error Message on Screen
    • Version 83.0.4103.97 (Official Build) (64-bit)
    • Cleared - Browser Cache & Cookies
    Note: I understand the PHP version is older and below the recommended standard but for mixed software environment reasons I cannot upgrade at this time. There are just a few minor errors being logged and no functionality being lost with vBulletin that I can see, so for now I don't believe this is the problem.


    Question
    1. Why does only one event listener fire instead of all three?
    2. How should event listeners be successfully called from the Header template (or anywhere in vBulletin) via JavaScript?

    Event Listeners Added

    When adding three event listeners in the Header Template (DOMContentLoaded, resize, maximized) only DOMContentLoaded is being acted upon and the other two (resize, maximized) ignored. Have played with loading the listeners in a different order but the load order makes no difference.

    Successful Event Registration
    All three events can be seen to be successfully registered using developer console tools, they are active.


    Debugging

    For debugging purposes I am console logging a variable parameter winHeight used in the rest of my JavaScript so I can see when each event listener is fired. The function screenWidth() is calculating media screen width & height to test when to apply an action in my JavaScript.

    The rest of the JavaScript is working just fine, WHEN the event listener is fired, but right now only the initial event DOMContentLoaded is being acted upon and not resize & maximizedevents and I don't understand why.
    • A resize of the screen doesn't fire the resize event
    • A maximization of the screen doesn't fire the maximized event

    JavaScript

    Code:
    document.addEventListener("resize", function() {
    
    // Calculate visible height on page
    var winHeight = window.innerHeight;
    console.log("bounds-changed winHeight = " + winHeight);
    
    screenWidth();
    
    });
    
    window.addEventListener("maximized", function() {
    
    // Calculate visible height on page
    var winHeight = window.innerHeight;
    console.log("maximized winHeight = " + winHeight);
    
    screenWidth();
    
    });
    
    document.addEventListener("DOMContentLoaded", function() {
    
    // Calculate visible height on page
    var winHeight = window.innerHeight;
    console.log("DOMContentLoaded winHeight = " + winHeight);
    
    screenWidth();
    
    });

    How does vBulletin handle event listeners on a page resize & page maximize event?

    Many thanks.

    Aly

  • #2
    We use jQuery which is loaded in the footer of the page.

    https://api.jquery.com/category/events/
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      Hi Wayne,

      Many thanks, after some more digging, I found the root cause.

      It was my mistake, I had used document instead of the correct window prefix, when defining the resize event listener, causing the code to halt execution at that point.

      Incorrect
      Code:
      document.addEventListener("resize", function() {}
      Correct
      Code:
      window.addEventListener("resize", function() {}
      Once the resize event listener was correctly declared then all three events fired correctly.

      I appreciate your help and the pointer on where jQuery is loaded.

      Aly

      Comment

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