The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Interfering Scripts

2 posters

Go down

Solved Interfering Scripts

Post by the_rocketeer August 27th 2023, 20:35

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!


Last edited by the_rocketeer on August 28th 2023, 15:04; edited 1 time in total
the_rocketeer
the_rocketeer
Forumember

Other / Decline to state Posts : 84
Reputation : 4
Language : English
Location : Europe

http://love-you-hogwarts.bulgarianforum.net/

Back to top Go down

Solved Re: Interfering Scripts

Post by Razor12345 August 27th 2023, 21:19

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?


Interfering Scripts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Interfering Scripts

Post by the_rocketeer August 27th 2023, 21:50

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?
the_rocketeer
the_rocketeer
Forumember

Other / Decline to state Posts : 84
Reputation : 4
Language : English
Location : Europe

http://love-you-hogwarts.bulgarianforum.net/

Back to top Go down

Solved Re: Interfering Scripts

Post by Razor12345 August 28th 2023, 11:17

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


Interfering Scripts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Interfering Scripts

Post by the_rocketeer August 28th 2023, 11:38

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.
the_rocketeer
the_rocketeer
Forumember

Other / Decline to state Posts : 84
Reputation : 4
Language : English
Location : Europe

http://love-you-hogwarts.bulgarianforum.net/

Back to top Go down

Solved Re: Interfering Scripts

Post by Guest August 28th 2023, 11:42

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
avatar
Guest
Guest


Back to top Go down

Solved Re: Interfering Scripts

Post by Razor12345 August 28th 2023, 13:34

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.


Interfering Scripts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

skouliki, TonnyKamper and the_rocketeer like this post

Back to top Go down

Solved Re: Interfering Scripts

Post by the_rocketeer August 28th 2023, 15:03

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

This issue is now resolved.
the_rocketeer
the_rocketeer
Forumember

Other / Decline to state Posts : 84
Reputation : 4
Language : English
Location : Europe

http://love-you-hogwarts.bulgarianforum.net/

Back to top Go down

Solved Re: Interfering Scripts

Post by Razor12345 August 28th 2023, 15:05

You are welcome!

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


Interfering Scripts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1526
Reputation : 264
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum