Solved

joomla template breaks when we add drop down menu

Posted on 2010-09-05
10
359 Views
Last Modified: 2012-05-10
Hello,

We created a javascript drop down menu (select country) which uses jquery, for some reason when we drop it into our joomla template via a custom HTM module it breaks.

We recieve the following errors from IE however we cant figue out what is happening.

Message: 'this.$events[...].keys' is null or not an object
Line: 47
Char: 978
Code: 0
URI: http://www.mazero.com/media/system/js/mootools.js


Message: Object doesn't support this property or method
Line: 73
Char: 1
Code: 0
URI: http://www.mazero.com/media/system/js/caption.js


Message: 'null' is null or not an object
Line: 12
Char: 2
Code: 0
URI: http://www.mazero.com/index.php

Please see http://www.mazero.com/index.php (select country menu top right position).

Any help or suggestions greatly appreciated.
0
Comment
Question by:PlumInternet
  • 5
  • 4
10 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 33605976
since you are using both mootools and jquery there will be a conflict for the $, since you have added jquery recently into the module use the noconflict function which will free the $ for mootools usage..

http://api.jquery.com/jQuery.noConflict/

try and see if this solves the problem
0
 

Author Comment

by:PlumInternet
ID: 33606089
We gave it ago with no luck.
0
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33606211
you have to include this after the jquery js has been loaded it will at least remove those errors.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
	jQuery('#country_menu').clickMenu({arrowSrc:''}); 
});
</script>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:kadaba
ID: 33606217
I was able to get rid of the errors, I just tried... check the attached file. I am not sure about the mootools error though.

mazero.html
0
 

Author Comment

by:PlumInternet
ID: 33606224
Hey Kadaba,

That has resolved the errors however the menu drop down doesnt fold up.

Thanks
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33606262
the menu is proper but hiding behind the search... try putting the menu (just for testing) somewhere else on the page. say near the client login and check
0
 

Author Comment

by:PlumInternet
ID: 33606286
We have moved it to the logo position but with no luck
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33606336
I was actually checking in FF and it works... even the file which i sent last, i changed the position of the menu and it worked... So there must be something which is pranky.. I ll have a look at it bit later.. or you can open a new question for that ans see if any one comments.. keep this open until its fixed.
0
 
LVL 7

Expert Comment

by:Vimal DM
ID: 33633914
Hai,

I too had an experience with design when using "mootools.js".

I suggest you not to go for "mootools.js" source,kindly refer some other jquery file to implement your functionality.

mootools.js - contains default setting,names and tags which will affect the our way of doing design issues.

Thanks
0
 

Author Closing Comment

by:PlumInternet
ID: 33657552
This partially resolved the issue, there was also problems with the CSS.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question