I wanted to use pdf.js for a project of mine but I faced an issue of importing it, basically, the CDN doesn't work
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.min.js"></script>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
pdfjsLib.getDocument('./ahmed.pdf').then(doc => {
console.log("this file has" + doc._pdfInfo.numPages);
});
</script>
</body>
</html>
and that is the errors that my console shows
Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.
Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function
So what should i do to solve this problem and thank you so much
You have to set GlobalWorkerOptions.workerSrc to /build/pdf.worker(.min).js of same version:
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.worker.min.js"; 👈
pdfjsLib.getDocument('./ahmed.pdf').promise.then(doc => {
console.log(`This document has ${doc._pdfInfo.numPages} pages.");
});
And, as #Pasi has mentioned, you have to promisify .getDocument() by chaining .promise on it. Without it, there is no .then().
See the "Hello World with document load error handling" example on this page to get started: https://mozilla.github.io/pdf.js/examples/
(Your snippet is missing .promise after getDocument() and setting the workerSrc property)
Related
This code works fine but I need to run this script on a html button means when the button is clicked then this function get executed!!!
async function example() {
let driver = await new Builder().forBrowser("chrome").build();
await driver.get("https://google.com");
}
example();
I tried this but not working,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Testing</title>
</head>
<body>
<script type="text/Javascript">
async function example()
{
const {Builder, By, Key, util} = require("selenium-webdriver")
let driver = new Builder().forBrowser("chrome").build();
driver.get("https://google.com");
driver.findElement(By.name("q")).sendKeys("Selenium",KEY.RETURN);
}
</script>
<button onClick="example()">Click me</button>
</body>
</html>
Error:
index.html Uncaught ReferenceError: example is not defined
at HTMLButtonElement.onclick
and, I also tried it with external js but it still not working
selenium-webdriver cannot run inside a web browser, the APIs it needs are not available.
You would need to rewrite the JS so it runs in Node.js.
If you wanted to access it from a web browser, then you would need to write a web service front end for it.
You could then access that web service from the browser with, for example, fetch.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
</body>
</html>
When run this page localy from desktop in Chrome - it works (russian words after page page load translate to english). So it works well in snippet here!
But when put page to website and run like normal site from web - it DONT WORK (russian words dont translate). Webpage here: http://www.shram.kiev.ua/bak/1.shtml
Error: Uncaught TypeError: google.translate.TranslateService is not a constructor
I really dont know js but i trully need fix. Help pls. And pls give fix to my topic, because i read all topics about "is not a constructor" but dont understand :(
You need to load the translate library before you try to use it. On an HTML page, <script> tags are loaded in the order they appear, so you need to move the script tag loading Google translate above the script tag where you are trying to use it.
I have just started coding and I have encountered a problem that seems very obvious. I wrote an HTML code in an HTML file and a CSS code in a CSS file. I have placed both in the same project folder.
To animate my website, I decided to write a Javascript code in a .js file using jQuery. I downloaded the latest version of jQuery into that same folder as all my other files of that project.
The CSS linked just fine, but not the Javascript. (I needed some text in Russian, so I followed the instructions from an answer in this forum). I am using Atom.
Heres my code (the file is long, so I won't include the full contents, just the javascript element... I literally made one to test it out but nothing seems to work) :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
and here is what i wrote on main.js to see if it works :
$(document).ready(function() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
So as you can see I am trying to make this part hide when the mouse goes over it. I also tried with 'click' and without the event. I didn't type anything else in main.js... was there supposed to be something that notifies it what document this goes into?
Furthermore, in the HTML, I also tried to specify the type (although not necessary). It also didn't work.
I don't know if I made typos or anything... I suspect that it may be because I put them all in the same project file. The project file in sitting on my desktop. Could that be the cause of the problem?
EDIT
I have changed my main.js file to :
$(document).ready(() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
But it still doesn't work...
remove => from $(document).ready(function() => { and it will work (either it is in separate js file or added in HTML page itself)
Working snippet:-
$(document).ready(function(){
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--used live jquery library to make it working -->
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
Note:- You can do like this also
$(document).ready(()=>{
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
Running Output:- https://jsfiddle.net/npthjwu1/
A bit more cleaner approach:-
$(document).ready(function(){
$('.out').on('mouseover',function(){
$('.out').hide();
});
});
remove => from $(document).ready(function()
I think the problem comes with the anonymous function syntax that you are passing in as jQuery event handlers. You are trying to use both the old school JavaScript lamba and the new ES lamba syntax.
Try removing the old school JavaScript anonymous function syntax function(){}, and use the new ES style () => {} (since it is the latest, which is supported by modern browsers) as follows...
$(document).ready(() => {
$('.out').on('mouseover', () => {
$('.out').hide();
});
});
I am a newbie in web development and tried my hand the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Generic Page </title>
<script type="text/javascript">
setTimeOut(wakeUpUser, 5000);
function wakeUpUser() {
alert("Time to make life interesting");
}
</script>
</head>
<body>
<h1>Just a generic heading </h1>
<p>Just a normal paragraph</p>
</body>
</html>
But the script does not run only a boring static HTML page.I am following the HeadFirst Javascript Programming.Is the book wrong on this example?
You have a typo in your JavaScript. setTimeout should be written with a small "o".
This is the Script error in your code, modify the "SetTimeout" to an actual case.
I have attached both the result of your code and Bug Fixed code results, where SetTimeout code fix suggested works fine.
setTimeout(wakeUpUser, 5000);
Your Code Before Fix:
Result After Bug Fix:
Just a super small typo in your code, instead of 'setTimeOut', it needs to be a lowercase 'O', so 'setTimeout'. Here's the complete snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Generic Page </title>
<script type="text/javascript">
setTimeout(wakeUpUser, 5000);
function wakeUpUser() {
alert("Time to make life interesting");
}
</script>
</head>
<body>
<h1>Just a generic heading </h1>
<p>Just a normal paragraph</p>
</body>
</html>
I think you much call setTimeout use o insteh of O after declare function :) ... If you don't have jQuery library. try to use setInterval function :) more exaple
http://www.w3schools.com/jsref/met_win_setinterval.asp
Try moving the setTimeout to be after the function is declared.
Your browser's developer tools should show you any errors encountered. Specifically the 'console'.
Happy coding!
Edit: see also the other answers about the small o in setTimeout
I've been trying to use the jquery.printElement plugin but nothing happens when I click on the Print link, except for this error message in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined
The code I'm using is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print</title>
</head>
<body>
<p id="content">Some text to print</p>
Print
<script src="../common/js/jquery-1.10.1.min.js"></script>
<script src="../common/js/jquery.printElement.js"></script>
<script>
$('#printIt').click(function() {
$('#content').printElement();
});
</script>
</body>
</html>
Anyone know why this is happening?
The printElement plugin uses jQuery.browser internally, and $.browser has been deprecated and removed in the version of jQuery you're using.
You have to use an older version of jQuery, or possibly the migrate plugin to make printElement work.
wrap code inside document.ready.
$(function()
{
$('#printIt').click(function()
{
$('#content').printElement();
});
});