I've been following the lessons on Codecademy and I've finished the HTML/CSS and about half of the jQuery tutorials.
I figured I should try to test my knowledge by writing code and opening it in my web browser, which is Chrome (Version 34.0.1847.131 m).
I have the HTML and CSS working perfectly fine, but I can't seem to get the jQuery (script.js is the filename) code to work properly. Here is my code for all three files in my test project:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css
div
{
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
script.js
$(document).ready(function()
{
$('div').hide();
});
This code basically should instantly hide a div box I am creating. However, whenever I open the index.html page in chrome, it just shows the box in the upper left corner (thus, my $('div').hide(); isn't being run.
My files are all in the same location:
I'm writing my code in the Sublime Text 2 IDE.
I've seen multiple questions similar to this on SO but everyone's problem was that they have didn't wrap their js code in the $(document).ready() function.
Can someone tell me what I'm doing wrong?
You have not loaded jQuery.
Add this line to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Edit: If you are using this offline, you need to use http:// as it will default to file://
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Hosted by google. Source
try to include the jquery file before your final script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...your script....
You need to include jQuery before you include your javascript file, like so:
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
You have to attach a jquery library with your page in order to run it.
just add
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
in head section of your html
You need to include jquery library in your html file like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Related
I'm trying to use jQuery to change the value of the div 'dog' from blue (CSS) to red (javascript css code), but the javascript seems to not be functioning. CSS, JavaScript and jQuery are all linked properly (have checked).
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dog"></div>
</body>
</html>
CSS CODE:
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
JAVASCRIPT (jQuery) CODE:
$("#dog").css("background-color", "red");
but the javascript seems to not be functioning. CSS, JavaScript and
jQuery are all linked properly (have checked).
Ensure that you encapsulate the javascript within a $( document ).ready(). This should solve the problem if the script is loaded in the head element, where the HTML document has not been loaded fully yet.
However, an alternative solution is to use the script tag within the body element.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery
.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="dog"></div>
<script>
$("#dog").css("background-color", "red");
</script>
</body>
</html>
do this in your js file -
window.onload = function () {
$("#dog").css("background-color", "red");
}
The reason is this -
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
As you have a seperate js file, and you want the style to be changed when the page is loaded, so you have to do this.
For more understanding, you can refer this - Difference between onload and window.onload
Im new to jquery. But it does not seem to work. I am trying to animate and i have literally copied and pasted a code in a notepad and saved it as xxx.html as you would. Where i got it from is the jquery site here - https://api.jqueryui.com/bounce-effect/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bounce demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
</body>
</html>
It works perfectly in the site but when i run it on Google chrome or opera, it just does not work. It does not animate. I'm not sure why. Can anyone help please? Thanks.
You are probably running the example locally on your computer by opening the file and not by running it via a webserver.
The example uses // to load the jQuery files which means that it follows the protocol you used in your browser bar. For example http:// or https://.
However because you opened it locally via file:// it tries to load the other files also via file://. You don't have the other files locally.
Easiest way to fix it is by manually update the jQuery paths and add a protocol so:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
An other way to fix it without changing the code is to run the file via a webserver and requesting it via https://xxxxx.xxx or http://xxxxx.xxx
The code works in Codecademy but doesn't seem to work in Adobe Brackets IDE. Greatly appreciate any help on this issue!
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
CSS File
div{
height: 100px;
width: 100px;
background-color: aqua;
}
Javascript File
var main = function(){
$('div').click(function(){
$('div').hide();
});
};
$(document).ready(main);
check your folder structure. there is nothing to do with the editor when you are including js files.
one more thing your code seems a jQuery code and to make it run you will need
jQuery library file included before your script.js file. to use jQuery functions in your code you need to add the functions library first.
check code below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
You've not included jQuery in your document.
http://jquery.com/download/
Via CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
If you open your JavaScript console you'd likely see an error telling you that $ is not defined.
Chrome Developer Console
FireFox Developer Console
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">
I am writing a simple HTML page and using live.js for page and css reloading whenever the page was changed. But when I include -prefix-free to the page the styles are no longer reloaded automatically.
Is there any way to fix this?
Example:
HTML:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="prefixfree.min.js" type="text/javascript"></script>
<script src="live.js" type="text/javascript"></script>
<div id="colored">
some text
</div>
CSS:
#colored {
background: blue;
}
What I do is changing the color. It works until prefixfree is included.
I made a CSSrefresh fork supporting prefix-free:
https://github.com/yukulele/CSSrefresh
I have made a LiveJS fork supporting prefixfree, based on yukulélé code :P
https://github.com/newhope/live.js