Hi.
I'm having conflict with the mootools script in my template, the result of the conflict is this:
menudropdown.js
I have traced the script thet is in conflict, is this:
The php file that calls the js is this:
OtModulesRenderer.php
I would like to continue using this template, is there any way to modify the script to solve the conflict?
Thanks in advance
Diego
J2.5.4 F3.0.5.2 Github 4 June 2012
I'm having conflict with the mootools script in my template, the result of the conflict is this:
menudropdown.js
I have traced the script thet is in conflict, is this:
Code:
/* OT Document JAVASCRIPT for MENU DROPDOWN */
if (typeof(MooTools) != 'undefined') {
var subnav = new Array();
Element.implement(
{
hide: function(timeout)
{
this.status = 'hide';
clearTimeout(this.timeout);
if (timeout) {
this.timeout = setTimeout(this.anim.bind(this), timeout);
} else {
this.anim();
}
},
show: function(timeout)
{
this.status = 'show';
clearTimeout(this.timeout);
if (timeout) {
this.timeout = setTimeout(this.anim.bind(this), timeout);
} else {
this.anim();
}
},
set_Active: function()
{
this.className += ' sfhover';
},
setDeactive: function() {
this.className = this.className.replace(new RegExp(' sfhover\\b'), '');
},
anim: function()
{
if ((this.status == 'hide' && this.style.left != 'auto') || (this.status == 'show' && this.style.left == 'auto' && !this.hidding)) return;
this.setStyle('overflow', 'hidden');
if (this.status == 'show') {
this.hidding = 0;
this.hideAll();
}
if (this.status == 'hide') {
this.hidding = 1;
this.myFx2.cancel();
if (this.parent._id) {
this.myFx2.start('width', this.offsetWidth, 0);
} else {
this.myFx2.start('height', this.offsetHeight, 0);
}
} else {
this.setStyle('left', 'auto');
this.myFx2.cancel();
if (this.parent._id) this.myFx2.start('width', 0, '205px');
else this.myFx2.start('height', 0, this.mh);
}
},
init: function()
{
this.mw = this.clientWidth;
this.mh = this.clientHeight;
if (this.parent._id) {
this.myFx2 = new Fx.Tween(this, {
duration: 400,
link: 'cancel'
});
this.myFx2.set('width',0);
} else {
this.myFx2 = new Fx.Tween(this, {
duration: 400,
link: 'cancel'
});
this.myFx2.set('height',0);
}
this.setStyle('left', '-999em');
animComp = function()
{
if (this.status == 'hide') {
this.setStyle('left', '-999em');
this.hidding = 0;
}
this.setStyle('overflow', '');
}
this.myFx2.addEvent('onComplete', animComp.bind(this));
},
hideAll: function()
{
for (var i = 0; i < subnav.length; i++) {
if (!this.isChild(subnav[i])) {
subnav[i].hide(0);
}
}
},
isChild: function(_obj)
{
obj = this;
while (obj.parent) {
if (obj._id == _obj._id) {
return true;
}
obj = obj.parent;
}
return false;
}
});
var DropdownMenu = new Class({
initialize: function(element)
{
if(element.className == 'menu_round')
{
$A($(element).childNodes).each(function(el){
if(el.className == 'menu_mid'){
$A($(el).childNodes).each(function(el_1){
if(el_1.nodeName.toLowerCase() == 'ul'){
elm = $(el_1);
}
});
}
});
}
else
{
elm = $(element);
}
$A($(elm).childNodes).each(function(el_2){
if (el_2.nodeName.toLowerCase() == 'li') {
$A($(el_2).childNodes).each(function(el_3) {
if (el_3.className == 'menu_round') {
$(el_3)._id = subnav.length + 1;
$(el_3).parent = $(element);
subnav.push($(el_3));
el_3.init();
el_2.addEvent('mouseenter', function() {
el_2.set_Active();
el_3.show(0);
return false;
});
el_2.addEvent('mouseleave', function() {
el_2.setDeactive();
el_3.hide(20);
});
new DropdownMenu(el_3);
el_2.hasSub = 1;
}
});
if (!el_2.hasSub) {
el_2.addEvent('mouseenter', function() {
el_2.set_Active();
return false;
});
el_2.addEvent('mouseleave', function() {
el_2.setDeactive();
});
}
}
});
return this;
}
});
window.addEvent('domready', function() {
new DropdownMenu(document.getElement('#ot-mainmenu ul.level0'));
});
} else {
sfHover = function()
{
var sfEls = document.getElementById("ot-mainmenu").getElementsByTagName("li");
for (var i = 0; i<sfEls.length; ++i) {
sfEls[i].onmouseover = function() {
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
}
/* +++++++++++++++ End +++++++++++++++++++ */
The php file that calls the js is this:
OtModulesRenderer.php
Code:
<?php
/**
# ot_Appoz - OT Appoz Template for Joomla 1.7!
# author OmegaTheme.com
# copyright Copyright(C) 2011 - OmegaTheme.com. All Rights Reserved.
# @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Website: http://omegatheme.com
# Technical support: Forum - http://omegatheme.com/forum/
**/
/**------------------------------------------------------------------------
* file: tpl.function.php 1.7.0 00001, December 2011 12:00:00Z OmegaTheme $
* package: OT Appoz Template
*------------------------------------------------------------------------*/
//No direct access!
defined( '_JEXEC' ) or die( 'Restricted access' );
include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/OtModulesRenderer.php');
//Check IE Version for Fix Layout
function browser()
{
$browser = array();
// what ie browser version?
if (array_key_exists('HTTP_USER_AGENT', $_SERVER) && preg_match('/(MSIE\\s?([\\d\\.]+))/', $_SERVER['HTTP_USER_AGENT'], $matches))
{
$browser['ie9'] = intval($matches[2]) == 9;
$browser['ie8'] = intval($matches[2]) == 8;
$browser['ie7'] = intval($matches[2]) == 7;
}
return $browser;
}
function isIe($version)
{
$browser = browser();
if (array_key_exists('ie'.$version, $browser)) {
return $browser['ie'.$version];
}
return false;
}
//Check Menu default is Home
function isHome()
{
$mnu =& JSite::getMenu();
return ($mnu->getActive() == $mnu->getDefault());
}
//Check Frontpage view
function isFrontpage(){
return (JRequest::getCmd( 'view' ) == 'frontpage') ;
}
//$layoutView = &JRequest::getVar( 'layoutview' ) == $this->params->get('layoutType');
/*+++++++++++++++++++Layout++++++++++++++++++++*/
$template_url = $this->baseurl.'/templates/'.$this->template;
//Include Main CSS
$this->addStyleSheet($this->baseurl.'/templates/system/css/system.css');
$this->addStyleSheet($this->baseurl.'/templates/system/css/general.css');
$this->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/template.css');
//+++++++++++++++++++Configuration Width Template +++++++++++++++++++++++
$presetCss = '';
if($this->params->get('CustomWidthTemplate') == 1){
if(trim($this->params->get('width_template')) != ''){
$presetCss .= 'div.template-width {width: '.trim($this->params->get('width_template')).';}';
}
if($this->countModules('left')){
$presetCss .= 'div.ot-leftcolumn {width: '.trim($this->params->get('width_left')).';}';
}
if($this->countModules('right')){
$presetCss .= 'div.ot-rightcolumn {width: '.trim($this->params->get('width_right')).';}';
}
}
//+++++++++++++++++++Extend Modules +++++++++++++++++++++++
if($this->countModules('bottom-2') == 0){
$presetCss .= 'div.ot-footer div.ot-bottom-1 {width: 100%}';
}
if($this->countModules('bottom-1') == 0){
$presetCss .= 'div.ot-footer div.ot-bottom-2 {width: 100%}';
}
//+++++++++++++++++++Configuration Width of Boxes +++++++++++++++++++++++
$topboxs_unitWidth = trim($this->params->get('unitWidth'));
$width_topboxs = explode(",", str_replace(array(" ",";", "(", ")"), array("", ",", "", ""), $this->params->get('width_topboxes')));
$topboxes_additional_class = '';
foreach (@$width_topboxs as $index => $width_topbox)
{
$width_topboxs[$index] = trim($width_topbox);
}
$width_topboxs = array_unique($width_topboxs);
foreach ($width_topboxs as $width_topbox)
{
if (trim($width_topbox ) != "" )
{
$topboxes_additional_class .= '
.'.'width'.$width_topbox. '{ width: '.$width_topbox.$topboxs_unitWidth.'; }
';
}
}
//+++++++++++++++++++Configuration Layout +++++++++++++++++++++++
//$layoutStyle = $this->params->get('layoutStyle');
//$this->addStyleSheet($template_url.'/css/layout/'.$layoutStyle.'.css');
if($this->params->get('customBackground') == 1){
if(trim($this->params->get('header_bgcolor')) != ''){
$presetCss .= 'div.ot-header {background-color: '.$this->params->get('header_bgcolor').';}';
}
if(trim($this->params->get('banner_bgcolor')) != ''){
$presetCss .= 'div.ot-banner {background-color: '.$this->params->get('banner_bgcolor').';}';
}
if(trim($this->params->get('topboxes_bgcolor')) != ''){
$presetCss .= 'div.ot-topboxes {background-color: '.$this->params->get('topboxes_bgcolor').';}';
}
if(trim($this->params->get('mainbody_bgcolor')) != ''){
$presetCss .= 'div.ot-mainbody {background-color: '.$this->params->get('mainbody_bgcolor').';}';
}
if(trim($this->params->get('footer_bgcolor')) != ''){
$presetCss .= 'div.ot-footer {background-color: '.$this->params->get('footer_bgcolor').';}';
}
}
//+++++++++++++++++++Configuration Body +++++++++++++++++++++++
if($this->params->get('CustomBodyFont') == 1){
if(trim($this->params->get('font_family')) != 'none'){
$font_family = explode(':', trim($this->params->get('font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $font_family[0]));
$presetCss .= 'body#ot-body {font-family: "'.$font_family[0].'";}';
}
if(trim($this->params->get('color_text')) != ''){
$presetCss .= 'body#ot-body {color: '.$this->params->get('color_text').';}';
}
if(trim($this->params->get('color_links')) != ''){
$presetCss .= 'a {color: '.$this->params->get('color_links').';}';
}
if(trim($this->params->get('fontSize')) != ''){
$presetCss .= 'body#ot-body {font-size: '.$this->params->get('fontSize').';}';
}
}
//+++++++++++++++++++Configuration Heading Tags++++++++++++++++++++
if($this->params->get('CustomHeadingFont') == 1){
// Custom style h1
if(trim($this->params->get('h1font_family')) != 'none'){
$h1font_family = explode(':', trim($this->params->get('h1font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h1font_family[0]));
$presetCss .= 'h1 {font-family: "'.$h1font_family[0].'";}';
}
if(trim($this->params->get('h1_color')) != ''){
$presetCss .= 'h1 {color: '.$this->params->get('h1_color').';}';
}
if(trim($this->params->get('h1font_size')) != ''){
$presetCss .= 'h1 {font-size: '.$this->params->get('h1font_size').';}';
}
// Custom style h2
if(trim($this->params->get('h2font_family')) != 'none'){
$h2font_family = explode(':', trim($this->params->get('h2font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h2font_family[0]));
$presetCss .= 'h2 {font-family: "'.$h2font_family[0].'";}';
}
if(trim($this->params->get('h2_color')) != ''){
$presetCss .= 'h2 {color: '.$this->params->get('h2_color').';}';
}
if(trim($this->params->get('h2font_size')) != ''){
$presetCss .= 'h2 {font-size: '.$this->params->get('h2font_size').';}';
}
// Custom style h3
if(trim($this->params->get('h3font_family')) != 'none'){
$h3font_family = explode(':', trim($this->params->get('h3font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h3font_family[0]));
$presetCss .= 'h3 {font-family: "'.$h3font_family[0].'";}';
}
if(trim($this->params->get('h3_color')) != ''){
$presetCss .= 'h3 {color: '.$this->params->get('h3_color').';}';
}
if(trim($this->params->get('h3font_size')) != ''){
$presetCss .= 'h3 {font-size: '.$this->params->get('h3font_size').';}';
}
// Custom style h4
if(trim($this->params->get('h4font_family')) != 'none'){
$h4font_family = explode(':', trim($this->params->get('h4font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h4font_family[0]));
$presetCss .= 'h4 {font-family: "'.$h4font_family[0].'";}';
}
if(trim($this->params->get('h4_color')) != ''){
$presetCss .= 'h4 {color: '.$this->params->get('h4_color').';}';
}
if(trim($this->params->get('h4font_size')) != ''){
$presetCss .= 'h4 {font-size: '.$this->params->get('h4font_size').';}';
}
// Custom style h5
if(trim($this->params->get('h5font_family')) != 'none'){
$h5font_family = explode(':', trim($this->params->get('h5font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h5font_family[0]));
$presetCss .= 'h5 {font-family: "'.$h5font_family[0].'";}';
}
if(trim($this->params->get('h5_color')) != ''){
$presetCss .= 'h5 {color: '.$this->params->get('h5_color').';}';
}
if(trim($this->params->get('h5font_size')) != ''){
$presetCss .= 'h5 {font-size: '.$this->params->get('h5font_size').';}';
}
// Custom style h6
if(trim($this->params->get('h6font_family')) != 'none'){
$h6font_family = explode(':', trim($this->params->get('h6font_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $h6font_family[0]));
$presetCss .= 'h6 {font-family: "'.$h6font_family[0].'";}';
}
if(trim($this->params->get('h6_color')) != ''){
$presetCss .= 'h6 {color: '.$this->params->get('h6_color').';}';
}
if(trim($this->params->get('h6font_size')) != ''){
$presetCss .= 'h6 {font-size: '.$this->params->get('h6font_size').';}';
}
}
//+++++++++++++++++++Configuration MainMenu++++++++++++++++++++
if($this->params->get('CustomMainMenu') == 1){
if(trim($this->params->get('mainnavfont_family')) != 'none'){
$mainnavfont_family = explode(':', trim($this->params->get('mainnavfont_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $mainnavfont_family[0]));
$presetCss .= '#ot-mainmenu ul.menu li a {font-family: "'.$mainnavfont_family[0].'";}';
}
if(trim($this->params->get('mainnav_color')) != ''){
$presetCss .= '#ot-mainmenu ul.menu li a {color: '.$this->params->get('mainnav_color').';}';
}
if(trim($this->params->get('mainnavfont_size')) != ''){
$presetCss .= '#ot-mainmenu ul.menu li a {font-size: '.$this->params->get('mainnavfont_size').';}';
}
}
//+++++++++++++++++++Configuration Blcokquote++++++++++++++++++++
if($this->params->get('CustomBlockquote') == 1){
if(trim($this->params->get('blockquotefont_family')) != 'none'){
$blockquotefont_family = explode(':', trim($this->params->get('blockquotefont_family')));
$this->addStyleSheet('http://fonts.googleapis.com/css?family=' . str_replace( ' ', '+', $blockquotefont_family[0]));
$presetCss .= 'blockquote {font-family: "'.$blockquotefont_family[0].'";}';
}
if(trim($this->params->get('blockquote_color')) != ''){
$presetCss .= 'blockquote {color: '.$this->params->get('blockquote_color').';}';
}
if(trim($this->params->get('blockquotefont_size')) != ''){
$presetCss .= 'blockquote {font-size: '.$this->params->get('blockquotefont_size').';}';
}
}
//Include CSS of Configuration Params
$this->addStyleDeclaration($presetCss);
$this->addStyleDeclaration($topboxes_additional_class);
// Load mootools
JHTML::_('behavior.mootools');
//Load Mootools MenuDropdown
$this->addScript($template_url.'/scripts/menudropdown.js');
// load others js
//$this->addScript($template_url.'/scripts/otscript.js');
// ie9 fix
if (isIe(9))
{
$css = '<link rel="stylesheet" href="%s" type="text/css" />';
$ie9[] = sprintf($css, $template_url.'/css/ie9.css');
$this->addCustomTag('<!--[if IE 9]>'.implode("\n", $ie9).'<![endif]-->');
}
// ie8 fix
if (isIe(8))
{
$css = '<link rel="stylesheet" href="%s" type="text/css" />';
$ie8[] = sprintf($css, $template_url.'/css/ie8.css');
$this->addCustomTag('<!--[if IE 8]>'.implode("\n", $ie8).'<![endif]-->');
}
// ie7 fix
if (isIe(7))
{
$css = '<link rel="stylesheet" href="%s" type="text/css" />';
$ie7[] = sprintf($css, $template_url.'/css/ie7.css');
$this->addCustomTag('<!--[if IE 7]>'.implode("\n", $ie7).'<![endif]-->');
}
?>
I would like to continue using this template, is there any way to modify the script to solve the conflict?
Thanks in advance
Diego
J2.5.4 F3.0.5.2 Github 4 June 2012