[solved] Using multiple Mootools in one Site

rossnaumov · by **rossnaumov** on Fri Nov 06, 2009 8:57 am

Hello
I am trying to use both these Mootools products (below) in the one HTML site i'm building but can't seem to get them working together. They will work independently but unfortunately not together. From my knowledge i can see that both the .js file names are the same "mootools.js" leading me to believe this could be where the issue is. I have tried saving one in a separate folder **** "mtl/mootools.js" (see code below) but no such luck. I have looked through Mootools documentation http://mootools.net/docs/core for a possible solutions and googled my dilemma but no luck.

Can anyone help?

Thank you - Ross

**** I'M USING THESE MOOTOOLS PRODUCTS ****

#1. http://nettuts.s3.amazonaws.com/022_Moo ... mple.html# ***** (MOUSE HOVER EFFECT)

#2. http://www.roscripts.com/uploads/smooth ... index.html ***** ( SMOOTH SCROLLING)

**** MY CODE ****

Line number On/Off | Expand/Contract | Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ross</title>
 
 
<SCRIPT src="mootools.js" type="text/javascript"></SCRIPT>
 
 
<STYLE type="text/css" media="screen">
    
    /*--- the base ---*/
    #pageWrap {
        position: absolute; z-index: 10; top: 0px; left: 780px;
    }
    #audioPage {
        position:absolute; top:50px; left:-85px; padding:0px; z-index:10;
    }   
    #psdPage {
        position:absolute; top:50px; left:-200px; padding:0px; z-index:10;
    }
    /*--- the popup ---*/
    #bubbleWrap {
        position: absolute; z-index: 50; left: 0px; top: 285px;
    }
    .bubble {
        position: absolute;
    }
    .clear {
        clear: both;
    }
    
    /*--- THE LOGO ---*/
    #pageWrap2 {
        position: absolute; z-index: 5; top: 50px; left: 0px;
    }
    #psdPage2 {
        margin-right: 6px; float: left; cursor: pointer; 
        }
    #netPage2 {
        margin-right: 6px; float: left; cursor: pointer;
    }   
    #audioPage2 {
        float: left; cursor: pointer; 
    }
    #bubbleWrap2 {
        position: absolute; z-index: 10; left: 0px; top: 285px;
    }
    .bubble2 {
        position: absolute;
    }
    .clear {
        clear: both;
    }
</STYLE>
 
 
<SCRIPT type="text/javascript" charset="utf-8">
window.addEvent('domready', function() {
    
    // Create variables (in this case two arrays) representing our bubbles and pages
    var myPages = $$('.page');
    var myBubbles = $$('.bubble');
    
    // Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container 
    myBubbles.setStyle('opacity', 0);
    $('bubbleWrap').setStyle('visibility','visible')
    
    // Add our events to the pages
    myPages.each(function(el, i) {
        el.set('morph', {link : 'cancel'});
        
        el.addEvents({
            'mouseenter': function() {
                myBubbles[i].morph({
                    'opacity' : 1,
                    'margin-top' : '-0px'
                });
            },
            'mouseleave' : function() {
                myBubbles[i].morph({
                    'opacity' : 0,
                    'margin-top' : 0
                });
            }   
        });
    });
    
    // 2nd LOT
    
    // Create variables (in this case two arrays) representing our bubbles and pages
    var myPages2 = $$('.page2');
    var myBubbles2 = $$('.bubble2');
    
    // Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container 
    myBubbles2.setStyle('opacity', 0);
    $('bubbleWrap2').setStyle('visibility','visible')
    
    // Add our events to the pages
    myPages2.each(function(el, i) {
        el.set('morph', {link : 'cancel'});
        
        el.addEvents({
            'mouseenter': function() {
                myBubbles2[i].morph({
                    'opacity' : 1,
                    'margin-top' : '-0px'
                });
            },
            'mouseleave' : function() {
                myBubbles2[i].morph({
                    'opacity' : 0,
                    'margin-top' : 0
                });
            }   
        });
    });
});
 
</SCRIPT>
 
<link rel="stylesheet" href="index5.css" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
    body {margin: 0px; padding: 0px;}
    .footer2 {width: 100%; height: 1400px; background-image:url(images/BGgradient.gif);
    position:absolute;
    top:550px;
    padding:0px;
    z-index:10;
    }
