I'm attempting to reuse a (
JA Purity II T3 Framework) Joomla megamenu for an IPB3 custom skin in the same way this guy has done so for his phpBBB3 forum.
eg:
http://www.pcadviser.ro -
Joomla!
http://www.pcadviser.ro/forum -
phpBB3
I think there are clashes between IPB3's embedded <head> Javascript and the mootools/js scripting which causes abnormal behaviour on the website.
Here's where I believe my problem is isolated to
Snippet:
Here's what it looks like in the <head>
Code:
<head>
<meta http-equiv="content-type" content="text/html; charset={$this->settings['gb_char_set']}" />
<title>{$header_items['title']}<if test="pagenumberintitle:|:$header_items['page']"> {$this->lang->words['page_title_page']} {$header_items['page']}</if></title>
<link rel="shortcut icon" href='<if test="$this->registry->output->isHTTPS">{$this->settings['board_url_https']}<else />{$this->settings['board_url']}</if>/favicon.ico' />
<!-- IPB's Javascript -->
<script type='text/javascript'>
jsDebug = {parse expression="intval($this->settings['_jsDebug'])"}; /* Must come before JS includes */
USE_RTE = <if test="userte:|:$this->memberData['members_editor_choice'] == 'rte' && $this->memberData['_canUseRTE'] === TRUE">1<else />0</if>;
inACP = false;
</script>
{parse template="includeCSS" group="global" params="$css"}
<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
{parse template="includeMeta" group="global" params="$metaTags"}
{parse template="includeJS" group="global" params="$jsModules"}
{parse template="includeFeeds" group="global" params="$documentHeadItems"}
{parse template="includeRTL" group="global" params=""}
{parse template="includeVars" group="global" params=""}
<script type='text/javascript'>
Loader.boot();
</script>
<!-- JA Mega menu .JS / .CSS attachment -->
<script type="text/javascript" src="http://localhost/media/system/js/mootools.js"></script>
<link href="http://localhost/templates/ja_purity_ii/css/menu/mega.css" rel="stylesheet" type="text/css" /><script src="http://localhost/templates/ja_purity_ii/js/menu/mega.js" language="javascript" type="text/javascript"></script>
</head>
And here is the mega menu nav bar code that is linked to the .js and .mootools
Code:
<!--JA Mega menu-->
<!-- MAIN NAVIGATION -->
<div id="ja-mainnav" class="wrap">
<div class="main clearfix">
<div class="ja-megamenu">
<ul class="megamenu level0"><li class="mega active first"><a href="http://localhost/" class="mega active first" id="menu1" title="Home"><span class="menu-title">Home</span></a></li><li class="mega haschild"><a href="/index.php?option=com_content&view=article&id=19&Itemid=27" class="mega haschild" id="menu27" title="Joomla! Overview"><span class="menu-title">Joomla! Overview</span></a><div class="childcontent cols1 ">
<div class="childcontent-inner-wrap">
<div class="childcontent-inner clearfix" style="width: 200px;"><div class="megacol column1 first" style="width: 200px;"><ul class="megamenu level1"><li class="mega first"><a href="/index.php?option=com_content&view=article&id=22&Itemid=34" class="mega first" id="menu34" title="What's New in 1.5?"><span class="menu-title">What's New in 1.5?</span></a></li></ul></div></div>
</div></div></li><li class="mega"><a href="/index.php?option=com_content&view=article&id=5&Itemid=2" class="mega" id="menu2" title="Joomla! License"><span class="menu-title">Joomla! License</span></a></li><li class="mega"><a href="/index.php?option=com_content&view=section&id=4&Itemid=37" class="mega" id="menu37" title="More about Joomla!"><span class="menu-title">More about Joomla!</span></a></li><li class="mega"><a href="/index.php?option=com_content&view=section&id=3&Itemid=41" class="mega" id="menu41" title="FAQ"><span class="menu-title">FAQ</span></a></li><li class="mega"><a href="/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50" class="mega" id="menu50" title="The News"><span class="menu-title">The News</span></a></li><li class="mega"><a href="/index.php?option=com_weblinks&view=categories&Itemid=48" class="mega" id="menu48" title="Web Links"><span class="menu-title">Web Links</span></a></li><li class="mega last"><a href="/index.php?option=com_newsfeeds&view=categories&Itemid=49" class="mega last" id="menu49" title="News Feeds"><span class="menu-title">News Feeds</span></a></li></ul>
</div> <script type="text/javascript">
var megamenu = new jaMegaMenuMoo ('ja-mainnav', {
'bgopacity': 0,
'delayHide': 1000,
'slide': 1,
'fading': 0,
'direction':'down',
'action':'mouseover',
'tips': false,
'duration': 200,
'hidestyle': 'fastwhenshow'
});
</script>
</div>
</div>
<!-- //MAIN NAVIGATION -->
<!--Ja mega menu-->
Is there anyone out there that would be able to help me stop the Javascript conflict that's created between IPB and JA-T3's scripts?
My files (zipped) which contain:
the .js
the .mootools
my ipb3 index.html that I'm working with.
NB: Here's
the entire purity II joomla setup (if it's needed to make finding the solution easier. It contains the other various CSS files that are used by the megamenu nav) I dont think this should be needed for the solution, but here it is just in case
Many thanks in advance.
Before you post, read our: 
Javascript conflicts, please help.
