How to avoid collision with Jquery about jqlite HOT 22 CLOSED

And also, one app has both JQuery and a bit of Angular

from jqlite.

it seems that the main effect is on event handlers mostly on a MediaAPI 'timeupdate' event

from jqlite.

Hi @Fire-Brand, could you send me a small code snippet to reproduce it?

from jqlite.

That's a bit tricky, since the component works well on my webapp and don't on their's, i'm not sure what to send...

In my honest opinion it has got to be something that's related to JQuery.

from jqlite.

Maybe the issue happens when minifying the code?

from jqlite.

I've used jqlite minified from the get go, and they use my files as a CDN- unminified

from jqlite.

I'm guessing i need to some how use jQuery.noConflict(); so that they won't have to change anything.

What do you think is the right way? and ofcurse should my file be above or below the jquery.js script tag?

from jqlite.

Using

if (window.jQuery) {
  jQuery.noConflict();
}

At the very top of my code did the trick, thanks for the help!

from jqlite.

awesome!! thanks for the info!!

from jqlite.

Hi @jgermade, so i came across another option...
Basically in-order for the solution i wrote above to work, jQuery needs to be called before my component's script file (which uses jqlite) otherwise some animation conflicts still occur (e.g. a button with an image from a sprite background that changes the background-position when it's clicked will change the image with a slide-left animation instead of simply changing quickly).

is there a possibility to change my code to use $j and not $ just like doing :

var $j = jQuery.noConflict();

???

Please assist

from jqlite.

Maybe create a noConflict() for jqlite?

from jqlite.

Hi @Fire-Brand,

jqlite does not override '$' object if present, so if jquery is placed before jqlite object $ will correspond to jquery.

anyway, I'm going to include such function .noConflict() that's a good idea

sorry for the delay, and thanks for the feedback!!

from jqlite.

Hi @jgermade,

so maybe i just had some difficulties with the show() and hide() functions, because with jquery the animation was like a slide-left animation, you think it has anything to do with that?

from jqlite.

jqlite .hide() and .show() only add/remove 'display: none' value in style

IMO jQuery had included animations (based in js) when css3 didn't exist. but now css3 animations (uses hardware acceleration) are really better in performance than js

by this reason and in order to keep a smaller file, animations are intended to be implemented with css3 by adding/removing classes

maybe it can be interesting develop a library to provide animations based on dinamic css3
this library can be compatible with jqlite and jQuery (like jq-plugin)

from jqlite.

That's sound cool.

In regards to the new noConflict() method, is it now possible to change the $ on jqlite to somthing else to avoid conflicts with jQuery when someone adds my code to theirs? like $jq ? and how should i best implement it?

from jqlite.

Hi @Fire-Brand

in the last version of jqlite (v0.0.27), .noConflict() has being simplified, the way of use is like jQuery.noConflict()

<script src="other_lib.js"></script>
<script src="jqlite.js"></script>
<script>
// .noConflict() returns a pointer to the global jqlite object
$jq = $.noConflict();
</script>

jqlite is defined as a global object unless angular or an umd library is present

in any case, you can avoid using .noConflict() by placing jquery (or zepto, etc) before jqlite

<script src="jquery.js"></script>
<script src="jqlite.js"></script>
<script>
// your can create an alias for jqlite if you need
$jq = jqlite;
</script>

jqlite does not override '$' variable if is already defined

from jqlite.

Cool, but what if i can't control whether jqlite is called before or after jQuery ?

from jqlite.

You can do following (after all scripts):

<script>
$jq = jqlite;
$ = jQuery;
</script>

from jqlite.

are you using any build library like grunt or gulp to inject scripts?

from jqlite.

Myself no, but other people who uses my component may....

from jqlite.

OK!

maybe this works for you:

(function ($, $jq) {

   // inside this closure $ is always jQuery and $jq is always jqlite

})(jQuery, jqlite);

from jqlite.

this seems to be resolved

from jqlite.