jQuery versions overlapping issue - javascript

i'm working on a widget, that needs jQuery complete version and jQuery UI to work.(This widget should be able to be embedded in any website)
It works fine and like expected when i embed it in my project. But sometimes when i embed it in other project that has another JQuery library it brakes the code of my widget.
For instance, if the website has another jQuery version, i can check if(typeof jQuery == 'undefined') and don't use another version and ti works fine only if the defined version is a complete one, otherwise it won't work because it needs the complete version of jQuery.
Or if i use jQuery.noConflict(true), it removed any other defined version and the widget works fine but sometimes it breaks the website (where the widget is embedded) because in this case jQuery is loaded at the end and any scripts that depends on it won't work.
I'm struggling with this issues for many days cause the widget needs to work fine where ever it's embedded and must not affect the host website. Any help please?

Related

Integrating Isotope js on Joomla 1.5 site

I am trying to integrate Isotope JS on Joomla 1.5 site. (I know it's old Joomla!)
https://www.buffalobrownies.com/?view=article&id=269
I got the code working fine on a test page on that domain (but outside of Joomla).
Inside Joomla, neither the JQuery nor vanilla JS seems to trigger.
With JQuery trigger code on, I get this error on Chrome Console:
Cannot read property 'isotope' of null
(With the vanilla JS script turned on I get a bunch of OTHER errors......)
So I'm guessing there is something wrong with the reference to $ but I'm not clued up enough to know what it is...
Any thoughts out there? Thanks for your help
(I have Jquery linked high up in the <head>, then Isotope JS link just after, then the isotope trigger JS before the bottom </body> tag)
Chris
So I discovered that it was Mootools in Joomla 1.5 that was causing the conflict.
(I just had to start taking lines of code out, one by one, until I found the one that made the difference).
I managed to find some code online that turned Mootools off for the front end, but kept it on for the back end.
Now I've managed to get the Isotope script working in my example. Now I just need to get it working with live data!

New JQuery 3 Not Working Correctly w/ Bootstrap?

I'm making this post as I've been having this issue, and I'd like to make light of it. Perhaps others are having it, or can say whether my situation is a unique case. I recently downloaded the new version of jQuery (3.0.0) and linked it to a current project I'm working on. My Bootstrap dropdown / collapsing navbar would NOT work until I switch to an older version of Jquery (1.12.4.)
Has anyone else noticed something like this or had a similar issue?
Bootstrap 3 is not compatible with jQuery 3. You can use the latest v2 jquery though.

Nivo Slider not working with wordpress

All of a sudden the nivo slider on one of our clients websites is not showing up at all: www.bedehouse.org
I have tried all sorts but cannot see why its stopped all of a sudden? We have not done any updates to wordpress or any of its plugins recently.
I can see using chromes "inpect element" feature that there is an error: "Uncaught TypeError: $(...).nivoSlider is not a function" but have no idea what it means.
Any helps or pointers in the right direction would be massively helpful.
You're loading two versions of jQuery. One is the copy WordPress is loading and the second is another.
Both are different versions (WP is loading 1.8.3 and you're loading 1.8.2). WordPress loads jQuery in noconflict mode and does not allow the use of the $ shortcut.
Remove the jQuery 1.8.2 call that you made and change all instances of $ to jQuery and try it.

JS creating a conflict with WP for a slideshow

I'm getting an issue with a javascript slideshow that I wish to embed in a WP header.
Here is the slideshow designed and ready to use: http://coachjoelleinc.com/wp-content/themes/32950/rotator/test.html
And this is where I want to embed it: http://coachjoelleinc.com/index_real.php/
In older versions of Firefox it disables other plugins, such as the navigation.
Any advice would be much appreciated.
It's looking fine in Chrome for me but the issues with older browsers might be caused by the fact you've loaded the jQuery library twice. Wordpress is loading the version that came with it (1.7.2) but prior to that version 1.5.1 is being loaded - probably by your theme's header.php rather than a plugin, the file is in the themes directory.
Bear in mind you have to load jQuery before you load all the scripts that rely on it, so if you remove the older version which is being loaded first you will need to make sure the other dependant scripts load are moved so they are loaded after the newer version of the jQuery library is loaded.
There are various ways to do that - you can enqueue them in functions.php, or move those scripts into the footer. A quick Google comes up the Codex Javascript guide along with some examples of including JS in Wordpress

jQuery Date Range Picker giving error in Google Chrome

I am using the jQuery Date Range Picker by the filament group.
My code is such that I'm dynamically creating a textbox or rather an AJAX query returns HTML of a form. When I dump the HTML onto my page I call a script that invokes the daterangepicker() function supposed to turn an inputbox into a date range picker.
My code works perfectly fine in Firefox and Internet Explorer, however it just dies in Google Chrome. The script doesn't run and I get this error in the logs:
Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2
What could be the problem here? I really need to fix this - the exception is thrown within the core jQuery code. The date picker seems to work fine when I view the site demo.
You don't suppose it has something to do with being called to attach to an element that is created by an AJAX query at run time. Whatever the issue I need to get this working pronto and would appreciate any kind of help.
I had the same problem, and Chrome debugger notes the error is in the Jquery library version 1.3.2
I looked at the source for filaments daterangepicker demo page, and it turns out they are using jquery library 1.3.1
... src="js/jquery-1.3.1.min.js"
I ran a test using 1.3.1 instead of 1.3.2 and that worked for my site.
I recommend to test for browser and use 1.3.1 in the case that the user is using chrome.
All the Best,
Yehuda
several people report that this functionality is broken in Chrome. Maybe you should look out for alternatives.

Categories

Resources