<!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
Related
Hi I'm trying to use this plugin for upload multiple images with vue.js. Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
</head>
<body>
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
#data-change="dataChange"
:data-images="images"
></vue-upload-multiple-image>
</div>
<script src="./dist/vue-upload-multiple-image.js"></script>
</body>
</html>
Unfortunately this code neither gives error nor output. But when I use this cdn it works.
<script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
Is there a way to use it without the cdn?. Js file is there and I downloaded it from cdn.
Thanks
The origin of the script should not normally change anything.
Do you use the same version of the plugin? To be sure, you can copy the content of the https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js into your file (right click, save as...).
Is it added to the page? Do you have a plugin like Adblock and does it inform you that it has blocked content? Open your network console and check that the file is downloaded correctly without error (you will see a line with the filename). Did you see the JS code from the network console when you click on the line (to prevent bad serveur configuration)?.
To be sure, you can add something at the end of the script file :
let myTestVar = "JESuisLA";
And verify you can access to myTestVar on the console.
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>
I'm building a web application and extracted the code of my navigation menu in a separate file. Afterwards, I include the menu with the HTML <object> element in all of my pages as suggested here. This ensures that I can modify the navigation without touching any other files.
However, I have a problem of dynamically modifying the elements of my menu using jQuery (or d3.js). Here is a very small toy example to reproduce the problem:
nav.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Title of the navigation menu.</h1>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(document).ready(function() {
// this code does not work
$("h1").text("New Title Of The Menu");
// this code does work
$("h2").text("New Title Of The Website");
});
</script>
</head>
<body>
<!-- include the menu code here -->
<object id="navigation" class="navigationObject" name="navigation"
type="text/html" data="nav.html" width="100%" height="100px"></object>
<h2>Title of the website</h2>
</body>
</html>
It seems that jQuery (and also d3.js) have a problem of selecting elements of embedded objects. Is it possible to select these elements?
Alternatively, is there a better solution to extract the code for the navigation menu in a separate file? The setup of my web application is as follows:
Client side purely written in JavaScript using jQuery and d3.js
Server side written in Java
REST for client-server communication using Jersey 2.6.
This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 9 years ago.
An IBM website talking about rapid web development here mentioned a useful skeleton HTML. In the template, the script inclusion is inside body rather than head. Is it a good practice? Isn't it better to put any library inside head instead?
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<!-- The main HTML will go here -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
VS
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- The main HTML will go here -->
</body>
</html>
It is now standard for script tags to be included just before the closing of the body tag so that the script loading does not block the rest of the page loading.
<script src="myScript.js"></script>
</body>
With this, the user will not have to wait as long to see something on the page, then the javascript functionality is added.
However, there are more and more sites and "web apps" that are javascript/ajax heavy and may require the scripts to be loaded before anything is shown on the page anyway. That is less common, but that is a case where the script could be included in either location, since the visual result would be the same if javascript is responsible for creating/loading the content.
To verify: here is Google's recommendation: https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last
Also consider loading libraries from a CDN, so that you can take advantage of browser caching.
Yes / No
Yes it is good practice as the page will load faster if the code is in the ending...
It waits for the whole page to load and then loads the scripts.
Here's how:
There was this site i visited, which quickly responded to my browser's request. but when i got the response, it was some white page with some boxes and some text. and it was taking ages for the page to load. After some time some images appeared in the boxes and the text got styled.
Why?
When the page loaded the script was placed in the head. So, the script was loading and the images and the styles were in the queue. So i had to witness an ugly page while the script loads.
Alternative:
If the script was placed in the ending of the page, just before the </body> tag, the styles and images would have loaded faster so i wouldn't have to see an ugly site, then the page would load.
References:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://stevesouders.com/docs/googleio-20080529.ppt
Does Google Analytics have performance overhead?
http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/
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