.style5 {color: #6e7681}
</style>
 
 
 
 
 
<!--SMOOTH SCROLLING --> 
<script language="JavaScript" type="text/javascript" src="mtl/mootools.js"></script> 
<script type="text/javascript"> 
        window.onDomReady(function(){ new SmoothScroll({duration: 2800}); });
    </script> 
<!-- TO HERE -->
 
 
 
 
  
</head>
<body>
<div class="main_box1">
    <a id="main_box_image1" href="#" title="Test"><span>Contact Me</span></a>  </div>
     
<div class="footer2"></div>
 
<div id="wrap">
 
 
 
 
 
 
<!--SMOOTH SCROLLING  -->
<div style="position:fixed; right:400px; top:30px"><a href="#red" title="smoothly scroll to the red anchor">red</a> / <a href="#blue" title="smoothly scroll to the blue anchor">blue</a> / <a href="#gray" title="smoothly scroll to the gray anchor">gray</a> / <a href="#yellow" title="smoothly scroll to the yellow anchor">yellow</a> / <a href="#black" title="smoothly scroll to the black anchor">black</a> / <a href="#green" title="smoothly scroll to the green anchor">green</a></div> 
<a name="red" id="red"></a> 
<div style="width:10px;height:300px;background-color:red;margin:0px;"></div> 
<a name="blue" id="blue"></a> 
<div style="width:10px;height:300px;background-color:blue;margin:0px;"></div> 
<a name="gray" id="gray"></a> 
<div style="width:10px;height:300px;background-color:gray;margin:0px;"></div> 
<a name="yellow" id="yellow"></a> 
<div style="width:10px;height:300px;background-color:yellow;margin:0px;"></div> 
<a name="black" id="black"></a> 
<div style="width:10px;height:300px;background-color:black;margin:0px;"></div> 
<a name="green" id="green"></a> 
<div style="width:10px;height:300px;background-color:green;margin:0px;"></div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
 
 
 
 
 
 
  <div class="designDevelopment"></div>
  <div class="designDevelopmentHeading"></div>
  <div class="navCover"></div>
  <div class="leftCover"></div>
  <div class="plus"></div>
  <div class="homepageWording"></div>
  <div class="plus"></div>
 
<!--ENIGMA -->
<div class="main_box01">
    <a id="main_box_image01" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_enigma"></div>
  <div class="enigma_pic"></div>
 
<!--OH SEW -->  
  <div class="main_box2">
    <a id="main_box_image2" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_ohsewnoosa"></div>
  
  <!-- SOUTHSIDE CLEANING -->
  <div class="main_box3">
    <a id="main_box_image3" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_southsidecleaning"></div>
  
  <!-- FALLOW -->
  <div class="main_box4">
    <a id="main_box_image4" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_fallowfox"></div>
  
  <!-- CONSTRUCTIONS-->
  <div class="main_box5">
    <a id="main_box_image5" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_suncoastConstructions"></div>
  
  <!-- ROLLYS -->
  <div class="main_box6">
    <a id="main_box_image6" href="#" title="Test"><span>Email Us</span></a>  </div>
  <div class="BGimage_rollysCustoms"></div>
  
<DIV id="siteWrap">
        <DIV id="bubbleWrap" style="visibility: visible; ">
            <div class="bubble"><img src="images/homepageWording2.gif" alt="PSDTUTS" /></div> 
            <div class="bubble"><img src="images/homepageWording2.gif" alt="NETTUTS" /></div> 
            <div class="bubble"><img src="images/homepageWording2.gif" alt="AUDIOTUTS" /></div>
</DIV>
        
        <DIV id="pageWrap">
            <div class="page" id="psdPage"><a href="work.html"><img src="images/workHome.gif" alt="PSDTUTS" /></a></div> 
            <div class="page" id="audioPage"><a href="work.html"><img src="images/aboutHome.gif" alt="AUDIOTUTS" /></a></div>
            
    </DIV>
</DIV>
 
<div id="siteWrap2"> 
        <div id="bubbleWrap2" style="visibility: hidden;"> 
            <div class="bubble2"><img src="images/homepageWording2.gif" alt="PSDTUTS" /></div> 
        </div> 
        
        <div id="pageWrap2"> 
            <div class="page2" id="psdPage2"><a href="work.html"><img src="images/logoHome.gif" alt="PSDTUTS" /></a></div>
            
        </div> 
  </div> 
  
</div>
</body>
</html>

wowenkho · by **wowenkho** on Fri Nov 06, 2009 6:33 pm

hello. i'm if this is going to be harsh, but your implementation of CSS and JS in your head tag is very unsound and unstable. not to mention, the longer your post become because of your pasted code, the more i got hesitant in planning to "forgive" you for not posting appropriately according to help rules indicated above. i had to fix everything into bbcode so it just won't be all messed up.

going back to the topic, if you would want to at least find ways to debug your code, you have to at least keep them in order and not just doing some copy-pasting barrage hoping that it will mash up perfectly. JS, as powerful as it may possibly be in itself and because of MooTools, is still fragile when code organization is not taken care of.

so what i'm suggesting is to fix your implementation such that all your CSS links and tags come first (and if possible they're all included as documents outside of your HTML). after that, then you can include the JS files of whatever plugins you've got to apply to your site. similarly your personal JS script would be better off being in a different document as well.

