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
Related
I have the follow external css / js file in the index.php file
<link rel="stylesheet" href=".css/main.css" type="text/css">
<script src=".js/main.js?"></script>
Problem
When I open the page in browser, all css / js code become inline as below
<style>
/* css code */
</style>
<script>
/* jscode */
</script>
Someone know what "cool" php function is it? I would happy to have it disabled on the host.
please check the link http://toolkit4kinder.com/test/index.php
cat index.php
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/main.css" type="text/css">
</head>
<body>
<div> hello </div>
<script src="./js/main.js"></script>
</body>
</html>
RCA
The inline css / js was generated by the following features on the host:
https://www.modpagespeed.com/doc/filter-js-inline
https://www.modpagespeed.com/doc/filter-css-inline
Solution
create / edit .htaccess in the folder with the following code to disable the feature:
$ cat .htaccess
ModPagespeed Off
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
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>
I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.
As such, here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers.</p>
</div>
</div>
</body>
</html>
And then here is my index.js:
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever.
Please let me know if I'm overlooking something - I really appreciate the help. Thanks!
This:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>
Should be this:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").
Furthermore you do not include jQuery itself (only jQuery UI).
Use the following head-Area:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
These work for me.
I've been trying to use this really cool JVector Interactive map plugin with my Rails 3 app but I must be doing something wrong because the map is not rendering. I haven't used JQuery much with Rails so am kind of new at this. I created a controller called Maps and a view called Intro.html.erb, which included my html from this tutorial: http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap
I also split up my .js functions by putting them in application.js. Since that didn't work I found some other code that I tried to put in my Intro.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="public/javascripts/jquery.vector-map.css" type="text/css" media="screen" />
<script src="public/javascripts/jquery.min.js"></script>
<script src="public/javascripts/jquery.vector-map.js"></script>
<script src="public/javascripts/world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
It's still not rendering. I'm trying to run this in my development environment and am pointing locally to the files. For example: public/javascripts/world-en.js"
Any help would be greatly appreciated.
You want to use "world map" but in your finction you are defining the"#map". Here is the correct code you may try:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
<script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
$('#world-map').vectorMap();
});
</script>
</body>
</html>
Here is the folder with docs you need. Download and unzip the following folder to you htdocs on your local host
Same problem, fixed by specifing the imported map into the js initialization
$('#world-map').vectorMap(
{
map: 'world-en',
}