I followed a simple tutorial from here. Which basically has the following code
<!doctype html>
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
Everything works fine without any problems. But when I removed <base href="..."> and substituted all links with this base url ( http://chessboardjs.com/css/chessboard.css ). I got the same animation but now with a terrible blinking effect.
This blinking effect does not appear in IE 11.0.1, Firefox 25.0.1, but appears in Chrome 31.0.1650.57 m
I do not understand what is the reason (in my opinion nothing should change).
P.S. after some time I thought that the reason is due to the Chrome's warning while using jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead., but when I was able to get rid of it, the problem was still there. So I am completely puzzled.
I am the creator of chessboard.js
This is likely related to Issue 52
Check that whatever webserver is serving the image files for the chess pieces is setting an appropriate expires header for them; it should be returning an HTTP 304 Not Modified after an image file has already been requested.
What is probably happening is the web server is re-serving the image files on every board update and causing the "flicker" effect.
I might change how this functions in future versions, but for now that should probably do the trick.
Related
Is there a way to use javascript to modify a script element?
Like for example:
HTML:
<script id="something" src="/js/file.js"></script>
Javascript:
var something = document.getElementById("something");
something.src = "/js/anotherfile.js"
Is it possible? Because I have a bit of code that works like that and it sort of doesn't work
To be specific, here's the code:
<!DOCTYPE html>
<html>
<head>
<title>MyohTheGod's Website</title>
<link rel="icon" type="image/x-icon" href="/supercorn.gif" defer>
</link>
<link id="css" href="/css/dark.css" rel="stylesheet" type="text/css">
</link>
<script src="/js/particles.js" defer></script>
<script src="/js/header.js"></script>
<script src="/js/theme.js"></script>
<script>window.alert("Welcome to the Home of MyohTheGod. You can play games, check out our web proxies, and more. Also, please do check out the About page. Press OK to continue...");</script>
</head>
<body>
-snip-
</body>
<script id="foot" src="/js/footer.js"></script>
</html>
<script>
-snip-
</script>
var css = document.getElementById("css");
var foot = document.getElementById("foot");
function toggleDLmode(m) {
-snip-
if (dlmodebool) {
css.href = "/css/dark.css"
foot.src="/js/dark-footer.js"
} else {
css.href = "/css/index.css"
foot.src="/js/footer.js"
}
}
-snip-
It is working, do you inspect it? It does changed, but maybe you're thinking, "hm why this /js/anotherfile.js is not downloaded?". Well because of the script tag is already rendered and already downloaded, so you can't do that. What you can do though add NEW script tag.
Maybe this will help How to dynamically change the script src?. This links would explain more why your code "does not work".
There certainly is. You can use document.scripts which returns an collection that you can iterate through like an array. You can change the code using the innerHTML property very much like a normal element. See here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
Edited to add: If you've got a html page with multiple script tags, the document.script collection has each script in the order they appear. The code below will log out the source (src tag) or the actual javascript for each script element.
You can also 'write' javascript by setting the innerHTML property.
IMHO it's a bit of a solution that's looking for a problem but at least it gives you access to the number of scripts you have.
[...document.scripts].forEach(script => {
if (script.src != '') {
console.log("Script source:" + script.src);
} else {
console.log(script.innerHTML);
}
});
Firstly, I've searched around and found some things close to what I was looking for but nothing that helped me get to a solution. I have a professional landing page that uses a lot of high res images and stuff so I want to preload it before the users see it so it comes in smoothly. I'm using the below Javascript (I found) to load it in. But I don't think the current Javascript is actually preloading Index.HTML before displaying it. The below javascript is loaded from Preloader.html which I'll display that code below too.
preload.js
(function() {
var preload = document.getElementById("preload");
var loading = 0;
var id = setInterval(frame, 64);
function frame() {
if(loading == 100) {
clearInterval(id);
window.open("index.html", "_self");
return false;
} else {
loading = loading + 1;
if (loading == 90) {
preload.style.animation = "fadeout 1s ease";
}
}
}
})();
Preloader.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="preload" id="preload">
<div class="logo">
</div>
<div class="loader-frame">
<div class="loader1" id="loader1"></div>
<div class="loader2" id="loader2"></div>
</div>
</div>
<script type="text/javascript" src="js/preload.js"></script>
</body>
</html>
I'm pretty sure it's because I'm a complete noob to javascipt and it's only doing window.open and no actual tracking of the index.html page being preloaded. But I couldn't find anything online to confirm this. I believe all my preload.js is doing right now is just on a delay timer using the else statement then it opens index.html without it actually being preloaded.
Thanks for your time, Cheers!
What is going on here is that you're "loading" the page when the counter reaches 100%, and then you're asking the browser to load the page. Indeed no preloading is being done because all that needs to be loaded is the page itself. To sum it up.
The loader page "loads" itself
The loader page displays some animation
When the counter reaches 100, the code asks the browser to navigate to another page
Browser opens page and starts loading the real content
You need to keep all this code together in your page, there is no correct way of knowing the PERCENTAGE of loading from your website, but you can know WHEN it has loaded by using this function:
<script>
window.onload = function() {
alert('page finished loading all images, css and js!');
hideOverlay();
};
</script>
Use this function to hide your overlayElement like so:
function hideOverlay() {
document.querySelector('#preload').style.display = 'none';
}
I'm trying to play multi-drm content (Widewine, Playready) by using dash.js player (version 2.3.0). I gathered as much information as possible, however I'm still not able to play the content. Dash.js player was modified recently and many code examples found on the internet are no longer valid, also the documentation is not updated. This is my current code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="dash.all.debug.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Dash Example App</title>
</head>
<body onload="testVideo()">
<button id="playButton" type="button">Play</button>
<div>
<video id="vid2" data-dashjs-player controls>
</video>
</div>
<script src="main.js"></script>
</body>
</html>
JS:
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_header = "X-AxDRM-Message";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.attachProtectionData({
"com.widevine.alpha": new dashjs.MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS, AXINOM_DEMO_header, AXINOM_DEMO_key)
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
As a result, I'm getting "Uncaught TypeError: Cannot read property 'protection' of undefined" in the console. I've prepared the protectionData part according to the documentation linked below.
http://vm2.dashif.org/dash.js/docs/jsdocs/MediaPlayer.vo.protection.ProtectionData.html
Is anyone able to provide me with a working example how multi-drm content should be handled in dash.js or explain what should I change in my code?
Thanks in advance.
There is a DRM quick start example on GitHub that uses this exact content with the Axinom DRM license server, mirroring your scenario quite perfectly.
You can also find a live deployment of the example project that you can view in your browser, to quickly see the user viewpoint.
If something remains unclear after reading that guide, please edit your question and I will edit this answer to expand on the missing parts in detail!
The documentation you linked to is for version 1.5.1.
The documentation for v2.3.0 can be found at http://cdn.dashjs.org/v2.3.0/jsdoc/index.html
Updated JS
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.setProtectionData({
"com.widevine.alpha": {
"serverURL": AXINOM_DEMO_WV_LS,
"httpRequestHeaders": {
"X-AxDRM-Message": AXINOM_DEMO_key
};
};
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
This code is the core of a much larger script that works great in almost all browsers. Yet it didn't work in IE. So I've stripped it down and found that the image.onload isn't firing in IE.
I've done some research, and I've guarded against it being an image caching problem. For one, the error occurs first time round before anything is cached, and, more importantly, the onload event is attached before the src.
I'm also reasonably sure I'm attaching the onload event in an IE compatible manner, so what gives, why don't I get an alert?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function generate(){
var imageGen = document.createElement("img");
imageGen.setAttribute('onload',"primer()");
imageGen.setAttribute('src', "http://www.google.co.uk/images/srpr/logo3w.png");
document.getElementById('image').appendChild(imageGen);
}
function primer() {
alert("here now");
}
</script>
</head>
<body onload="generate()">
<div id="image">
</div>
</body>
</html>
I'm hosting a version here
I only have access to IE8 unfortunately, so I don't know if it persists across other versions, even so it needs to be fixed.
First of all, events are not attributes and must not be set using setAttribute. It might, or might not work.
Second, try creating image object instead of image element:
var imageGen = new Image();
imageGen.src = "http://www.google.co.uk/images/srpr/logo3w.png";
imageGen.onload = primer;
document.getElementById('image').appendChild(imageGen);
Live test case - worked fine for me on IE9 and IE9 compatibility mode which should be like IE8.
Can you try imageGen.onload = primer instead of imageGen.setAttribute('onload',"primer()"); ?
I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.