from there, needless to mention, it'll be easier to look for bugs and whatnot. it'll be more pleasing to the eye too. in a way, you're doing all of us a favor.

here's how a clean implementation inside your <head> tag could look like:

Line number On/Off | Expand/Contract | Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ns="http://www.lazurski.pl/">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    <title>Ross</title>
    
    <!-- CSS implementations come first and are imported via links as much as possible -->
    <link rel="stylesheet" type="text/css" href="css/pluginstyles.css" />
    <link rel="stylesheet" type="text/css" href="css/anotherpluginstyles.css" />
    <link rel="stylesheet" type="text/css" href="css/mystyles.css" />
    
    <!-- JS implementations come next and are imported via the src attribute as much as possible -->
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/mootools-more.js"></script>
    <script type="text/javascript" src="js/plugin.js"></script>
    <script type="text/javascript" src="js/anotherplugin.js"></script>
    <script type="text/javascript" src="js/myscript.js"></script>
      
  </head>
  <body>
     
     <!-- your HTML content -->
     
  </body>
</html>

rossnaumov · by **rossnaumov** on Sat Nov 07, 2009 9:11 am

Thanks for your help wowenkho. Harsh no, I'm always looking to move forward and improve on what I already know. I guess that's what i love about the web .. there's always better ways to do things!... I digress now. I have cleaned up my HTML page significantly as suggested and created a folder called js and copied both the MOOTOOLS files in there re-naming them appropriately to not get confused. I have also moved my CSS as suggested. Do you mind taking a look at what i've done so far and let me know what you think? I have through "help rules" so i hope to follow the necessary procedures. please let me know of any other ways on improving my communication.

Hover effect - version:"1.2.0"
Smooth Scrolling - couldn't find a version

Thanks - Ross

Line number On/Off | Expand/Contract | Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Ross</title>
    
    <link rel="stylesheet" href="index5a.css" type="text/css" />
 
    <!--HOVER -->
    <SCRIPT src="js/mootools_hover.js" type="text/javascript"></SCRIPT>
    
    <!--SMOOTH SCROLL --> 
    <SCRIPT src="js/mootools_scroll.js" type="text/javascript"></SCRIPT>
 
    <!--SMOOTH SCROLL -->
    <SCRIPT type="text/javascript" charset="utf-8"> 
        window.onDomReady(function(){ new SmoothScroll({duration: 2800}); });
    </script>
    
    <!--HOVER -->
    <SCRIPT type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
    
    // Create variables (in this case two arrays) representing our bubbles and pages
    var myPages = $$('.page');
    var myBubbles = $$('.bubble');
    
    // Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container 
    myBubbles.setStyle('opacity', 0);
    $('bubbleWrap').setStyle('visibility','visible')
    
    // Add our events to the pages
    myPages.each(function(el, i) {
        el.set('morph', {link : 'cancel'});
        
        el.addEvents({
            'mouseenter': function() {
                myBubbles[i].morph({
                    'opacity' : 1,
                    'margin-top' : '-0px'
                });
            },
            'mouseleave' : function() {
                myBubbles[i].morph({
                    'opacity' : 0,
                    'margin-top' : 0
                });
            }   
        });
    });
    
});
 
</SCRIPT>
 
    </head>
    <body>
 
    <!-- your HTML content -->
 
    </body>
</html>

wowenkho · by **wowenkho** on Sat Nov 07, 2009 9:59 am

first of all, if you really have read the help rules clearly, you should realize that whatever code you place in your posts should be wrapped with the code, html, css, or js bb tags for readability purposes. i wrapped it once again for you..

where's your mootools.js file all of a sudden? it should be included before you place your other mootools plugins and whatnot.

rossnaumov · by **rossnaumov** on Sat Nov 07, 2009 11:30 am

Do i wrap the code by downloading GeSHi ?

wowenkho · by **wowenkho** on Sat Nov 07, 2009 11:36 am

not really. just be aware that there are button on the top of the textarea where you type your posts. the code, css, html, and js buttons help you wrap your code nicely.

rossnaumov · by **rossnaumov** on Sat Nov 07, 2009 11:56 am

Yes great thank you! I hope I've wrapped this correctly!?

I have also added my mootools.js directly below <link rel="stylesheet" href="index5a.css" type="text/css" />

rossnaumov · by **rossnaumov** on Sat Nov 07, 2009 11:57 am

Sorry i hit enter before i wrapped it!!!

