Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

java script conflict.....

P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
i have two pieces of javascript/mootools on my home page...and there is a conflict....

http://www.spinnerdesign.co.il/index-scroller.php


there is a drop down form on top, under CONTACT
and on the bottom there is a image scroller which stops after a few seconds (it should continue)

the conflict is this line:

line 15 <script type='text/javascript' charset='utf-8' src='js/jquery.min.js'></script>

if i remove it, then the scroller on the bottom works but the contact form no longer works

the scroller came from here
http://www.eccemedia.com/blog/blog.e/simple-mootools-12-image-slidernews-ticker

any ideas?
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
I see two issues.

Issue #1:

Looks like you're loading two JS frameworks on one page - jQuery (popup/validation stuff at top) and Mootools (scroller at bottom). Both have been known to use the $ (global alias) and thus conflict with each other. The best fix (not the only) is to wrap the code for each with statements that remove this conflict, examples below of exactly what to do for each:

For jQuery code:

Code: 
// Wrapper to disable the $ global alias completely for jQuery
jQuery.noConflict();

// For jQuery code only
(function($){

// set a local $ variable only available in this block as an alias to jQuery

... copy/paste your jQuery specific code here ...

})(jQuery);

For Mootools code:

Code: 
// Wrapper For Mootols
(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id

... copy/paste your Mootools specific code here ...

})(document.id);

So you'll need to edit popup.js, validation.js and control.js inserting the proper wrapper code in each, from what I can tell. Other people rename $ to $J, other folks prefer to use $jQuery via search/replace in their code and that's fine, too, but I don't suggest that because you can easily replace variable references by accident that are not intended to be changed. So the wrapper fix ensures the original code is left intact.

Issue #2:

You are loading Mootools library twice:

<script type="text/javascript" src="js/mootools.1.2.3.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>

I'd consider commenting out the second and seeing if it works without it to optimize things.


A final comment is I try never to mix frameworks on the same page unless necessary, and try to stick with jQuery which, without question, has the most and best supported plugins including validation and scrolling such as you're using here. If you can drop Mootools do it. Otherwise you need to remember they both hijack $ as the same global variable and you'll need to jump through hoops so both can co-exist peacefully on the same page. Not to mention how easily a web site can get bloated by using multiple frameworks like this. ;-)
 
P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
SrWebDeveloper said:
I see two issues.

Issue #1:

Looks like you're loading two JS frameworks on one page - jQuery (popup/validation stuff at top) and Mootools (scroller at bottom). Both have been known to use the $ (global alias) and thus conflict with each other. The best fix (not the only) is to wrap the code for each with statements that remove this conflict, examples below of exactly what to do for each:

For jQuery code:

Code: 
// Wrapper to disable the $ global alias completely for jQuery
jQuery.noConflict();

// For jQuery code only
(function($){

// set a local $ variable only available in this block as an alias to jQuery

... copy/paste your jQuery specific code here ...

})(jQuery);

For Mootools code:

Code: 
// Wrapper For Mootols
(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id

... copy/paste your Mootools specific code here ...

})(document.id);

So you'll need to edit popup.js, validation.js and control.js inserting the proper wrapper code in each, from what I can tell. Other people rename $ to $J, other folks prefer to use $jQuery via search/replace in their code and that's fine, too, but I don't suggest that because you can easily replace variable references by accident that are not intended to be changed. So the wrapper fix ensures the original code is left intact.

Issue #2:

You are loading Mootools library twice:

<script type="text/javascript" src="js/mootools.1.2.3.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>

I'd consider commenting out the second and seeing if it works without it to optimize things.


A final comment is I try never to mix frameworks on the same page unless necessary, and try to stick with jQuery which, without question, has the most and best supported plugins including validation and scrolling such as you're using here. If you can drop Mootools do it. Otherwise you need to remember they both hijack $ as the same global variable and you'll need to jump through hoops so both can co-exist peacefully on the same page. Not to mention how easily a web site can get bloated by using multiple frameworks like this. ;-)
Click to expand...

thanks Jim...now i have to translate that to "english" but at least you've given me a good starting point
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Your site has two frameworks on one page which is normally associated with a more experienced developer so the lingo is suited to that level. Or, and I mean absolutely NO disrespect to you, beginners who do a little research and end up copy/paste solutions with a little editing to customize. That's a very dangerous thing. Since you joked you'll translate to English (from geek speak) I take it you're likely in the latter category. ;)

Concepts you should learn from this:

1) Many frameworks use $ or other characters to represent objects, including the entire framework. These are known as aliases, problem is many frameworks use the same aliases causing a collision and browser mayhem.

2) The wrapper code creates a private function aka anonymous function - so knowledge of functions and scopes is assumed (basic coding stuff common to many languages)

3) Know about loading scripts inline and within headers, and that the best way to load a framework (i.e. jQuery lirbary v1.9.1 as of this writing) is to download the compressed version, and once you're more experienced you can pick which components of the library to include via the download site options.

The rest is up to you - visit jQuery.com and click on support, the learning center is a great resource to pick up the nuances. After a while you'll be bitching like the rest of us that the docs suck!

:p
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom