I am having issues with a simple project I am doing. I am trying to play around with some JavaScript, HTML5, SVG drawing using Raphael.js. When I try loading the HTML page with the embedded JavaScript files I get a blank page in my browser. I checked Firebug and Chrome developer tools and I keep getting a 304 Not Modified error for my scripts and my HTML page.
I'm running this project on my local server using MAMP on a Mac OSX.
Here is my HTML:
<html>
<head>
<title>g.Raphael Practise</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.pie-min.js"/></script>
<script type="text/javascript" src="myscript.js"></script>
<style type="text/css">
#canvas-container {
width: 500;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas-container"></div>
</body>
</html>
This is the content of "myscript.js":
window.onload = function() {
var paper = new Raphael(document.getElementById("canvas-container"), 500, 500);
paper.piechart(250, 250, 100, [55, 20, 13, 32, 5, 1, 2]);
}
From the docs of g.raphaeljs:
include raphael.js, g.raphael.js and any (or all) of g.line.js, g.bar.js, g.dot.js and g.pie.js into your HTML page
Your current code doesn't really show an empty page, but you have to include the gRaphaël basic script as well to make it work:
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.raphael-min.js"/></script>
<script type="text/javascript" src="g.pie-min.js"/></script>
<script type="text/javascript" src="myscript.js"></script>
Related
I am currently learning AnimeJS but I am having a problem with the animation.
Basically, what is happening is that when I run a simple html that contains css styles and a javascript script on my localhost, the website is skipping a portion of the `
Here is my entire code:
<!DOCTYPE html>
<html>
<head>
<title>AnimeJS</title>
</head>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script >
anime({
targets: 'div',
translateX: 250,
duration: 1000,
});
</script>
</html>
Here is the localhost version:
And here is the version when I just open the index.html normally (locally) without localhost
Any suggestions as to what I am doing wrong and/or what I need to change in order for my localhost to work properly?
Trying to implement jQuery countdown using this reference
Code:
<html>
<head>
<meta charset="UTF-8">
<title>Merry Christmas</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<!-- countdown -->
<div id="defaultCountdown"></div>
<!-- countdown -->
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script>
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
</script>
</body>
</html>
It shows nothing but blank page. No console errors.
The fiddle can be seen below
https://jsfiddle.net/n4nmgkgc/1/
jquery.countdown.js has a dependency on jquery.plugin.js. Try changing the loading sequence of these two JS files like below. Load the "jquery.plugin.js" first, then load the "jquery.countdown.js".
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>
There is no issue in your script , just that the external libraries/resources your loading is over http protocol, jsfiddle is not working properly as its blocked.
but that should not stop you when running the same script on your browser.
Workaround:
Anyway as a workaround I have dumped all those resources manually on your jsfiddle and your count down script is working fine.
Working CountDown Timer #JSFiddle
Also you need to understand the dependency of the libraries your loading for your script , because in your case your jquery.plugin.js is dependent on jquery.js and jquery.countdown.js is dependent on jquery.plugin.js.
so below is the order in which you need to load the external libraries (Top to Bottom):
jquery.js
jquery.plugin.js
jquery.countdown.js
Your script at the bottom of your page needs to be like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function () {
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
});
</script>
Like #Tarafder Ashek E Elahi said, jquery.countdown is a dependency of jquery.plugin
you forget to add style
please add it
in head
<style type="text/css">
#defaultCountdown { width: 240px; height: 45px; }
</style>
and refresh page.. clock will show in page.. try fast
This is probably the weirdest thing I've encountered while programming in JavaScript, and I can't find a solution anywhere online.
So all I've done is created an html document and a JS file that is externally linked to it. When I try to reference an element from the page in the JS file, it doesn't do anything, and there aren't any errors in the console. Here's an example:
$('#box').click(function() {
alert('test');
})
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
</html>
It works wonderfully in the fiddle, but on my machine it doesn't. Also tried hosting on Google Drive, nothing. I opened it on another computer, nada. Here's the live page:
https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html
I don't understand!?!?
How does it behave if you define HTML like below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
It is actually recommended to include custom JavaScript after document body.
In addition to fixing your issue, the HTML will be displayed on the page before JavaScript execution will finished.
If scripts.js is using jquery, you need to load the jquery before you load scripts.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>
You have two separate issues:
First you must load jQuery before your script so that it is available when your script runs. So, switch the order of your two script tags to fix that issue.
Your script cannot run until the DOM is loaded. When you run it in the <head> tag, it is running BEFORE the DOM has loaded and thus the page is empty at that point so your code can't find the proper elements to install click handlers. There are a couple ways to solve this issue. The simplest is to move all your script tags to right before </body>. This will ensure that the DOM is available when the scripts run and you won't have to do anything else special.
Here's a revision of your HTML that should work:
<html>
<head>
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
You could also just switch the order of your two scripts and leave them in the <head> tag and then change your script to this:
$(document).ready(function() {
$('#box').click(function() {
alert('test');
})
});
In jQuery, the $(document).ready(fn) construct instructs jQuery to call a specific function only when the DOM has finished loading. This allows you to place this initialization script anywhere and jQuery will make sure that your callback function is not called until the DOM is ready.
i want create generate web to pdf. In My Website,
this script is work, but not generate images in my website.
you can download my script in this link > http://tinyurl.com/jspdftesting
you can test in file "test.html"
Before ask i already try search in google, but not found about this case.
Please help me. This is my script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('try.pdf');
});
});
</script>
</head>
<body >
<div id="target">
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.<br/>
<img src="http://cdnstatic-2.mydestination.com/library/images/481030_1680_948.jpg" width="200px" height="100px">
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
HTML/WEBPAGE VIEW
PDF VIEW
Someone might need this one day; Images have to be converted to base64.
I am working with Optimizely guiders.js example code:
http://jeffpickhardt.com/guiders/
Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.
Here is the edited HTML:
<html>
<head>
<!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="guider.js"></script>
<script type="text/javascript" src="guidedTour.js"></script>
<link rel="stylesheet" href="guider.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>
</body>
</html>
I have all the JavaScript code in guidedTour.js, in the same directory.
All .js files are also in same directory. And the code worked before extracting it in separate file.
The guiders do not load when JavaScript is in separate file.
I am getting the following error in Chrome:
"Uncaught TypeError: Cannot read property 'clientHeight' of null
jquery-1.5.1.min.js:16"
Trying a more recent version of jQuery throws an error on guiders.js.
Anyway it seems a different behavior than if I keep the JavaScript code in the index.html.
I have created a jsfiddle for the working code:
http://jsfiddle.net/vpMQy/
I do not know how to create a similar jsfiddle with the JavaScript in a separate file so that I can reproduce the problem.
Is it possible to put this JavaScript code in a separate file?
Always wrap your code inside the DOM ready handler
$(document).ready(function() {
//your code here
});
Or its shorthand
$(function() {
//your code here
});
Or put your scripts at the very end of the document's body:
//...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</body>
And you won't have problems manipulating them DOM before it's ready. =]