NOTE!
I've included a ZIP of all the site files in this message!

-------------------

I am currently building a site that uses AJAX, jQuery, and Mootools javascripts.

I use the jQuery to preload images in the CSS.

The AJAX is used to load dynamic content in a specified DIV.

I am using a Mootools content carousel/image scroller with Vimeo video files (instead of images).

--------------------

I've tried putting the Mootools (mootools.js) script at the end of my index.html.
The script that utilizes the Mootools is located in the "video.html" page (also set to dynamically load in the DIV).

The buttons that control the carousel (prev,next) work perfectly fine in Safari 4, but do not work in Firefox 3.5. They only way it works in Firefox is if I open the "video.html" page directly.

Right now I have a "loadScript.js" file externally linked to the "index.html" that loads the file via an "onClick" javascript function via the "home.html" file (dynamically loaded default content for the main page).

------------------

I did some research and it says that I need to not use innerHTML and append the javascript to the page DOM.

Unfortunately this above my level of knowledge.

I have these scripts loaded in the HEAD of my index.html

<script type="text/javascript" src="/beta2/js/ajax.js"></script>
<script type="text/javascript" src="/beta2/js/ajax-dynamic-content.js"></script>
<script type="text/javascript" src="/beta2/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/beta2/js/preloadCssImages.jQuery_v5.js"></script>
<script type="text/javascript" src="/beta2/js/loadscript.js"></script>

The dynamic AJAX content is loaded on the index.html page with this; I also included how the home.html links load the pages in the DIV "home". Two functions are called, one for the AJAX content and one to load the script in the DIV (loadcssfile)

<script type="text/javascript">
ajax_loadContent('home','/beta2/content/home.html');
</script>

<a href="#" onclick="ajax_loadContent('home','/beta2/content/video.html');return loadjscssfile('/beta2/js/mootools.svn.js','js')" id="video"><span>FILM</span></a>

The loadscript.js has the following:

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

The video page with Mootools Carousel has the following script in the beginning of the file:

<script type="text/javascript">

window.addEvent('domready', function(){ 
	  var totIncrement		= 0;
	  var increment			= 482;
	  var maxRightIncrement	= increment*(-6);
	  var fx = new Fx.Style('myList', 'margin-left', {
				duration: 1000,
				transition: Fx.Transitions.Back.easeInOut,
				wait: true
	   });
	   
	   //-------------------------------------
	  // EVENTS for the button "previous"
	  $('previous').addEvents({ 
          'click' : function(event){ 
		  if(totIncrement<0){
					totIncrement = totIncrement+increment;
					fx.stop()
					fx.start(totIncrement);
				}
			}			  	  
      }); 
	 
       //-------------------------------------
	  // EVENTS for the button "next"
  	  $('next').addEvents({ 
          'click' : function(event){ 
			 if(totIncrement>maxRightIncrement){
				 totIncrement = totIncrement-increment;
		    	fx.stop()
				fx.start(totIncrement);
			}
          }		  		  
      })

	 
});
</script>

Somehow the Carousel works just fine in Safari 4 but not in Firefox when it tries to execute Mootools in either the "index.html" page or the dynamically loaded "video.html" page. It DOES WORK when its opened BY ITSELF aka http://www.pointclickshootatl.com/be...ent/video.html