Problem with jQuery working in "no conflict" mode

[Neuron]

I've tried to use some jQuery plugins to add smooth scrolling in the forum wrapper, so that users who browse with Chrome can have a smooth scrolling experience without installing 3rd party extensions.

All went well, I was able to enable smooth scrolling, but after I managed to do so, I noticed some things stopped working on the site. The WYSISYG post editor couldn't switch anymore from BBCode to Preview and if you wrote some text in it and pressed the Reply button, it failed to get posted. Instead, it discarded the text and reported you didn't write any text in your post.
After disabling the plugins loaded for smooth scrolling, posting started working again.

These are the JS files I linked in the forum wrapper:

TweenLite and ScrollToPlugin

This is the JS code I used to configure smooth scrolling:

/* This was added in a separate script tag, before the Tweenlite and Scroll plugins were linked */

var $j = jQuery.noConflict(true);    


/* This was added in another script tag after the plugins were linked */

var $window = $j(window);
var scrollTime = 0.5;
var scrollDistance = 300;

mobile_ie = -1 !== navigator.userAgent.indexOf("IEMobile");
function smoothScrollListener(event){
   event.preventDefault();
   var delta = event.wheelDelta / 120 || -event.detail / 3;
   var scrollTop = $window.scrollTop();
   var finalScroll = scrollTop - parseInt(delta * scrollDistance);

   TweenLite.to($window, scrollTime, {
       scrollTo: {
          y: finalScroll, autoKill: !0
       },
       ease: Power1.easeOut,
       autoKill: !0,
       overwrite: 5
   });
}

if (!$j('html').hasClass('touch') && !mobile_ie) {
   if (window.addEventListener) {
       window.addEventListener('mousewheel', smoothScrollListener, false);
       window.addEventListener('DOMMouseScroll', smoothScrollListener, false);
   }
}
This is messing with some site components which are probably using jQuery 1.7.2 (which seems to be loaded by default with Proboards forums. I suppose jQuery 1.7.2 is used on the site because Proboards wants to support older IE versions).

My question would be if it's possible to install Javascript-based plugins which use jQuery in no-conflict mode without rendering some basic site functionality such as posting disfunctional. Can we use newer versions of jQuery on the sites or would this also create conflict problems with the default jQuery version loaded with Proboards by default?

[Brian]

Hi, Neuron.

Do you have a link to a forum where this is breaking things?

Usually the F12 developer console in your browser produces errors when something Javascript-related breaks.

[Neuron]

Hey, there. This is the site where I test things I'm working on:

mytestysite.boards.net/forum

I enabled the smooth scrolling plugins again, so now these things stopped working right:

1. The sidebar which includes links Twitch streams, which is using jQuery to show when a stream is live. Basically, a small script replaces a hidden span tag with the live tag:

//var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
//$.getScript( url, function() {
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
if (c.stream == null) {
span.html("");
} else {
span.html("<span style='color:red;font-size:20pt;vertical-align:middle;'>&#8226;</span>"+" LIVE");
}
});
});
});
//});

If I remove the coments, jQuery gets loaded only in this sidebar scope and the links are fixed. This sidebar uses the Sidebar Redux plugin to load the links in HTML tags, then this script takes care of the stream status part.

2. Now that I enabled smooth scrolling again, it's not possible to post, because the WYSIWYG editor doesn't show any buttons in BBCode mode and switching between Preview and BBCode doesn't work either. If I try to reply to a post, the text is discarded and the forum says I must write a message before posting.

It's possible other posting modes don't work either (messaging) but I haven't tested them yet.

[Brian]

I'm not familiar with jQuery's noConflict mode so I can't say for certain whether or not it's possible to run multiple versions on the forum at once.

Based on what I'm reading online one issue you might be running into is the inability to specify noConflict mode before the forum.js file loads (the one that holds all of our functions) since both jQuery and forum.js are loaded via the uneditable $[head] variable.

[Neuron]

I see. Thanks for the answer, Brian.

What happens if the $[head] variable is removed from the forum wrapper template? Does this variable handle any server-side stuff too?

Maybe I can take all the paths to the scripts used by Proboards and link them later after I first enable noConflict for jQuery. So I could get all the JS resources which Proboards needs to function right using the console, remove the $[head] variable, enable noConflict, then load the Proboards JS scripts later.

[Brian]

Removing the $[head] variable removes the favicon, the social media meta info, the style sheets, jQuery, the forum's JS file, and the plugin JSON. Most of that information is irretrievable without the $[head] variable.

[Neuron]

Brian

I made it work by running all the scripts before the $[head] variable loads the Proboards stuff. Posting works too as well as the streams links.

Thanks for the support.

Case closed.

[Brian]

Good to hear.