MyBB Community Forums

Hello there!

I am having some issues on my site with the jQuery/Javascript cooperating. I have tried searching through topics and on Google, tried some solutions, but I am still unable to resolve the issue.

My problem is that I am having trouble getting all of the scripts working at the same time. When I added the jQuery.noConflict(); the inline moderation and collapse/expand forum categories worked, but the Flexy-menu dropdown menu did not. When I removed the jQuery.noConflict(); after contacting the author of the Flexy-menu code, the inline moderation and collapse/expand forum categories stopped working. Another script, commented as Detach Navigation, works regardless in the presence/absence of jQuery.noConflict();.

Any ideas on how to get them both working at the same time?

Here is my headerinclude template:

Quote:<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{$stylesheets}

<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>


<!-- FLEXY-MENU CONTENT -->
<link rel="stylesheet" type="text/css" href="css/flexy-menu.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/flexy-menu.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
$(".flexy-menu").flexymenu({
type: 'vertical',
align: 'left',
speed: 500,
indicator: true
});
});
</script>

<!-- DETACH NAVIGATION -->
<script type="text/javascript" src="js/handleScroll.js"></script>

{$newpmmsg}

A live version of the site can be viewed at: http://ankaa.liorelysia.com/

I don't know if it would make a difference, but try moving Jquery above everything else (but below prototype), then add noconflict below jquery.

Try this, I have done everything above.

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
{$stylesheets}
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>


<!-- FLEXY-MENU CONTENT -->
<link rel="stylesheet" type="text/css" href="css/flexy-menu.css">
<script type="text/javascript" src="js/flexy-menu.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
$(".flexy-menu").flexymenu({
type: 'vertical',
align: 'left',
speed: 500,
indicator: true
});
});
</script>

<!-- DETACH NAVIGATION -->
<script type="text/javascript" src="js/handleScroll.js"></script>

{$newpmmsg}

Thank you for your suggestion, I never would have thought to try that! Unfortunately, it makes the inline moderation and col/exp categories work at the cost of the menu again.

OP that wasn't your issue, ur issue is that prototypes "selector" is $ which you try using jquery to do.

Either
var $ = jQuery;
Change it all to jQuery.
Or jQuery(document).ready(function($) { });

That will define it as $

Try:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="js/flexy-menu.js"></script>
<link rel="stylesheet" type="text/css" href="css/flexy-menu.css">
{$stylesheets}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".flexy-menu").flexymenu({
type: 'vertical',
align: 'left',
speed: 500,
indicator: true
});
});
</script>
<!-- DETACH NAVIGATION -->
<script type="text/javascript" src="js/handleScroll.js"></script>
{$newpmmsg}

Again Destroy666, that's a stupid fix as any prototype things after it will break.
Rather than doing that make everything jQuery instead of $...

Wanna bet that nothing will break with my method? jQuery loads in noConflict mode, then Prototype is loaded (recommended order for Chrome, I read it below several stackoverflow questions and it indeed fixed one problem) and only one jQuery function requires $ as argument, which is in the code I posted... I have a custom theme with at least 15 jQuery scripts and some Prototype-based plugins on my beta page and nothing is broken that way.

Are you actually planning to make your site responsive? Because if not I fail to see why you need a fancy resizing menu like that anyway. You can achieve the same side bar and menu effect with css and (maybe) suckerfish - neither of which use jQuery.