I'm new in using javascript and html.
I've been following a tutorial that involves loading files from the Paperjs code library. I'm trying to load a js file that contains functions and objects for placing images on web pages.
Whenever I attempt to load the "paper-full.js" file, I get a 404 error in the Console, despite the "paper-full.js" file being in the same location as the "index.html" file that's calling for it. The preview page also has the localhost IP address as the page's title, rather than the file name.
The goal for this part of the tutorial is just to place an image at [0,0] on the preview page.
Any ideas on where the mistake could be will be greatly appreciated.
folder containing the paper-full and index files
preview page error for index.html
Here is the index.html file
<!DOCTYPE html>
<html>
<head>
<!-- Imports the Paper.js library -->
<script type="text/javascript" src="js/paper-full.js">
</script>
<!-- Connects Paper.js with the HTML canvas -->
<script type="text/paperscript" src="js/rocket.js" canvas="canvas"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>
Looking at your project structure you have your paper-full.js and rocket.js files alongside your index.html file, but you are looking for them inside a /js/ folder that doesn't exist.
Try this, noting how I have changed js/etc to ./etc, meaning it will look for it's neighboring file.
<!DOCTYPE html>
<html>
<head>
<!-- Imports the Paper.js library -->
<script type="text/javascript" src="./paper-full.js">
</script>
<!-- Connects Paper.js with the HTML canvas -->
<script type="text/paperscript" src="./rocket.js" canvas="canvas"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>
Related
I am currently working on a portfolio site through Cargo. I have minor understanding of writing script but have been attempting to load a 3D model onto my homepage. I found the tag and was wondering how to make it work, it is not visible on the screen right now.
<!DOCTYPE html>
<html>
<body>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://files.cargocollective.com/c1743864/exp_flower_oldv.obj" shadow-intensity="1" camera-controls touch-action="pan-y" generate-schema></model-viewer>
</body></html>
The code above I have attempted it and Cargo accepts it but the model is not visible. For
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
Do I copy and paste the code from this link and save it as an html file to then upload it onto cargo?
<!DOCTYPE html>
<html>
<head>
<title>
Leader Makers Leadership Addessment
</title>
<!-- (A) LOAD QUIZ CSS + JS -->
<link href="quiz.css" rel="stylesheet">
<script type="text/javascript" src="https://www.dropbox.com/s/h96acg5jbwidphm/quiz.js"></script>
<STYLE>
H1 { text-align: center; background: #cf1a1f;
color: #fff}
</STYLE>
</head>
<body>
<H1>Leader Makers Leadership Level Assessment</H1>
<!-- (B) QUIZ CONTAINER -->
<div id="quizWrap"></div>
</body>
</html>
I am trying to run a JavaScript stored on my google drive but it does not run if I replace the src with just the file name it works fine.
If there is a alternative way to run the script and CSS on my WordPress site please share the same.
If you host a file more than some MBs, than g drive shows you an html file as a notice that it could not scan the file for virus. If you copy download link after downloading, then you will see that it is a temporary link, but you might be able to host images in it. (See this). But you can use github repo for this purpose. See more here: https://gomakethings.com/how-to-turn-any-github-repo-into-a-cdn
first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.
remove script tags from helloWorld.js
just
alert("hello");
I want to do my own jwplayer6 skin. I found some tutorials on official pages, but it doesn't work for me. I gues, I have a mistake somewhere. I found that I have to do my own XML file where I have to define the skin. I download custom jwplayer6 skin in XML format and I edit it and link into my script on my webpages. The source is here.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="LJ2OdmUWFU9huxlX+xQ47geW5DeqsVTFce3RZg==";</script>
</head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "song.mp3",
skin: "skin/six.xml"
});
</script>
</body>
</html>
I edited the original XML to do some changes in skin, but it didn't work, so I totally deleted all unneeded XML tags, but the player is still the same, so I haven't got any idea, how to make my own skin. Any idea? Here is the live preview.
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle