jQuery Isn't applying to my HTML - javascript

I'm not quite sure why it isn't working. I got the jQuery from the Google server and it just wont recognize my fadeOut.
Here's my html File
<!DOCTYPE html>
<html>
<title>Prepare your Jimmies</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<body>
<div id="loading">
<p id="rj">Shh... No tears, Only Dreams Now</p>
</div>
</body>
</html>
Here is the script.js file
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut(100,'slow');
});
Any help would be appreciated. Thanks

I think fadeOut takes two parameters, one timeout and one callback. So it should be:
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut('slow');
});
or
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut(100);
});
http://api.jquery.com/fadeOut/

Your problem is that you're passing both 100 and 'slow' to fadeOut.
As per the docs, the first argument, duration, is:
A string or number determining how long the animation will run.
Simply use "slow" OR 100, and you're fine:
$('#rj').fadeOut('slow');
or
$('#rj').fadeOut(100);
FIDDLE
(You'll notice that I did not include jqueryui in the fiddle.)

As you can see in the documentation, fadeOut take 2 arguments
the first is the duration of the animation, you can put 100 for 100ms or 'slow', the second argument is the function which was execute after your animation.
fadeOut Doc
So you line
$('#rj').fadeOut(100,'slow');
is wrong, you can write :
$('#rj').fadeOut('slow');
or
$('#rj').fadeOut(100);

For easing you also have to include the jquery-ui library:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

It looks like you are using fadeOut wrong, it accepts a speed and a callback function, it looks as if you are trying to do a delay so try:
$(document).ready(function() {
$('#rj').delay(100).fadeOut('slow');
});
Also make sure your script is in the same folder as your HTML page as your source states.

You have no head! ;)
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Prepare your Jimmies</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="loading">
<p id="rj">Shh... No tears, Only Dreams Now</p>
</div>
</body>
</html>

Related

My js does not work on html of dreamweaver

Ok, guys. I am new to js and I have a problem, it seems that my html does not call my js. I dont know if I´ve place it on a wrong line or what causes that, but I´ve all ready checked my code on http://validator.w3.org/nu and it seems right. My html is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>hola</title>
<script type="text/javascript" src="menuscrollfixed.js"></script>
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="nav-container">
<div class="nav">
<ul>
<li>NOSOTROS</li>
<li>VISIÓN</li>
<li>MISIÓN</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Here is my Js:
jQuery("document").ready(function($) {
var nav = $(".nav container");
$(window).scroll(function () {
if ($(this).scrolltop() > 400) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
I know it´s a bit long, but I really hope someone can help me =)
You need to rearrange the order of script references. Refer jquery before your custom js file.
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="menuscrollfixed.js"></script>
Because, you are using jquery functions inside your custom js file. At the time of executing those codes, the jquery file will not be loaded, which will cause the error.
Some of the things i noticed in your page:
Re-arrange the stack order of your scripts. add jQ lib before your script file.
use only one jQ lib instead of two diff versions.
type="texte/javascript" is not a valid type.
Better to use jQuery(document) instead of jQuery("document").
$(".nav container"); there is no element of named container in .nav and i don't think it's a valid html element container.
First thing is you are using multiple versions of Jquery Library files. This we create conflicts while using the features. Use the latest version.
And keep an eye on the wrong spelling for scripts and calling class names.

jQuery Not Working in Eclipse

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

Can't figure out how to directly insert HTML fragments into an HTML document using jQuery

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.

jQuery click not fired

I have this simple html file with little bit of jQuery in it but click event is not triggered here:
I am not getting any error and neither the console.log statement that I expect to print when click event is triggered.
Did I miss out on something?
<!doctype html>
<html>
<head>
<title>My WebPage</title>
<link rel="stylesheet" type="text/css" href="Day.css"/>
<link rel="stylesheet" type="text/css" href="Night.css"/>
</head>
<body>
<h1> My website </h1>
<button>Day</button>
<button>Night</button>
<script src="jquery.js"/>
<script>
(function(){
console.log('Inside func');
$('button').click(function() {
console.log('button was clicked');
});
})();
</script>
</body>
</html>
<script src="jquery.js"/>
should become:
<script src="jquery.js"></script>
You can read more about self-closing script tags here: Why don't self-closing script tags work?
I would just use the JQuery CDN in the head section.
Here's a demo

elements wont .fadeTo in my code. Don't know what's wrong JavaScript, JQuery, HTML

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 ¯\_(ツ)_/¯

Categories