Line number On/Off | Expand/Contract | Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Ross</title>
    
    <link rel="stylesheet" href="index5a.css" type="text/css" />
    
    <script language="JavaScript" type="text/javascript" src="mootools.js"></script> 
 
    <!--HOVER -->
    <SCRIPT src="js/mootools_hover.js" type="text/javascript"></SCRIPT>
    
    <!--SMOOTH SCROLL --> 
    <SCRIPT src="js/mootools_scroll.js" type="text/javascript"></SCRIPT>
 
    
    <!--SMOOTH SCROLL -->
    <SCRIPT type="text/javascript" charset="utf-8"> 
        window.onDomReady(function(){ new SmoothScroll({duration: 2800}); });
    </script>
    
    
    
<!--HOVER -->
    <SCRIPT type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
    
    // Create variables (in this case two arrays) representing our bubbles and pages
    var myPages = $$('.page');
    var myBubbles = $$('.bubble');
    
    // Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container 
    myBubbles.setStyle('opacity', 0);
    $('bubbleWrap').setStyle('visibility','visible')
    
    // Add our events to the pages
    myPages.each(function(el, i) {
        el.set('morph', {link : 'cancel'});
        
        el.addEvents({
            'mouseenter': function() {
                myBubbles[i].morph({
                    'opacity' : 1,
                    'margin-top' : '-0px'
                });
            },
            'mouseleave' : function() {
                myBubbles[i].morph({
                    'opacity' : 0,
                    'margin-top' : 0
                });
            }   
        });
    });
    
});
 
</SCRIPT>
 
      
</head>
<body>
<div class="main_box1">
    <a id="main_box_image1" href="#" title="Test"><span>Contact Me</span></a>  </div>
     
<div class="footer2"></div>
 
<div id="wrap">
 
 
</body>
</html>

wowenkho · by **wowenkho** on Sat Nov 07, 2009 12:53 pm

the question now is: does it work? if not, does it throw any errors (and i'm hoping you're using firebug of firefox to do so).

rossnaumov · by **rossnaumov** on Sun Nov 08, 2009 5:39 am

Yes i'm getting 3 errors in firebug

#1. C.prototype is undefined
#2. el.set is not a function
#3. el.removeEvents is not a function

Although i have fixed the flicker i get each time i click the nav menu to view the Smooth Scrolling effect!!

Can i recap on my last revisions please as i'm a little confused.

To clean up my code i renamed my .js files and put it in a folder called "js" I did the same with the Smooth Scroll (see below)
HOVER

Line number On/Off | Expand/Contract | Select all

<SCRIPT src="js/mootools_hover.js" type="text/javascript"></SCRIPT>

SMOOTH SCROLL

Line number On/Off | Expand/Contract | Select all

<SCRIPT src="js/mootools_scroll.js" type="text/javascript"></SCRIPT>

I'm confused as to what file goes in here? Which i feel might be the issue.

Line number On/Off | Expand/Contract | Select all

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

See my revised code below

Line number On/Off | Expand/Contract | Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Ross</title>
   
    <link rel="stylesheet" href="index5a.css" type="text/css" />
   
    <script language="JavaScript" type="text/javascript" src="js/mootools.js"></script>
 
    <!--HOVER -->
    <SCRIPT src="js/mootools_hover.js" type="text/javascript"></SCRIPT>
   
    <!--SMOOTH SCROLL -->
    <SCRIPT src="js/mootools_scroll.js" type="text/javascript"></SCRIPT>
 
    
    <!--SMOOTH SCROLL -->
    <SCRIPT type="text/javascript" charset="utf-8">
        window.onDomReady(function(){ new SmoothScroll({duration: 2800}); });
    </script>
   
   
   <!--HOVER -->
    <SCRIPT type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
   
    // Create variables (in this case two arrays) representing our bubbles and pages
    var myPages = $$('.page');
    var myBubbles = $$('.bubble');
   
    // Set bubbles opacity to zero so they're hidden initially and toggle visibility on for their container 
    myBubbles.setStyle('opacity', 0);
    $('bubbleWrap').setStyle('visibility','visible')
   
    // Add our events to the pages
    myPages.each(function(el, i) {
        el.set('morph', {link : 'cancel'});
       
        el.addEvents({
            'mouseenter': function() {
                myBubbles[i].morph({
                    'opacity' : 1,
                    'margin-top' : '-0px'
                });
            },
            'mouseleave' : function() {
                myBubbles[i].morph({
                    'opacity' : 0,
                    'margin-top' : 0
                });
            }   
        });
    });
   
});
 
</SCRIPT>
     
</head>
<body>
 
</body>
</html>

[solved] Using multiple Mootools in one Site

[solved] Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Re: Using multiple Mootools in one Site

Who is online