Jquery/Mootools

[suarve]

Hi,

Have used a grteat JQuery plugin called Innerfade, thats lets you fade anything within an element. A client wants this effect on this site. However, his site uses Mootools so when I import the JQuery library some of the mootools efefcts don't work.

Can anyone recommend a similar plugin/effect using mootools?

Thanks

 

[uchuff]

If the conflict is due to Mootools expecting to use $ for something you could try setting JQuery noconflict:

http://docs.jquery.com/Core/jQuery.noConflict

I have no idea if it's that as I've never used Mootools, but Googling for sample Mootools code returned some results using $ so it could be that.

 

[suarve]

I did just try that, but unfortunately it disables all efefcts on the page

 

[Nirvana]

This is completely off the top of my head and a total shot in the dark, but I seem to remember there's an old version of jquery which doesn't use the $ in the same way as the newer versions (as was mentioned, this is what causes a lot of the conflicts).

Whether the old version will support the plugin you want to use I have no idea.

Sorry I can't be of more help, maybe some Googling will reveal more...

 

[unwashed potato!]

i had this problem before and found a solution to it. will dig through some old pages to try and find it.

edit:

this might not work but worth a try

<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
</script>

then for the jquery code use $j instead of $

 

[suarve]

i had this problem before and found a solution to it. will dig through some old pages to try and find it.

edit:

this might not work but worth a try



then for the jquery code use $j instead of $

I tried replacing the $ with jQuery and the no conflict plugin to no avail.

Will give that a try.

EDIT: for any of those interested, the plugin can be found here.

Anyone who finds something like, but in Mootools can have a huge internetz cookie.

 

[uchuff]

I did just try that, but unfortunately it disables all efefcts on the page

Looking at the innerfade code it appears to use $ internally. You will probably need to edit the jquery.innerfade.js and replace all the references to $ with jQuery.

E.g

(function($) {

    $.fn.innerfade = function(options) {

Should be

(function(jQuery) {

    jQuery.fn.innerfade = function(options) {

etc.

Oh and of course any JQuery code you've written in the page to refence the jQuery object rather than $.

Also it's important your page is doing things in the correct order, it should be:

- Jquery include
- Set JQuery noconflict
- Include other libraries (Mootools etc).

Ideally of course you'd use one library (e.g. JQuery OR Mootools) but the above should work.

 

[suarve]

Looking at the innerfade code it appears to use $ internally. You will probably need to edit the jquery.innerfade.js and replace all the references to $ with jQuery.

E.g

(function($) {

    $.fn.innerfade = function(options) {

Should be

(function(jQuery) {

    jQuery.fn.innerfade = function(options) {

etc.

Oh and of course any JQuery code you've written in the page to refence the jQuery object rather than $.

Also it's important your page is doing things in the correct order, it should be:

- Jquery include
- Set JQuery noconflict
- Include other libraries (Mootools etc).

Ideally of course you'd use one library (e.g. JQuery OR Mootools) but the above should work.

Have tried all that, except I imported the noconflct first.

At least I have a couple of things to try tomorrow Ever since I showed my boss that you can make things fade in and out, everything has do this now

 

[Inquisitor]

Looking at the innerfade code it appears to use $ internally. You will probably need to edit the jquery.innerfade.js and replace all the references to $ with jQuery.

E.g

(function($) {

    $.fn.innerfade = function(options) {

Should be

(function(jQuery) {

    jQuery.fn.innerfade = function(options) {

etc.

That's not the problem; the plugin is written in such a way that the $ it uses works regarldless of compatibility settings and does not encroach on the global namespace.

Also it's important your page is doing things in the correct order, it should be:

- Jquery include
- Set JQuery noconflict
- Include other libraries (Mootools etc).

Ideally of course you'd use one library (e.g. JQuery OR Mootools) but the above should work.

This is probably the problem; put it in this order and I expect it'll work

 

[unwashed potato!]

Have tried all that, except I imported the noconflct first.

At least I have a couple of things to try tomorrow Ever since I showed my boss that you can make things fade in and out, everything has do this now

be careful with this. the fade effect on text sometimes looks extremely ugly when used on a machine using cleartype. i found it wasn't too bad on xp but when i went to wni7 it gets so bad it's unusable.

http://www.google.co.uk/search?hl=en&q=jquery+fade+in+text+cleartype&btnG=Search&meta=&aq=f&oq=

example, top text is before, bottom is whilst fading:

 

[Inquisitor]

IE is generally awful with anything that involves some form of graded transparency when it comes to fading. PNGs with alpha channels will show horrible halos on them if you try to fade them.

 

[unwashed potato!]

IE is generally awful with anything that involves some form of graded transparency when it comes to fading. PNGs with alpha channels will show horrible halos on them if you try to fade them.

the image i posted was when using ff3 on win7

 

[Inquisitor]

the image i posted was when using ff3 on win7

I know; I was reinforcing your point that IE is rubbish when it comes to transparency

 

[uchuff]

That's not the problem; the plugin is written in such a way that the $ it uses works regarldless of compatibility settings and does not encroach on the global namespace.

Indeed, in my defence I was quite tired. I came back on to say that part was probably cobblers. Sorry to OP for my slightly misleading post.