help needed with mootools and aculo

[IC619]

Hi everyone.

I have a test gallery page at:
http://homepage.ntlworld.com/r.hartl...st/sample.html

I have a mootools gallery with thumbnail scroller taken from this site:
http://tutorialdog.com/javascript-im...otools-part-2/

and a sliding menu from this site:
http://www.andrewsellick.com/53/sliding-menu-revisited

They both work perfectly on separate pages. However, I can't get both to work together. If I put the menu code on the same page as the gallery, the gallery breaks.

If anyone can see a solution to this problem. Please let me know.

Thanks

[jscheuer1]

Your gallery uses the mootools javascript library, and your menu uses the prototype javascript library. Both of these libraries use the $ character to define a core function/object that is used throughout each library. So it is unlikely that the two libraries may be used on the same page.

However, there are many galleries written for prototype, and many menus written for mootools. All you need to do is find a set, gallery and menu, written both for either prototype or mootools. Then they should be able to coexist on the same page.

[IC619]

Thanks for the help. I shall do some searching and see what I come up with.

Dan

[IC619]

In an update to this probelm. I found a mootools version of the menu and replaced the aculo version with it, however, i'm still having the same problem:

http://homepage.ntlworld.com/r.hartl...sample_01.html

I'm starting to get very disheartened with the whole thing.

[jscheuer1]

You are still using two different javascript libraries that both want to own the $ variable:

mootools-12.js - which according to comments in your source code is a beta, but that at the very least is a more recent version (copyright 2006 - 2008).

and:

mootools.js (copyright 2006)

Whichever two scripts (gallery and menu) you choose must both be able to work off of the same version of mootools, or whatever script library you choose to use for this project.

Once you settle on that, you should only define the external script tag for the main library once on the page. I tested on your demo, and these two libraries are not compatible, meaning that mootools-12.js will not run the menu, and plain mootools.js will not run the gallery.

[jscheuer1]

Something just occurred to me though, these various libraries have units. With mootools, some of these units can be bundled with the main program. Perhaps the menu can work with the mootools-12.js if it has the right units. Let me test this idea and get back to you.

[jscheuer1]

This is a little weird, if I remove:

<script type="text/javascript" src="sliding-side-bar/js/mootools.js"></script>

and (highlighted):

<a href="#" id="sideBarTab"><img src="sliding-side-bar/images/slide-button.gif" alt="sideBar" title="sideBar" /></a>

both menu and gallery work.

[IC619]

Oh excellent! It's working. Thanks John.

My only problems now are that the menu doesn't fully return to the original position in Firefox and the menu needs to be on the left of the page rather than the right.

Do you have any suggestions on these issues?

Thanks,
Dan

[jscheuer1]

Use this css:

	#sideBar{
		position: absolute;
		width: auto;
		height: auto;
		top: 200px;
		left:-7px;
		background-image:url(images/background.gif);
		background-position:top left;
		background-repeat:repeat-y;
		z-index: 10000;
	}
	
	#sideBarTab{
		float:right;
		height:137px;
		width:28px;
	}

And rename slide-button-active.gif to slide-button.gif and visa versa.

[IC619]

I changed the code to what you advised, and also removed all references to the gallery so I could see exactly what was going on with the menu (i'll put this back in when the code is working fine).
However, the menu now looks very strange in both Firefox and IE.

Link (you may need to refresh):
http://homepage.ntlworld.com/r.hartl...sample_01.html