Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first
Related
I've checked as many questions as I can and the answer I keep getting is to use javascript or jQuery to do it. So I have my main html file:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<!-- I want to insert a paragraph here -->
<div id="a"></div>
<script>$( "#a" ).load( "insertme.html" );</script>
</body>
</html>
insertme.html
<p>Inserted into another doc!</p>
I found this method here, and as far as I can tell I've implemented it the same way.
So what am I doing wrong here? Why is my code not being inserted?
Firstly, you are missing jQuery. Add this line to your <head></head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Do you have a DOM readiness issue?
Try this:
$(document).ready(function(){
$( "#a" ).load( "insertme.html" );
});
Also, make sure that insertme.html is in the same folder as your index.html file.
I am trying to get the buttons in my code (the only two buttons) with the class names "play" and "credits" to fade out when they are clicked using JQuery but it is not working. Please tell me what is wrong.
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="startMen">
<div class="playDiv">
<button class='play'>Play</button>
</div>
<br>
<div class="creditsDiv">
<button class='credits'>Credits</button>
</div>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
$('.play, .credits').click(function(){
$('.play, .credits').fadeTo('slow',0);
});
});
Add this to the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JQuery hasn't been linked to you HTML. Add it to the head somewhere before your link to your script.js so the rest of your Javascript can use the JQuery library as well.
Should be:
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
You need to include the JQuery library in your script. It's hosted on the Google CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
As a side note, while you can use .fadeTo();
.fadeTo()
requires duration and opacity as arguments. a.e:
.fadeTo("slow", .5);
If you're looking for it to fade into displaying nothing you could use the method .fadeOut(); and pass a duration argument. a.e. :
.fadeOut("slow");
Edit: When I first read the script my eyes skipped over the 0 in the fadeTo method. I assumed that was the issue. After throwing it through jsfiddle, it seems like the problem was the library missing.
You didn't link jQuery. This means the browser has no idea what jQuery is. You have to add the <script> tag.
Use the following in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Fiddle
Your code actually works, just a simple mistake :)
You can also use .fadeOut() instead of .fadeTo(). It's more simple. Take a look at that here
'Cause I'm posting an answer, you can use $(function () { as short for $(document).ready(function(){. I know it's not related but just mentioning ¯\_(ツ)_/¯
So this is a weird problem. I have a very simple Jquery code in JavaScript file and a very basic HTML file in dreamweaver. I have linked the .js with html as usual but nothing is taking any effect at all both in dreamweaver and in browser as well.
HTML Code for HEAD
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>College ink.</title>
<link rel="stylesheet" href="homeCSS.css"/>
<script type="text/javascript" src="JQuery-Home.js"></script>
</head>
HTML CODE FOR SPECIFIC ELEMENT IN BODY
<section>
<div class="mainBox" id="designBox">
<div class="mainSubBox">
<p class="subBoxText">
Design
</p>
</div>
</div>
</section>
THIS IS THE JQUERY CODE (There is nothing above or below this code in .js file)
$(document).ready(function() {
$('.mainBox').mouseenter(function() {
$(this).fadeOut('slow');
});
});
Can you find out the actual problem? Has it got anything to with CSS?
Thank You
It doesn't look like you included the jQuery library. Add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
in the head beside your other script.
jQuery install link:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Add this above where your javascript file is linked in the document.
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
So I've got the following HTML and jQuery code, and whenever I try to load the page, Firebug gives me the 'ReferenceError: $ is undefined' error; as such, the jQuery code doesn't work. I'm using Coda 2.0.9 on Mavericks. I've loaded the jQuery library (using Google CDN) before the jQuery UI library, and both of those before the script I've written. In the Net section of Firebug, the only request that it shows is the font from Google Fonts. This is just a splash page so the code is minimal. For the life of me I can't figure this out so any help would be much appreciated.
<meta name="description" content="Description here" >
<title>This site is being updated</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<h1 class="maintitle"> This site is getting cleared up! </h1>
<img class="construction" src="images/construction_800.png">
<div id='wrapper' style='text-align:center;width:auto; margin: 0px 90px'>
<div style='float:left;width:50%'>
<strong>Office 1</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
<div style='float:right;width:50%'>
<strong>Office 2</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
</div>
<p class="comeback"><strong>Please check back soon for the updated site</strong></p>
</body>
jQuery:
$(document).ready(function() {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
You're loading in Jquery Twice in the header.
Remove the last line
<script type="text/javascript" src="jquery.js"></script>
The actual issue is that there is a conflict somewhere with the $ handler that jQuery uses.
If so, changing $ to jQuery like #Choineck should work.
jQuery(document).ready(function($) {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
I think the problem is that you have a slight delay getting the jQuery from ajax.google
But you could also try something like
<script language="javascript" type="text/javascript">
$j = jQuery.noConflict();
</script>
Then
$j("...")