jQuery and Mootools conflict problem in a Joomla Site

[Maruf]

Hello everyone,

I'm an amateur Joomla Developer and new to the group. Currently I'm
building Music Store with Joomla and some I'm facing some problems
with jQuery and Mootools. Firstly I wanna say that I know about the
conflict between these two JS Library and using jQuery.noConflict()
will give a way around. Having said that, in one the page where I've
added jQueryUI tabs, The problem if i dont add the noConflict(), then
Mootools throws error and if I add noConflict(), then Mootools works
but the tab behaves weirdly. By default, when you use jQueryUI tab it
should not follow the link i.e. prevent the default click action. Let
me explain a bit
<ul>
<li>
<a href="#tabcontent1">tab1</a>
<li>
<li>
<a href="#tabcontent2">tab2</a>
<li>
<ul>
<div id="tabcontent1"></div>
<div id="tabcontent2"></div>

So if you click tab1 it will show div#tabcontent1 and so on. But in my
case if I click tab1 it does show div#tabcontent1 but it also add a
'#tabcontent1' to the url that is it is performing the default action
which it is not supposed to do. Again if I dont add the noConflict()
then it does not add '#tabcontent1' to url,

I'm not sure if you understand it. Sorry for my bad English. Can you
help me on this? I know its more like jQuery problem (so I should ask
the question in a jQuery forum) but still its happening in a Joomla
site

One thing can I post the link to my demo site? Please let me know
that, then I can show you the problems I'm having.

[Phil Snell]

Do you have k2 installed, or something that uses mootools SmoothScroll?
k2 has an implementation of SmoothScroll that causes strange behavior,
and sounds similiar to what you are finding. But also check in firebug
for errors.

If you need more details on the k2 / SmoothScroll issue, theres
something here..
http://community.getk2.org/forum/topics/k2-breaking-morph-accordions?page=1&commentId=3536014%3AComment%3A38230&x=1#3536014Comment38230

Phil

--
Phil Snell
Web Designer and Developer
Joomla! CMS Solutions Specialist
Snellcode LLC
Skype: philippe.snell
www.snellcode.com

[Alan Sparkes]

Have exact same issue
Jquery boss say it is a height scroll type behaviour that is normal.
I wished Joomla used jquery. Alternative is to use native Joomla tabs
- not sure if these run on moo or older fx scripts....

Alan
Joomkit Ltd
www.joomkit.com
+44(0)8456809513
in...@joomkit.com

> --
> You received this message because you are subscribed to the Google
> Groups "Joomla! General Development" group.
> To post to this group, send an email to joomla-de...@googlegroups.com
> .
> To unsubscribe from this group, send email to joomla-dev-gene...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/joomla-dev-general?hl=en-GB
> .
>

[Maruf]

If I dont use the noConflict() then the error is

"
Error: link.href is undefined
Source File: http://music.testsite.com/media/system/js/mootools.js
Line: 89
"
. No K2 is not installed in my Joomla site. I'm using GavickPro Hit
Music template and GavickPro tab and Photoshow component. Strange
thing is if I change the template to something other than GavickPro
Hit Music like Beez or rhuk_milkyway then the error does not occur

On Feb 10, 7:47 pm, Phil Snell <p...@snellcode.com> wrote:
> Do you have k2 installed, or something that uses mootools SmoothScroll?  
> k2 has an implementation of SmoothScroll that causes strange behavior,
> and sounds similiar to what you are finding.  But also check in firebug
> for errors.
>
> If you need more details on the k2 / SmoothScroll issue, theres

> something here..http://community.getk2.org/forum/topics/k2-breaking-morph-accordions?...

[alanski]

The weird JQuery Tab UI tab behaviour is remedied here:
http://stackoverflow.com/questions/243794/jquery-ui-tabs-causing-screen-to-jump

I can confirm no conflict method with this does make the tabs behave!

cheers
Alan

[Pavol]

I once had a similar problem with CK Forms. The solution was
surprisingly simple: make sure JQuery and noConflict are included in
document before including Mootools. In short, add

JHTML::script('jquery.js', $path, false);
JHTML::script('jquery-noconflict.js', $path, false); //jquery-
noconflict.js contains jQuery.noConflict()

before anything that requires Mootools.

This should work if you're making a component. Module will be more
troublesome, because component or other modules could already include
Mootools. In that case you can make a system plugin that rearranges
<script> tags in html output on onAfterRender event. But that's quite
far fetched and possibly could have negative performance impact.