Javascript Collision with moo, prototype, scriptaculous

I’m experiencing javascript errors as if some elements are not functions in javascript console.
Error: Error in parsing value for property ’display’. Declaration dropped.
Source File: ../assets/templates/modx/main.css
Line: 747 .clearfix {display: inline-block;}

Error: Unknown property ’filter’. Declaration dropped.
Source File: ../assets/snippets/maxigallery/lightboxv2/css/lightbox.css
Line: 86

Error: Error in parsing value for property ’display’. Declaration dropped.
Source File:../assets/snippets/maxigallery/lightboxv2/css/lightbox.css
Line: 101

Error: (new Element("div")).injectAfter is not a function
Source File: ../js/moo.js
Line: 697

//MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006 Valerio Proietti, <http://mad4milk.net>, MIT Style License.


I get even more errors when quickedit is enabled.

Is it because some of these functions are sharing libs? Any suggestions? My CSS Validates and so does my xhtml.

Lightbox and other gallery functions work, but my fade in graphics on my page don’t. How can I resolve the conflicts?

Thanks.

Yes, MooTools will collide with scriptaculous/prototype and jQuery libs etc.. You would have to use lightbox v2 if you use scriptaculous/prototype libs.

Thanks for the response.

I am using lightbox v2 so there is still a conflict somewhere.

All slideshows work when I click on the images, but as I said, the fade in photo in my template design doesn’t work (but shows the loader).

When I don’t use any of the ajax slideshows, the fade in photo on my template works.

I do not understand..

Quote from: gcruz at Jan 24, 2007, 04:35 PM

All slideshows work when I click on the images, but as I said, the fade in photo in my template design doesn’t work (but shows the loader).

So the css fade, eg. png image, doesn’t show up under the lightbox, but the lightbox works fine? That’s a css collision with your site template css.

Quote from: gcruz at Jan 24, 2007, 04:35 PM

When I don’t use any of the ajax slideshows, the fade in photo on my template works.

But what does this mean? if you do not use any ajax slideshows, there should be no fades visible anywhere.. so where are you seeing them?

Could you show your exact snippet calls? And a link to the site would probably help, if possible..

I have it on my dev machine, I’ll see if I can upload it.

But let’s say my template is using moofx for the header graphic to fade in.

Whenever quickedit shows up, that fade in in my header breaks.
Quickedit drop down still works.

Whenever I activate a slideshow (lightboxv2), the slideshow works, but my header graphic doesn’t show since the fade is broken.

So there are conflicts with my template effects whenever I use a slideshow or quickedit is on (when logged in as admin)

[table][tr][td]quickedit on | [/td][td]lightbox on | [/td][td]template fade works | [/td][td]quick edit works | [/td][td]slideshow works[/td][/tr]
[tr][td]no[/td][td]no[/td][td]yes[/td][td]yes[/td][td]yes[/td][/tr]
[tr][td]yes[/td][td]no[/td][td]no[/td][td]yes[/td][td]yes[/td][/tr]
[tr][td]no[/td][td]yes[/td][td]no[/td][td]yes[/td][td]yes[/td][/tr]
[tr][td]no[/td][td]yes[/td][td]yes[/td][td]yes[/td][td]yes[/td][/tr][/table]

I want at least the last row in the table where if the slideshow is on, my template header still loads.

I hope this clarifies it a bit. Thanks for looking into it.

Yes, like I already said, scriptaculous/prototype and mootools cannot be same time on a page. If you have some parts on your site that use mootools, then you have to use the slimbox in maxigallery, but do it by including the necessary javascripts to the head of your gallery template by your self and use own custom display type and custom template so that maxigallery doesn’t include the mootools library again.. But still, you can’t use quickedit at the pages that use mootools as quickedit uses scriptaculous/prototype (for now)..

Thanks, after playing around, I noticed that removing the prototype library made my graphics on my template fade.
That is why I’m looking into PHx to remove prototype css calls when I have moo effects.

Ok, but notice that if you remove prototype javascript inclusion, quickedit will probably throw bunch of javascript errors on that page, so you would need to find a way to hide the quickedit all together from those pages that have mootools in them.. I have heard rumors that there will be mootools version of quickedit sometime in near future, we’ll see..