I have create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know
Related
I want to put a minified java script contents in tags directly in HTML page. i have html page like:
<html>
<head>
<script src="jquery.js"></script>
<script src="iemagic.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
</head>
</html>
I have minified all the javascript contents and put it in a single file called "all.js" and the html works fine, now it looks like :
<html>
<head>
<script src="all.js"></script>
</head>
</html>
I want to include all the content of "all.js" in to HTML directly in "script" tag. I tried with that but no luck, when i open html file in browser it show all the java script content which i have copied in "script" tag.
Is there any other way for this ?
Thank you all for helping me. i have found the solution for this. * added all the "js" files in different "script" tag tested working fine but some of the javascript lines was visible in the browswer. * The problem was "iemagic.js" was having the comments which are not proper and was creating the problem. * I have removed those commented lines and is working find now. without having any "js" file and only one HTML. Thank you All for your help and valuable time.
You can use gulp or jscompress
I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
I'm definitely not a newbie to scripting, but this just boggles my mind. I want to invoke a function on a button click, so I first wanted to grab the buttonclick event and test that with a simple window.alert. So I just wrote the html document below.
<!doctype html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
Unfortunately, nothing happens. At all. Since this is fairly simple code, I have no clue why this wouldn't work.
Your script tag to pull in jQuery is using the (Common|General) Internet Syntax Scheme. This tells the browser to use whatever scheme was used to load the page in loading the script. It is helpful for sites which respond to both http and https.
If you are viewing your file locally using the file:// scheme, then you should see an error that $ is not defined. This is because the script does not live at:
file://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
Please use this src in the script tag when loading locally:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Path to src should be complete if you have hosted it somewhere.You have not added correct path to jquery library. Everything will work accordingly once you do that.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Demo
According to your url starting with // the browser tries to load that file from your local file system if you're locally testing your site using an url like file://. In that case you're not loading jQuery, so the $ is undefined and your code never executed.
Use the script tag like that for local tests:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
If you run your site on a web server, the cdn-style starting with // will work again.
Code looks fine
I think you are testing in IE < 9 (jQuery 2.x not supporting IE 8)
Please change the browser or load jQuery version like 1.9 and test it
You have to update query script src to 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'
I recommend to download the jQuery script then add it to your project locally instead of the remote one
use <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> and practise to insert html tag
HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
</html>
You are missing to include http:/ in your script src.
Either change your script tag like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
or download the Jquery file and refer locally.
Change your path to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
and try to use jquery 1.10 for less than ie9 browser
<!--[if lt IE 9]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well