New to all of this and trying to get my .js script to work in Coda2. If anyone has any idea of why the .js script file is not responding, that would be great!
Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script type= 'text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type= 'text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
In the script:
$(document).ready(function() {
$('div').mouseenter(function() {
$('div').fadeTo('fast',1);
});
$('div').mouseleave(function(){
$('div').fadeTo('fast',0.5);
});
});
Please find the image here of my code:
http://postimg.org/image/qis0sitd1/
You haven't added a script tag to include jQuery.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js' type='text/javascript'></script>
You have to include the jQuery library. You can use the Google CDN for that:
<!DOCTYPE html>
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script type= 'text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type= 'text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
You haven't included the Jquery lib, please include one.
eg: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Related
I need jQuery autocomplete for a project but it doesn't work for me.
I don't know where is my mistake.
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
<form>
<input type="text" id="recherche" />
</form>
</body>
</html>
You have multiple issues with html syntax here:
Move the script tags for jquery files to the head tag
move your script to after the body
Your script must be after the body tag or it can be placed instead of the head tag and use a document ready check to allow it to run after the page loads (see http://learn.jquery.com/using-jquery-core/document-ready/). Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="recherche" />
</form>
</body>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
</html>
see a working example here https://jsfiddle.net/q7k28bp0/1/
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
I have very simple code
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
</head>
<body>
asdfasdf
{{1+2}}
</body>
</html>
and I'm pretty sure everything is pointing to the right directory. My app.js is:
( function () {
var app = angular.module( 'app' , [] );
}) ();
However, opening index.html on localhost all I can see is a blank page but when I delete the lines
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
I get a page that says "asdfasdf {{1+2}}" How can I get angular working? Is there a big mistake I'm making somewhere?
Script tags must have an end tag. They cannot be self-terminating.
<script type="text/javascript" src="assets/js/app.js"></script>
im trying to call
.bind("click")
from an external .js file (js1.js).
here is the code:
js1.js:
$(function() {
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
page.html:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
</head>
<body>
<p>Click me!</p>
</body>
this code does not work in my files.
i found it from w3scools and it is working in their site:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
how can i make it running from my external .js? any ideas?
thanks.
By the looks of it, you haven't added jQuery on your page yet. Add jQuery prior to your script.
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
If you forget to add this line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
so add it in your <head> </head> section first. Otherwise your script could not work.
Bellow the complete code which working for me..
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#p').bind('click', function(){
alert('The paragraph was clicked.');
});
});
</script>
<style>
#p{cursor:pointer;}
</style>
</head>
<body>
<p id="p">Click me!</p>
</body>
</html>