www.webdeveloper.com
Results 1 to 4 of 4

Thread: conflicting javascript

  1. #1
    Join Date
    May 2007
    Posts
    10

    conflicting javascript

    Hi I'm using an accordion and MultiBox on the same page which both work perfectly independently. However, when they on the same page only the accordion works. Anyone got any idea why this is happening? Thanks

  2. #2
    Join Date
    May 2007
    Posts
    10
    Here is the code...

    Code:
    <!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=ISO-8859-1" />
    <title>Untitled Document</title>
    
    
    <!-- Copy code below -->
    <link type="text/css" rel="stylesheet" href="css/multiBox.css" />
      <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <!--[if lte IE 6]>
        <link type="text/css" rel="stylesheet" href="css/multiBoxIE6.css" />
    <![endif]-->
    
    <script type="text/javascript" src="javascript/mootools-1.2.3-core-yc.js"></script>
    <script type="text/javascript" src="javascript/mootools-1.2.3.1-more-yc.js"></script>
    <script type="text/javascript" src="javascript/overlay.js"></script>
    <script type="text/javascript" src="javascript/multiBox.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
    	//call multiBox
    	var initMultiBox = new multiBox({
    		mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)
    		container: $(document.body),//where to inject multiBox
    		descClassName: 'multiBoxDesc',//the class name of the description divs
    		path: './Files/',//path to mp3 and flv players
    		useOverlay: true,//use a semi-transparent background. default: false;
    		maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing
    		addDownload: true,//do you want the files to be downloadable?
    		pathToDownloadScript: 'javascript/ForceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)
    		addRollover: true,//add rollover fade to each multibox link
    		addOverlayIcon: true,//adds overlay icons to images within multibox links
    		addChain: true,//cycle through all images fading them out then in
    		recalcTop: true,//subtract the height of controls panel from top position
    		addTips: true//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)
    	});
    });
    </script>
    <!-- Copy code above -->
    	
      <!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->
    
    	<script type="text/javascript" src="javascript/prototype.js"></script>
    	<script type="text/javascript" src="javascript/effects.js"></script>
    	<script type="text/javascript" src="javascript/accordion.js"></script>
    	<script type="text/javascript">
    			
    		//
    		//  In my case I want to load them onload, this is how you do it!
    		// 
    		Event.observe(window, 'load', loadAccordions, false);
    	
    		//
    		//	Set up all accordions
    		//
    		function loadAccordions() {
    			var topAccordion = new accordion('horizontal_container', {
    				classNames : {
    					toggle : 'horizontal_accordion_toggle',
    					toggleActive : 'horizontal_accordion_toggle_active',
    					content : 'horizontal_accordion_content'
    				},
    				defaultSize : {
    					width : 525
    				},
    				direction : 'horizontal'
    			});
    			
    			var bottomAccordion = new accordion('vertical_container');
    			
    			var nestedVerticalAccordion = new accordion('vertical_nested_container', {
    			  classNames : {
    					toggle : 'vertical_accordion_toggle',
    					toggleActive : 'vertical_accordion_toggle_active',
    					content : 'vertical_accordion_content'
    				}
    			});
    			
    			// Open first one
    			bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
    			
    			
    		}
    		
    	</script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <th scope="col"><div id="container">
    	
        
        <p align="left" class="description" >&nbsp;</p>
        <p align="left" class="description" >&nbsp;</p>
        <p align="left" class="description" >&nbsp;</p>
        <table width="540" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="540" height="67" class="projects-top" scope="col">&nbsp;</th>
          </tr>
          <tr align="center">
            <td class="projects-body"><div id="vertical_container" >
              <h1 align="left" class="accordion_toggle">dropout-london.co.uk</h1>
              <div class="accordion_content">
                <h2 align="left"><a href="images/dropout-london-screenshot.jpg" id="mb1" class="mb" title="Image 1" rel="[images]"><img src="images/dropout-london-thumb.jpg" alt="dropout-london" width="500" height="293" border="0" /></a></h2>
                </p>
              </div>
              <h1 align="left" class="accordion_toggle">bestwebsitesfor.com</h1>
              <div class="accordion_content">
                <h2 align="left"><img src="images/bestwebsitesfor-thumb.jpg" alt="bestwebsitesfor.com" width="500" height="293" /></h2>
              </div>
              <h1 align="left" class="accordion_toggle">cambridgestainedglass.co.uk</h1>
              <div class="accordion_content">
                <h2 align="left"><img src="images/cambridgestainedglass-thumb.jpg" alt="Cambridge Stained Glass" width="500" height="293" /></h2>
              </div>
              <h1 align="left" class="accordion_toggle">maxhector.com</h1>
              <div class="accordion_content">
                <h2 align="left"><img src="images/maxhector-thumb.jpg" alt="Max Hector photography" width="500" height="293" /></h2>
              </div>
            </div></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>
        <p align="left" class="description" >&nbsp;</p>
        <p align="left" class="description" >&nbsp;</p>
        </div>
        <div class="accordion_content">
    			
               
    
                <div id="horizontal_container" >
                
                    
                 
               
                        
                </div>
        
       	</div>
       	
    		
    	  <div class="accordion_content">
    	    <div id="vertical_nested_container" ></div>
        
       	</div>
       	
    		
    		
    		
    
            					
    	</div>
    
    	<div class="page-footer">
    		
    		<p>Stefan Lesik </p>
    
    	</div>
    	
    </div>
    
    <script type="text/javascript" >
      
    	//
    	// You can hide the accordions on page load like this, it maintains accessibility
    	//
    	// Special thanks go out to Will Shaver @ http://primedigit.com/
    	//
    	var verticalAccordions = $$('.accordion_toggle');
    	verticalAccordions.each(function(accordion) {
    		$(accordion.next(0)).setStyle({
    		  height: '0px'
    		});
    	});
    
    	
    </script>
    &nbsp;</th>
      </tr>
    </table>
    </body>
    </html>

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    I'm not sure if you can use two different frameworks like that in the same page. I do not know for certain how both of them work in their entirety but it would seem to me that you should pick one and use the features provided by it since more than likely you'll find similar functionality in both.

  4. #4
    Join Date
    Sep 2009
    Location
    Kiel, Germany
    Posts
    21
    mootools is a fine, lightweight javascript framework, but it is quite bad to use with other frameworks. imho you should bet on a bigger fw that covers all your needs. unfortunately it is a downside of many js-fws that they have a really, really bad namespace behaviour, especially lots of well known js-components based on jquery and others do not care for the (code-)world beside them.

    that is why i love the yui-js-framework, although the ready-to-go-gui-components are not so beautiful. yui is wrapped in a namespace and does not hurt others.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles