I am currently trying to use photobooth.js to make a simple photobooth page. I know very little about JS and webpages, but it seemed the best solution for what I have in mind. My problem is that when I load the script (no dependencies, according to the website) and try to use it in my basic app, nothing happens, so obviously I'm not calling the script properly. To make sure the script is loaded, I added a ShowAlert() function to photobooth.js that I use in an onload="ShowAlert()" statement, which indeed triggers the alert.
So adding myPhotobooth = new Photobooth( document.getElementById( "container" ) ); to my page does not work as advertised here (or more likely I don't understand how to use that)
Would someone please explain what I am missing?
The modified photobooth_min.js source:
/**
*
* Photobooth.js version 0.7
*CUSTOM DEBUG CODE
*/
function ShowAlert() {
alert('show this message');
}
/**
*Rest of photobooth_min.js code, unmodified.
*/
my index.html page:
<!DOCTYPE html>
<html>
<head>
<title>photobooth</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="photobooth_min.js" onload="ShowAlert()"></script>
<script>
myPhotobooth = new Photobooth( document.getElementById( "example" ) );
</script>
</body>
</html>
my directory structure:
when you call external script files, you shouldn't have anything inside...
<script type="text/javascript" src="WebContent/photobooth_min.js"></script>
<script>
var myPhotobooth = new Photobooth( document.getElementById( "example" ) );
</script>
the other thing is the path to the file, in this case, and assuming you have this HTML in a file called index.html the structure you are setting is:
|--- index.html
|--- WebContent (folder)
|--- photobooth_min.js
to start, put all in the same folder like:
|-- index.html
|-- photobooth_min.js
and reference the script only as
<script type="text/javascript" src="photobooth_min.js"></script>
P.S. remember that the photobooth script will never work on IE and Safari ... the 2 most used browsers in both Windows an Mac platforms...
Related
I fill shame to ask this silly question but anyway I get this erorr:
Uncaught SyntaxError: Unexpected identifier
Any time that I add this ref:
<script src="../Scripts/ddd.js"></script>
to index.cshtml page.
Here is index.cshtml page:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../Scripts/ddd.js"></script>
</head>
<body>
<div>
Home
</div>
</body>
</html>
And here is ddd.js file:
(function () {
alert("ddd")
}());
UPDATE
I use asp.net core 2.2
Any idea why I get the error above?
please add reference like this
<script src="~/Scripts/ddd.js"></script>
In ASP.NET Core default root folder is always wwwroot folder. So you need to put your files under wwwroot folder. If you want to refer that file from a regular html file you can use '''
"../Scripts/ddd.js"
'''
However if you refer it in a cshtml page with razor code then you would need
'''
"~/Scripts/ddd.js"
'''
"~" points to root folder in razor syntax.
I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}
I have been trying to call a single property from an object from an external .js file into an HTML table cell. My code is as follows:
This is from the external .js file "script.js"
var shortsF = new Object ( );
shortsF.description = "Stone Wash Denim Shorts";
shortsF.stockLevel = 20;
shortsF.price = 25.9;
This is a part of the index.html file:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td><script>document.write(shortsF.description)</script></td>
</tr>
</table>
</body>
</html>
This works when the object is initialised locally in the HTML file but not in the external .js file - I must be missing something simple but I can't figure it out at all!
Many Thanks,
Matt
i saved your two snippets into script.js and index.html and it worked as is. So there is something else you are doing that's breaking it.
as an aside, that's not a good way for inserting text into the DOM
It looks fine. Is script.js in the same directory as the html file? That's where your HTML expects it to be. If they're in the same place and everything is written as you posted, it ought to be working fine.
If you want to get more fancy, you can look into using your script as a module: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using?redirectlocale=en-US&redirectslug=JavaScript_code_modules%2FUsing
So, lets say you have a page that wants to load from a javascript file and it includes
temp.html file
<script src="example.js"></script>
<p class="one"></p>
Now in the example.js file you have a function that is
function getInfo() {
var place = "foo"
$(".one").html(place);
}
//Edit currently I call the function inside the JS file
getInfo();
My question is how would you connect the two files so that the external javascript file knows that it is pointed to the paragraph with the class one?
Normally when this is in a single page, you would call the function and the info will be set.
I have seen a getScript method and a load method for Jquery. Would that be applicable here?
Any ideas on how to approach this? If you provide some code that will be super helpful.
Thanks in advance.
Looks like you want to execute getInfo() as soon as it's defined (i.e.: example.js is loaded).
You can try this approach:
<script src="example.js" onload="getInfo();"></script>
In your example.js, change getInfo() to something like this:
function getInfo() {
$(document).ready(function() {
var place = "foo"
$(".one").html(place);
});
}
Your language is confusing, but you could use jQuery's $(document).ready function which would suffice. Generally speaking, an externally loaded file should execute where the tag is in the script.
A hack could be to place a tag before the end of your document body, give it an id, and then use $('#id').ready() there. In general though, you could just try coding the transclusion concept (I'm guessing you're used to this) from scratch using intervals and timeouts.
<div id="rdy">
</div>
</body>
Then in your file:
$('#rdy').ready(getInfo);
Just my added opinion, you should consider that Google is up to some not-so-nice things these days, they are long-gone from the "do no evil" mantra.
If we assume you have a JavaScript file that contains this content:
function getInfo() {
var place = "foo"
$(".one").html(place);
}
then your markup will look something like this:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="example.js"></script>
<script>
$(function(){
getInfo();
});
</script>
</head>
<body>
<p class="one"></p>
</body>
</html>
$(function(){ ... }); is just the simplified version of $(document).ready(function(){ ... });. They both more or less handle the onload event, which fires when page has finished loading.
I have a probably very simple problem that is completely spoofing me.
I have got a web server (XAMPP) running off a reasonably slow usb stick.
I've got a very simple file structure:
--htdocs
--projects
--callback
index.html
--js
jquery-1.9.1.min.js
callbackclient.js
--css
main.css
For some reason, I can't get a simple linked script working:
Here is my index.html
<!DOCTYPE HTML>
<html>
<head>
<script src='js/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='js/callbackclient.js' type='text/javacsript'></script>
<link href='css/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
This is a test
</body>
<script>
$(document).ready(function(){
tester();
});
</script>
</html>
And here's my callbackclient.js:
function tester(){ console.log("test");
}
When I hit localhost/projects/callback the browser displays "This is a test" as expected, but I get an error in the console:
Uncaught ReferenceError: tester is not defined
I get the same if I try to run tester(); from console directly, yet $("head") correctly selects the head element which I guess means jQuery is being loaded fine.
I must have missed something fundamental - someone please enlighten me!
It could be that you misspelled the type on the script tag. text/javacsript instead of text/javascript
Try this inside your callbackClient.js:
var tester = function (){ console.log("test"); }
If that works, you just need to have the function be set to a variable, and then call it. If that doesn't work, then I would just remove the JS code on your HTML page and do this inside your callbackClient.js:
jQuery(function () {
// Logic here
console.log('this is working, right?');
var functionName = function () {
console.log('blah blah blah')
}
functionName();
})
Hope that helps!