I am trying to use exif.js on my HTML page, but I don't think I'm referencing the exif.js file correctly, as window.onload = getExif returns an error saying it's undefined.
I have tried adding <script src="exif.js type="text/javascript"></script> to my HTML file and referencing my other file with <script src="myscript.js" type="text/javascript"></script> as well. It still doesn't seem to be working.
HTML:
<html>
<head>
<script src="exif.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>
</head>
<body>
<img src="myimage.png" alt="" id="image">
<div>
<span id="metadata"></span>
</div>
</body>
</html>
Javascript:
window.onload = getExif;
img = document.getElementById("image")
EXIF.getData(img, function() {
var allMetaData = EXIF.pretty(this);
var allMetaDataSpan = document.getElementById("metadata");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData,null, "\t");
});
The error I got was Uncaught ReferenceError: getExif is not defined. I'm not sure if I'm doing something wrong or not because everything looks good to me. Any help would be greatly appreciated.
You have no function named getExif defined. It's not something special exported or defined by exif.js, but simply a pattern they were following in the documentation examples. I imagine what you were going for is:
window.onload = getExif;
function getExif() {
var img = document.getElementById("image");
EXIF.getData(img, function() {
var allMetaData = EXIF.pretty(this);
var allMetaDataSpan = document.getElementById("metadata");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData,null, "\t");
});
}
This is for a class I'm taking. Its homework out of the book for a particular chapter. The book provides some code that is purposly not working and you have to fix it. I've got it all working exept for this part where youre supposed to get some text to show up at the bottom of the screen that displays the last time the document was modified.
Ive gone over it repeatably and cant find whats wrong. Im wondering if the book has it wrong.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
</script>
</head>
<body>
<div id="xxx"></div>
</body>
The mistakes are in your program
Missing closing curly } brace.
Not invoking the function CopyRight()
Inside CopyRight() not getting the xxx element to work on this.
Script should be invoked when the dom is ready (so placed script after xxx tag)
Correct version of your program is
<html>
<head>
</head>
<body>
<div id="xxx"></div>
<script type="text/javascript">
function CopyRight() {
var xxx = document.getElementById('xxx'); //mistake 3
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
} //mistake 1
CopyRight(); //mistake 2
</script>
</body>
</html>
This is the working one. The code works fine but you forgot to call the CopyRight function.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
}
CopyRight(); // Call Copyright function
</script>
</head>
<body>
<div id="xxx"></div>
</body>
I keep getting Uncaught ReferenceError: $ is not defined error.
I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?
I have this inside the head of my HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
This is my Javascript file:
function typing(id, sentence){
var result = $.Deferred();
var index=0;
var intObject= setInterval(function() {
document.getElementById(id).innerHTML+=sentence[index];
index++;
if(index==sentence.length){
clearInterval(intObject);
}
}, 100);
return result.promise();
}
var sleep = function(ms) {
var result = $.Deferred();
setTimeout(result.resolve, ms);
return result.promise();
};
typing('container','Subject Name:').then(function() {
return sleep(500);
}).then(function() {
return typing('container',' Carlos Miguel Fernando')
});
Where did I go wrong?
Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>
But not
<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Note the order of tags.
These tags do not need to be in the head, and in fact, putting them there is not best practice. They must be in head or body. Best practice barring a specific reason to do something else is to put them at the very end of body, e.g.:
<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>
I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a Perl script
The working JavaScript code looks like this:
var CustomArray = new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML');
Now the new code is:
var CustomArray=new Array(Autocomplete);
And the Perl script is sending back the data to the browser looking like this:
var Autocomplete = 'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'
I also tried
var Autocomplete = ['an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML']
But I get: 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' All as one string in the auto complete.
I cant seem to get it to work right. Full HTML code is below.
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script>
<script>
var CustomArray=new Array(Autocomplete);
</script>
</head>
<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/>
<script>
var obj = actb(document.getElementById('ACOMP'),CustomArray);
</script>
</body>
</html>
First, it looks like there is a typo. The id of your input element is ACMP whereas you pass 'ACOMP' to getElementById.
Second, you do not provide the source code for your Perl script. It might look like this:
#!/usr/bin/perl
use utf8;
use strict; use warnings;
use CGI();
local $| = 1;
print CGI::header(
-type => 'text/javascript',
-charset => 'utf-8',
);
print <<JS;
var Autocomplete = [
'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML'
];
JS
With the following HTML, autocompletion works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<!-- Replace with the URI of your script -->
<script type="text/javascript" src="http://test:8080/cgi-bin/autocomplete.pl"></script>
</head>
<body>
<input type='text'
style='font-family:verdana;width:300px;font-size:12px'
id='ACOMP' value=''>
<script type="text/javascript">
var obj = actb(document.getElementById('ACOMP'), Autocomplete);
</script>
</body>
</html>
Finally, I find it curious that your JavaScript files live in a directory called Java.
Have the perl script return this:
var CustomArray = "an apple, alligator".split(',');
Or, if it has to be this it's okay too:
var CustomArray = "'an apple','alligator'".split(',');
Obviously, I omitted the rest of the items in there but you'd include all of them.
I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function
Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.