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
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 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
Suppose I have this code :
<head>
<script type="text/javascript">
func1();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
func2();
</script>
<script type="text/javascript" src="tabber.js"></script>
</head>
Would func2() be called only after jquery.js is completely loaded? Basically I am trying to make a progress bar in a page with some heavy javascript code. So I want to know how much of the page has loaded.Now I can show this progress in the form of the number of js files that have been completely downloaded. So if func2() is called only after jquery completely loads, I can use that function to slide up the progress bar by some percentage.
JavaScripts in a page will be executed immediately while the page loads into the browser. The exception is when it's told to fire on an event (ie: click, after page load, etc)
If you want to ensure code is run only after the page is loaded you can use:
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
[code to run once page loaded here]
}
</script>
</head>
Note: put your Javascript in tags as well.
None of those would ever be called because they are not in <script> tags.
What you probably want is to load all your scripts that are needed, and then use the window.onload or jQuery's ready event to trigger the functions you want to call.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
$(document).ready(function() {
func1();
func2();
});
</script>
</head>
I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>