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
Related
I'm working on creating resizable DIVs in html and have found some code online as reference.
When running the HTML source code on chrome, the resizable function does not work and I can only see plain text with no functionality. However, the code works fine on JSFiddle.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
This is the exact code that I'm working with. Any ideas why it's not functioning properly on chrome?
I can only see plain text
Your CSS is not loading.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
This is a scheme relative URL.
It will work fine providing the HTML document you are viewing is loaded over HTTP or HTTPS.
Since it is not, you must be loading it directly from your local filesystem with a file: scheme URL (typically this will be because you double clicked the HTML document in Windows Explorer).
You need to load the HTML document from a web server or change the URL to the CSS so it uses an absolute URL (one which starts https:).
This is the index.html with angular-alpha35:
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>APP Ang2</title>
<script src="scripts/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<app>Loading...</app>
<script>System.import('app').catch(console.log.bind(console));</script>
</body>
</html>
And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:
<script src="scripts/system#0.16.11.js"></script>
then nothing works until I put rx.js in the root folder and put this line at the end of the file:
<script src="scripts/es6-module-loader#0.16.6.js"></script>
</body>
</html>
then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.
How to make all this work locally without node.js and without internet connection?
You should include the sfx version of angular 2 like this:
<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>
Note that it's a self contained js file you can download locally.
Check this sample project I made in github:
https://github.com/alfonso-presa/angular2-es5-sample
Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js
Thanks to Arnaud Boeglin's idea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):
<script src="scripts/traceur-runtime.js"></script>
<script src="scripts/es6-module-loader.js"></script>
<script src="scripts/system#0.16.11.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
The es6-module-loader has to be before the systemjs in <head> tag.
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
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 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