I have two jQuery one is
and the other one is if i remove first one the slider starts working and if i remove the second one then the dropdown starts working. I have seen other tutorials on the net of how to solve collision but i was unable to solve it.Please help. Code is written below.
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script type="text/javascript" src="caption/jquery-1.3.2.js"></script>
<script type="text/javascript" src="caption/jquery.capSlide.js"></script>
<script type="text/javascript">
$(function() {
$(".capslide_img_cont12").capslide({
caption_color:'#bfedfa',
caption_bgcolor:'#000',
overlay_bgcolor:'#000',
showcaption: false
});
});
</script>
</head>
<body>
<script type='text/javascript' src='js/jquery.fancybox-1.3.6.pack.js'></script>
<script type="text/javascript">
jQuery(document).on('ready post-load', easy_fancybox_handler );
</script>
</body>
Please have a look at jQuery.noConflict
So, basically:
After including jquery.js:
<script>
var $jQ = $.noConflict(); // use $jQ instead of $ for normal jQuery
</script>
And use just $ after including jQuery 1.3.2
I do believe that you have very strong reasons for having included 2 versions of jQuery, otherwise its a Bad IdeaTM
Related
JSFiddle demo: https://jsfiddle.net/cr33q8v7/
$("#findMyWeather").click(function() {
alert("button clicked");
});
All I'm trying to verify is if the JQuery is working and I'm not getting any pop-up that says button clicked, so it would appear the syntax is wrong, but I've checked it multiple times and it looks right.
So if I include the library on JSFiddle, then why does the below code in the HTML file not run, as it appears the function is identical and these pointers both direct to the library:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$("#findMyWeather").click(function() {
alert("button clicked");
});
</script>
So the // pointers didn't reference (this is what the teacher instructed). When I changed to `https:``, then it functioned correctly:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I need another set of eyes, or else I'm missing something else and just don't see it.
You need to include the jQuery library in JSFiddle.
Click the gear that says Javascript and choose the version of jQuery that suits you.
Your fiddle doesn't actually include jQuery via a script tag.
e.g. add: <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> to your HMTL
you must add below line after last div between body tag :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4
/jquery.min.js"></script>
Here is Demo
Add the cdn link for Jquery. Without jquery it will not work. You can add it to the before end of body tag.
Add:<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
use jquery online by adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<button id="check">Click on me to check if jquery is working ....!</button>
</body>
<script type="text/javascript">
$("#check").click(function(){
alert("yep, jquery is working");
});
</script>
</html>
every thing looks fine please select jquery in fiddle then try it
and please add this script code in your file
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
I would be really thankful if anybody could advise on jquery's weird behavior in opera mini 8 (full version is 8.0.1807.91281). When the following code is placed directly in head tags it works,
<head>
<script src="jquery.js"> type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
</script>
</head>
However, trying to keep my head nice and clean and doing the following simply stops this simple function's execution. I created my show.js file, placed it in my head and also referenced jquery like this:
<head>
<script type="text/javascript" src="show.js"> </script>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
</head>
Then I placed my simple function inside my show.js file like this:
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
It works fine in all the major browsers I tested it in (Opera Classic, IE, Safari, Chrome, FF) but it just fails in opera mini 8. Could anybody advise please, what I am doing wrong here? My vague guess is that opera mini 8 has its rendering stuff off this browser and does it remotely via their servers, that's why the only way for it to work in opera mini is to put the code directly in head. I am not sure I am on the right track here but that's the only workaround I've found so far to force it work in opera mini 8.
Would appreciate any help /comments at all as this thing slowly starts driving me crazy :-) Many thanks in advance!
---------------------------------
P.S. Update.
I upgraded to jquery 1.11.3 and keep the lines in this order now:
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="show.js"> </script>
</head>
But having it this way together with the following in my show.js still does not work in opera mini 8.
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
As soon as I change it to:
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
</script>
</head>
and disable my show.js it starts working everywhere including opera mini 8. I am totally clueless... Any more suggestions, please anyone?
---------------------------------
Update 2. Solved.
The trick was in my other scripts' order. That is I reversed the order I had and it started to work. For example I had script1, script2, and script3 placed like this:
<script src="script1.js"> type="text/javascript"></script>
<script src="script2.js"> type="text/javascript"></script>
<script src="script3.js"> type="text/javascript"></script>
Now I have changed it to:
<script src="script1.js"> type="text/javascript"></script>
<script src="script3.js"> type="text/javascript"></script>
<script src="script2.js"> type="text/javascript"></script>
and it all revived.
Hope it will help someone out there as well. Make sure you check your scripts' places and chances are it will work for your as well. Just remember it all has to go coherently and successively in accordance with your scripts' code.
You should include the jQuery first and then all its dependents.
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<script type="text/javascript" src="show.js"> </script>
</head>
Reverse the order in which they are loaded.
EDIT
<script src="jquery.js"> type="text/javascript"></script>
<!-- ^ -->
Remove the closing bracket of script.
I have placed one javascript (hide.js) in my html Page ... Hide function is not working .My scripts are in right order
My code is as per tutorial
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<p id="paragraph ">
This is Paragraph</p>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>
hide.js
$('#paragraph').click(function () {
$('#paragraph').hide();
});
I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
still it is not working ..
i couldnt find any relevant link ..whats wrong ..Please Suggest
Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
In case you must include hide.js first before jquery.js. Change your code to
$( document ).ready(function() {
$('#paragraph').click(function () {
$('#paragraph').hide();
});
}
In this way, your script will work after whole page is loaded.
Or, similarly you can use.
$(function() {
// Your Code
});
order should be, include jquery main file all above.
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
core jQuery file must be include before any other plugin as they may use core jquery methods internally.
You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.
You need to remove the space from your id attribute.
Order of script - hide.js is using jQuery so it has to be included after jquery.js
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined
your id has space.remove it and try again
<p id="paragraph ">This is Paragraph</p>
it should be like this
<p id="paragraph">This is Paragraph</p>
I have discovered a very strange thing which probably could be the cause. It should certainly help you.
In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.
Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.
Environment: Chrome latest Version 44.0.2403.130 m
I have a responsive menu and responsive slideshow that requires javascript and jquery but only one works.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav({
prependTo:"#border-orange"});
});
</script>
The 2nd one works but the first one doesn't. When I switch them over, again, the 2nd one works but the 1st one doesn't. Is there a way to combine the code so that both scripts work or is it a case of "one or the other"?
You're including jQuery twice, just remove the second reference and you can have as many sections of $(document).ready() as you want to :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav({
prependTo:"#border-orange"});
});
</script>
It's very uncommon to use multiple versions of jQuery. Are you sure, that this is needed? Otherwise, try
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script>
$(document).ready(function(){
$(".rslides").responsiveSlides();
$('#menu').slicknav({
prependTo:"#border-orange"});
});
</script>
If it's required to use multiple versions of jQuery, consider using jQuery.noConflict()
If you want to use multiple versions of jQuery use noConflict()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
var $183 = jQuery.noConflict(true);
$183(function($) {
$(".rslides").responsiveSlides();
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#menu').slicknav({
prependTo:"#border-orange"});
});
</script>
If you need both versions then you can use $.noConflict() for one version:
var jQuery_1.8.3 = $.noConflict(true);
Then you can use jQuery_1.8.3 instead of $ for the code that require jQuery 1.8.3 to work.
jQuery_1.8.3 (function() {
jQuery_1.8.3(".rslides").responsiveSlides();
});
For the other version, you can keep using $ as usual.
I have a misterious problem with the noty plugin click. When I create a notifier as explained on the site everything works fine, but when I put the same statement into a function which is called at the "onClick" event from a button, it doesn't work. There is no noty-notification coming, no errors, nothing happens if I press the button. When I remove the noty-thing and add a normal "alert" statement everything works fine. Is there something I have missed or is this a bug?
The original code looks like:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
<script>
var noty = noty({text: 'noty - a jquery notification library!'});
</script>
When I put the same statement into following function, noty don't works anymore.
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
...
klick
...
<script>
function test_function(){
var noty = noty({text: 'noty - a jquery notification library!'});
}
</script>
Even if I change the var noty to var n (or something else) nothing changes, as stated in one stackoverflow question before.
Thanks in advance.
Regards, john.
it would be better if you use something like this:
<head>
<script type="text/javascript" src="ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<script>
$("#element").click(function(){
var n = noty({text: 'noty - a jquery notification library!'});
});
</script>
<a id="element" href="#" onclick="return false;" class="btn">klick</a>
And of course use an "id" on the element you wish to bind to noty. It will work perfectly.
Check out working example here:
JSFiddle