avoiding jquery conflict - javascript

I am using the script shown below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
After adding this code in my blog, many other widgets like dropdown menu involving javascript stop functioning. The other codes I have used are shown below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'/>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>
Can anyone please tell me how to remove this conflict?
Edit:Okay, can you make it more clear? I am a noob here and can't understand what you guys are saying. Can you change my code and show me how it works?

After this script include:
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>
use this:
$.noConflict(true);
Also, those script tags are invalid, script tags must have both an opening tag and a closing tag, they can't be self closing.
Update for comment:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2="sidebar2";
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'></script>
<!-- any other scripts that depend on the above code goes here -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'></script>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'></script>
<!-- also any other scripts that depend on the above scripts go here -->
<script type="text/javascript">
$.noConflict(true);
</script>

You are loading JQuery 1.2.6 in the first script block and then JQuery 1.7.0 in the second. The second will not load as JQuery was already loaded. I am guessing the stuff that is failing needs the functionality added to the more recent JQuery version. So make the first block load the newer version and do not attempt to load it twice in the second.

Related

smoothscroll.init(); not working. Getting error

I am using a call to smoothscroll.init() which looks like this:
new WOW().init();
//smoothScroll
smoothScroll.init();
But I am getting the following error:
Uncaught ReferenceError: smoothScroll is not defined
at main.js:136
at main (main.js:140)
at main.js:144
Could anyone help me figure out why?
These are my javascript libraries:
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
First add this to your project:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Second: make sure your path to smoothscroll is correct.
Third: identify each of your html you want to use smoothscroll on with the class class="smoothScroll".
Fourth: the smoothscroll you are using now isn't editable in another javascript directory, it's only used for inside your html, as it already uses the smoothscroll.
EDIT:
If you want to use your own smoothscroll, I'd recommend you to look at this.

Which jQuery libary should i include in my website?

In my website i have few jquery because i have a few funcions (sticky header, anchors and animations). I want to know is it neccessery to include all of it or i can include only one or two ?
Here is my included jquerys
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
You should include the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
This configuration will only support IE9+
If you need IE7 or IE8, use:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

What is the correct sequence of including jquery files?

Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.
Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first
First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.
As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.

How to overcome with conflicting jQuery files

I have two jQuery files.
One is for calling datepicker and the other is for calling highchart files.
When I am trying to include both files, my highchart is working and datepicker is not working.
Here is the source code - code for datepicker:
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
Code for hichchart is:
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>
I have also tried to put the jQuery noconflict to any where of my code I got no result
<script type="text/javascript">$.noConflict();</script>
Any help will be appreciated.
Try to use only the jquery's and jquery ui's newer version,
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/calendar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="<?=base_url()?>Date_Component/scripts/jquery.ui.datepicker-cc-fa.js"></script>
<script src="<?=base_url()?>js/highcharts.js"></script>
<script src="<?=base_url()?>js/exporting.js"></script>
try something like this
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict( true );
//use jq for highchart
</script>
First call jquery
<script src="<?=base_url()?>js/jquery-1.9.1.js"></script>
and Use following code after calling jquery
<script type="text/javascript">
var jqobj = jQuery.noConflict( true );
</script>

JavaScript jQuery fancybox

I have a problem with fancybox. I read a few answers here, but had't found a solution for my problem. I have these scripts loaded in my webpage:
Sripts for fancybox:
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Other scripts that my page includes:
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/js/jquery.plugins.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/selectnav/selectnav.min.js"></script>
<script src="assets/plugins/tweet/jquery.tweet.js"></script>
<script src="assets/plugins/fitvids/jquery.fitvids.js"></script>
<script src="assets/plugins/isotope/jquery.isotope.min.js"></script>
<script src="assets/plugins/sharrre/jquery.sharrre-1.3.4.min.js"></script>
<script src="assets/plugins/revolutionslider/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/template.js"></script>
<script src="assets/js/customizer.js"></script>
Problem is that when I have all of these fancy box won't work. I tryed many combinations and found that the only possible for a fancbox to work is to remove script 'jquery-1.8.3.min.js' from page. If I remove it dropdown menu is not working, and the fancybox does.
Where is the problem? I just copied scripts, not a body code, because I toought it's not nessesary.

Categories