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.
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>
You may see a JS below which is now commented which is now copied in all-set.js without two <script> lines.
It was working when I was using the code in head, now it's not.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="all-set.js" ></script>
<!--
<SCRIPT language="javascript" >
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
-->
</head>
What is your directory structure?
Where is the JS and where is the HTML file?
Are they right besides each other in the same folder?
If yes, try changing src of your script tag like:
<script type="text/javascript" src="./all-set.js" ></script>
Inside the JS file remove the script tags. These don't have to be there:
<SCRIPT language="javascript" >
</SCRIPT>
Also, as a general rule, always use lower-case tags in HTML.
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
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 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