Hi I am working on a website, that has 2 JavaScript elements. I have a post in another thread about loading content into a HTML DIV, I have that partially working. Doesn't work from a link yet. Does work on initial page load.

Ok my problem is:

I am using two open source JavaScripts imageMenu, and e2_photo_gallery. I can load one or the other just fine but if I try and load them both on the same page parts of each show up but neither function properly. In the imageMenu the images show up and the links work however the JavaScript animation doesn't. e2_photo_gallery loads below it however all styling is broken, and the JavaScript functions won't load. (Basically looks like an un-formatted DIV)

The imageMenu is my navigation bar, and the e2_photo_gallery is only on the photo album page, however what I would like to do is get them both working on the same page, then make some switches. I'd like index.php to basically be a container, has the main logo banner, and imageMenu but when you click the link in the imageMenu I would like it to target and load in a DIV.

Recommended Answers

All 4 Replies

Most probably they both have the same id or class names. and they might even contain the same variable names which is another issue

If these to libs are well written they will each put a maximum of ONE symbol in the global name space, and each will use its own obscure prefix for any element IDs.

But maybe that's a big IF.

So as WickedS says, probably a conflict of one with the other.

Deconfliction could be a sizeable task. Easiest approach is to leave the larger lib untouched and work on the smaller but it's a reasonably expert job.

For diagnosis, I suggest Douglas Crockford's JSLINT which will help with spotting function/class/namespace conflicts. Run each lib through JSLINT to produce two reports listing globals and members. Much easier than going through manually. But whichever diagnosis method you employ, you'll then have fun renaming things and making sure nothing breaks - judicious use of find/replace in your favourite text editor.

If you're unlucky it will be element IDs. If I recall correctly, JSLINT won't help with that. It will be a pure hard slog.

Sorry to be a bit negative but hopefully JSLINT will help (by the way it's a Yahoo widget so you need to install the widget shell first).

Hope this helps

Airshow

imageMenu's JavaScript is quite a bit shorter so I am going to try and re-Id that one, and the required DIV sections.

I'll let you know if tat solves it or not, thanks for the help. Also is JSLINT able to run on MAC OS X?

Uzu,

I rather think you can run JSLINT under MacOS as long as you have a Java interpreter available to you.

See here http://www.jslint.com/rhino/index.html

As MacOSX is *nix based, I rather expect this feature is either included or can be installed. My experience of the Mac stopped at 7, so I'm in a poor position to advise in detail. I'm sure it's quite easy to find out .......

.... or even better, I just discovered there's an online version: http://www.jslint.com/, doh!

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.