Interfering Scripts
2 posters
Page 1 of 1
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!
Last edited by the_rocketeer on August 28th 2023, 2:04 pm; edited 1 time in total
Re: Interfering Scripts
Good evening!
Try removing those lines from the second code:
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?
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?
Razor12345- Support Moderator
- Posts : 1584
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
Re: Interfering Scripts
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?
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?
Re: Interfering Scripts
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
wrap it in a script tag and paste it into a template overall_footer_end before body tag
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
Razor12345- Support Moderator
- Posts : 1584
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
Re: Interfering Scripts
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.
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.
Re: Interfering Scripts
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
This is the left top "messenger" part: https://github.com/gp-kim/Blank-Theme/tree/main/Messenger
Guest- Guest
Re: Interfering Scripts
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.
Razor12345- Support Moderator
- Posts : 1584
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
skouliki, TonnyKamper and the_rocketeer like this post
Re: Interfering Scripts
Absolutely makes sense. Thank you very much for your detailed explanation and all the assistance. Highly appreciated.
This issue is now resolved.
This issue is now resolved.
Razor12345- Support Moderator
- Posts : 1584
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
Similar topics
» Two Codes Are Interfering With Each Other
» Need Scripts to do this ,
» Problem with scripts
» Few scripts doesn't working.
» cant spilt all these Scripts which are in one Script
» Need Scripts to do this ,
» Problem with scripts
» Few scripts doesn't working.
» cant spilt all these Scripts which are in one Script
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum