I'm trying to include jQuery in my HTML-file but I haven't succeed yet.. I know there are a lot of tutorials and stuff on the internet (and this site!) but it still won't work.
This is my code in the HTML-file.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="global.css"/>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<title>test</title>
</head>
<body>
<script>
$(document).ready(function() {
$("p").css("font-size:50px");
};
</script>
<p id="first">Hello there!</p>
</body>
</html>
I just don't understand why nothing is happening..
Would be awesome if someone could help me with this on!
You are not using the jQuery css() function quite properly. You also missed a closing parenthesis. Try changing it to this:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
You should always use .css('property-name', 'property-value') in that format for best results. There are other ways (object properties) but they are slightly different syntax and do not conform directly to expected vanilla CSS property names.
jQuery API reference - .css()
If that does not fix it, check to be sure your jquery file is in the same directory as the HTML page. Or (probably better) just replace it with the CDN call recommended by other answers (e.g. replace <script type="text/javascript" src="jquery-2.0.3.min.js"></script> in your head with <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>).
You missed to close the code properly. You missed the );. Also the css method is little different in your version. The parameters should be property name, property value.
Try this
$(document).ready(function() {
$("p").css("font-size","50px");
});
Working sample : http://jsbin.com/AfAjihiP/1/
There is a small syntax error. Replace:
$(document).ready(function() {
$("p").css("font-size:50px");
};
With this:
$(document).ready(function() {
$("p").css("font-size", "50px");
});
You forgot to close a parenthesis, and the .css() function needs two parameters.
YOu can do one of two things. You can use the cdn version and link it like this:
or
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> after making sure the file is in the root of your project.
also you should have:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
and not what you currently have.
Don't write several code: Instead of $(document).ready use $ , it works:
so :
$(function() {
$("p").css({"font-size": "50px"});
});
or
$(function() {
$("p").css("font-size", "50px");
});
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>
So I am trying to use some jQuery on a site I am building, but nothing seems to get it working.
Here is how I have the files linked in my html:
<head>
<title>Eddy: Designer</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script src="script.js"></script>
</head>
Then in my javascript document "script.js" I have this code:
$(document).ready(function () {
"use strict";
$('#branding').click(function () {
$('.branding').removeClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#ui').click(function () {
$('.branding').addClass('.hidden');
$('.ui').removeClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#logos').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').removeClass('.hidden');
$('.print').addClass('.hideen');
});
$('#print').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').removeClass('.hideen');
}); });
My code editing software says that my $(document).ready is using a '$' before it is defined... I have no idea what that means or if that is what is causing me these issues.
The idea is, when I addClass '.hidden' it will make every image that ISN'T the category that the button is labeled go to 50% opacity. This would in a sense "highlight" all the items that are "branding" or what have you.
I have been looking at tutorials about using jQuery, and I can't find what is going wrong. Please help. I am stressing myself out over this.
I tried linking the jQuery like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
This did not fix my problem. Is my jQuery code written incorrectly and that's why it isn't functioning? It seems like I am loading the jQuery properly, but it still doesn't work.
First you have dots in removeClass and addClass method. You need to pass only class names not .classname, only classname. And as other sad you should check your folder structure and try loading jQuery from some CDN.
In your CSS you have #branding and in HTML and JS it's a class. And you are adding classes the wrong way you in HTML. Multiple classes are separated by spaces in class attribute like:
class="one two"
not like class="one" class="two"
Try this fiddle , it's working xD, I have just commented opacity and use outline: solid 2px red;. So you could better see changes when clicked.
I want to write cleaner and readable code, so I wanted to implement my jQuery code in a separate file. I saved the file in the sam folder as the jQuery code I downloaded from jquery.com. In my HTML I put the reference in there, and it does not work, but if I leave the jQuery code in my HTML it works.
My HTML code is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focusin demo</title>
</head>
<body>
<input type="text" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
My jQuery code is in a separate file called test.js and follows:
$(':text').focusin(function() {
$(this).css('background-color', 'yellow');
});
But when I run it in my browser it doesn't work. I basically tried everything and decided I need professional help.
You may have a problem with relative links. Try changing this
<script type="text/javascript" src="js/jquery.js"></script>
to this:
<script type="text/javascript" src="/js/jquery.js"></script>
You need put your code in $(function() { ... });
Like this:
$(function() {
$(':text').focusin(function() {
$(this).css('background-color','yellow');
});
});
You need to add a ready handler for jQuery scripts, like
$(function() {
$('input[type=text]').focusin(function() {
$(this).css('background-color','yellow');
});
});
You can first confirm inclusion of a file by putting the alert() function in the test.js file. If included then you can try writing some jQuery code in the test.js file to check whether the jQuery file is included properly or not.
My code:
<html>
<head>
<script type="text/javascript" charset="utf-8">
function backgroundImage() {
document.body.style.backgroundImage='url("http://www.image.jpg")';
}
</script>
</head>
<body onLoad="backgroundImage()">
Content here
</body>
</html>
But the addition of document.ready:
$(document).ready(function () {
document.body.style.backgroundImage='url("http://www.image.jpg")';
});
breaks the code
Why does this not work, something I'm missing, or prefix of document.ready just not needed? Could it be that 'document' should not be called twice?
Thanks in advance!
Kind Regards,
Dale
This is no problem, can run
http://jsfiddle.net/HRhQW/
You should change the name of the function from 'backgroundImage' to something like 'setBackgrounImage'. The name is somehow conflicting with the property.
Update: I guess I was wrong, See this jsfiddle.net/ARsmn. The body onload function is called after the $(document).ready(). So you might want to keep this in your mind when using body body onload and $(document).ready().
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.