PDA

View Full Version : help needed with mootools and aculo



IC619
01-13-2009, 06:31 PM
Hi everyone.

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

I have a mootools gallery with thumbnail scroller taken from this site:
http://tutorialdog.com/javascript-image-gallery-using-mootools-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
01-14-2009, 05:59 AM
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
01-14-2009, 04:35 PM
Thanks for the help. I shall do some searching and see what I come up with.

Dan

IC619
01-14-2009, 05:00 PM
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.hartlett/gallerytest/sample_01.html

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

jscheuer1
01-14-2009, 06:36 PM
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
01-14-2009, 08:48 PM
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
01-14-2009, 08:53 PM
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
01-14-2009, 09:00 PM
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
01-15-2009, 05:27 AM
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
01-15-2009, 03:29 PM
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.hartlett/gallerytest/sample_01.html

jscheuer1
01-15-2009, 04:21 PM
Actually with a little style tweaking, it would probably be fine in FF. That's all I tested it in. I see the problems in IE though now. I'm thinking that a different script might be best, one already designed to slide in from the left.

I'm looking at the demo page for this one right now to see how flexible it is according to the author visa vis which side it comes from.

jscheuer1
01-15-2009, 04:31 PM
There is always:

http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

and since it doesn't use any script library, it shouldn't conflict with mootools, though it might.

IC619
01-16-2009, 03:19 PM
There is always:

http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

and since it doesn't use any script library, it shouldn't conflict with mootools, though it might.

I had looked at the omnislide menu before. However, I really like the effect of the mootools one so I decided on that.
How hard would it be for a javascript noob (such as myself) to build a sliding menu just like the mootools version, but on the left, from the ground up?

Also, how long would it take an experienced javascripter (if that's the correct term lol) to build a menu like that?

Oh and one last thing, is it possible to style the Omnislide to look like the mootools version? (without the animations obviously).

jscheuer1
01-16-2009, 04:17 PM
Probably quite a bit harder than for me. I was thinking about it, and was encouraged at how easy it appeared to be at first in FF. But now I see that it will need a bit of rethinking and perhaps even recoding.

As it turns out though, I'm kind of stuck here at the house for a bit waiting on some service people, so I may have a crack at it.

IC619
01-16-2009, 05:14 PM
That would be great and very much appreciated.

I'm also looking into some alternative galleries (i've just found one using Flash). But saying that, I'm still hoping to have this menu as it's perfect for my site.

jscheuer1
01-16-2009, 07:11 PM
OK, I've got a version working. It turns out that Fx.Styles is now Fx.Morph, and that the role once played by myEffect.custom() is now myEffect.start(). With those changes, some code additions, mirroring the images for the right look from the left side, and some style changes, here is a working copy:

2438

Notes: The original version wasn't very cross browser, this one is, at least in its current configuration. It works with your mootools-12.js (the one from the gallery), as well as the mootools googleapis I've used in my demo. I added some selectors to the styles so that they wouldn't get confused with elements outside of the menu.

jscheuer1
01-17-2009, 11:48 AM
Several improvements in efficiency and modularity:

2439

ArchangelX
08-04-2009, 12:03 AM
This is a fantastic piece of work...I have a question though. Is there any way to make the menu float with the page? As in stay in the same location as the page scrolls up and down?

Thanks!

ArchangelX
08-04-2009, 02:31 AM
Okay, figured it out. Just needed to change the position of the sidebar from absolute to fixed.