Interfering Scripts

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome, Safari, Other
Screenshot of problem : https://i.imgur.com/LlGE0rQ.png
Who the problem concerns : All members
When the problem appeared : After installing the Switcheroo toggle
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hi all!

I've recently integrated Switcheroo into my forum, enabling users to easily manage all their multi-accounts through a convenient navigation bar. To maintain an uncluttered interface, I've implemented a toggle feature for the Switcheroo navbar, allowing members to hide it at their discretion. However, upon introducing the Switcheroo toggle, I encountered an unexpected conflict between its JavaScript and another JavaScript I employ to dynamically adjust element positions based on page scroll. Individually, these scripts function flawlessly, but their simultaneous activation prompts the error attached as an image to this message. Interestingly, I tested both codes on a trial forum and they played nice there. So I'm pretty stumped on what's causing the issue. Below are the codes for reference:

Switcheroo toggle

Code:

$(document).ready(function() {
  var previousChoice = localStorage.getItem('hideElement');
  if (previousChoice === 'false') {
    $('#switcheroo').removeClass('hide');
  }

  $('.toggleSwitcheroo').click(function() {
    $('#switcheroo').toggleClass('hide');

    var isHidden = $('#switcheroo').hasClass('hide');

    localStorage.setItem('hideElement', isHidden);
  });
});

Positioning

Code:

let departScroll = window.pageYOffset;window.onscroll = function () {
  let currentScrollpos = window.pageYOffset;if (window.pageYOffset == 0) {
    $(".mnmn").css({"top": "0","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "calc(100vh - 29.6px)","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "30px","transition": "top .4s ease-in-out"});
  }
  else if (departScroll > currentScrollpos) {
    $(".mnmn").css({"top": "0","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "calc(100vh - 29.6px)","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "30px","transition": "top .4s ease-in-out"});
  }
  else {
    $(".mnmn").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "100vh","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "0","transition": "top .4s ease-in-out"});
  }
  departScroll = currentScrollpos;}

Thanks in advance for the help!

Good evening!

Try removing those lines from the second code:

Code:

    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});


Code:

    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});


Code:

    $(".switcheroo").css({"top": "0","transition": "top .4s ease-in-out"});


Perhaps the conflict is due to the impact on a single element with the .switcheroo class
--------
Is it correct that in the first code, you use an identifier and in the second code you use a class?

Hello Razor12345,

Thanks a lot for your comment and assistance! Regrettably, removing the suggested lines didn't resolve the problem.

I also experimented with modifying the class for an identifier in the second code, but it didn't yield any results.

Any other suggestions?

I can't get the exact location where the error occurs and I can't reproduce it either.
Maybe these two codes conflict with some other code...

The only idea I have is to try this code

Code:

let departScroll = window.pageYOffset;window.onscroll = function () {
  let currentScrollpos = window.pageYOffset;if (window.pageYOffset == 0) {
    $(".mnmn").css({"top": "0","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "calc(100vh - 29.6px)","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "30px","transition": "top .4s ease-in-out"});
  }
  else if (departScroll > currentScrollpos) {
    $(".mnmn").css({"top": "0","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "30px","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "calc(100vh - 29.6px)","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "30px","transition": "top .4s ease-in-out"});
  }
  else {
    $(".mnmn").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $("#fa_toolbar").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $(".menuonclick").css({"top": "-30px","transition": "top .4s ease-in-out"});
    $(".switcheroo").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".menuall").css({"top": "0","transition": "top .4s ease-in-out"});
    $(".mcontents").css({"height": "100vh","transition": "top .4s ease-in-out"});
    $(".pstprstck").css({"top": "0","transition": "top .4s ease-in-out"});
  }
  departScroll = currentScrollpos;}

wrap it in a script tag and paste it into a template overall_footer_end before body tag

Hey Razor12345,

Incorporating the positioning code into the HTML actually resolved the problem. Thank you very much, I truly appreciate your assistance and the effort you put in!

Could you possibly provide more insight into the distinction between having Java in the HTML as opposed to within JavaScript codes? Why might adding them within the JavaScript management tool potentially lead to problems? Your explanation would be quite valuable.

You have on github a theme with switchero installed: https://github.com/gp-kim/Blank-Theme
This is the left top "messenger" part: https://github.com/gp-kim/Blank-Theme/tree/main/Messenger

the_rocketeer wrote:Hey Razor12345,

Incorporating the positioning code into the HTML actually resolved the problem. Thank you very much, I truly appreciate your assistance and the effort you put in!

Could you possibly provide more insight into the distinction between having Java in the HTML as opposed to within JavaScript codes? Why might adding them within the JavaScript management tool potentially lead to problems? Your explanation would be quite valuable.

If you add a script via AP - Modules - Javascript codes management, then all the scripts you add are merged into one file and applied to the forum.

If inserted into a template, the script is "isolated" from other scripts by its environment. That's a rather crude explanation, but I can't put it any other way.

Let's say you have a script with a non-critical error installed in Modules. It will work. But after some time you will want to add another script, then another. One day, the error in the first script will become critical and break all JS code. Or there will be non-critical errors in other scripts too, but together they will all produce a critical error and break the whole code.

There is no significant difference, but placing scripts in templates allows you to isolate scripts from each other.

Also, the code editor in the templates is more rigorous. If you, for example, miss the ";" sign at the end of a line, the script will not work, which allows you to make the code cleaner.

This is not an official position - it is purely my observation, formed over a long period of time using the forums.

Absolutely makes sense. Thank you very much for your detailed explanation and all the assistance. Highly appreciated.

This issue is now resolved.

You are welcome!

Problem solved & topic archived. Please read our forum rules: ESF General Rules