Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Mar 10, 2013, 08:46 AM   #1
pelsar
macrumors regular
 
Join Date: Apr 2008
Location: israel
java script conflict.....

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...dernews-ticker

any ideas?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Mar 11, 2013, 05:33 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
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. ;-)
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Mar 11, 2013, 06:02 AM   #3
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by SrWebDeveloper View Post
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. ;-)
thanks Jim...now i have to translate that to "english" but at least you've given me a good starting point
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Mar 12, 2013, 06:57 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
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!

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 04:59 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC