Hello I am developing a HTML 5 game and in Chrome the animations looks great but in firefox not! I was searching over the internet and i found a solution that i need to change some settings in about:config and they are:
webgl.force-enabled=true
webgl.msaa-force=true
layers.acceleration.force-enabled=true
gfx.direct2d.force-enabled=true
stagefright.force-enabled=true
I change those setting manually and the animations looks great in Firefox. Now my question is how can I do that using javascript? Is it possible?
A discussion in the MozillaZine forum suggests creating a bookmarklet as follows (instructions and code copied from there):
Make a file in your Firefox installation folder, under the res directory, called for example 'proxy.htm', and put this in it:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Proxy Toggle</title>
<script type="text/javascript">
// <![CDATA[
function loaded() {
netscape.security.PrivilegeManager
.enablePrivilege("UniversalBrowserAccess UniversalXPConnect");
var prefs = Components.classes["#mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);
if (prefs.getIntPref("network.proxy.type") == 0) {
prefs.setIntPref("network.proxy.type", 1);
}
else {
prefs.setIntPref("network.proxy.type", 0);
}
self.close();
};
self.onload = loaded;
// ]]>
</script>
</head>
<body>
Please wait...
</body>
</html>
Then make a bookmarklet to toggle the state of the proxy pref, and put this as the location:
javascript: void(window.open('resource:///res/proxy.htm'));
See: http://forums.mozillazine.org/viewtopic.php?f=7&t=87755
You should not change these settings - not on your computer and especially not on computers of other people. These settings will be enabled anyway, assuming that the hardware and drivers are capable of handling them. The force-enabled settings are for testing only, switching them on is likely to cause instability (Firefox crashes, graphics driver crashes).
Most likely reason why Firefox didn't enable hardware acceleration automatically in your case are outdated drivers - you should install current drivers for your graphics card and recommend other people to do the same.
Related
I want print dialog to be open after PDF is rendered in browser which is working fine in firefox by adding JavaScript mentioned here but it is not working in chrome.
I have tried to add onload event and setTimeout function still it's not working.
These scripts are working in firefox but not in chrome:
<script type="text/javascript">
try {
this.window.print();
}
</script>
<script type="text/javascript">
try {
setTimeout(function() {
this.window.print();
}, 3000);
}
</script>
<script type="text/javascript">
window.onload = function() { this.window.print(); }
</script>
It's been a while since I worked with JavaScript for PDF. I believe window is a browser object and not available in all PDF readers. Try this.print() (this at the root level being the Doc object). You can check for support in your script or use try/catch to enable better cross-reader compatibility.
Here's one way to do it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript test</title>
</head>
<body>
<p>This document will trigger a print dialog.</p>
<script type="text/javascript">
try {
this.print();
}
catch(e) {
window.onload = window.print;
}
</script>
</body>
</html>
The JavaScript API implemented by the various browsers may or may not support the full API as documented by Adobe in the JavaScript for Acrobat API Reference. I have so far been unable to find a reference for other PDF viewers (such as the one bundled with Chrome).
After some testing it does seem that there is limited support by the web browsers when a PDF is rendered stand-alone (i.e. within the browser chrome) versus in a web environment (i.e. in an iframe).
Also note that Dompdf does not support embedding JavaScript into the PDF by default so you'll have to enable it in the Dompdf settings.
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', true);
$dompdf = new Dompdf($options);
Opening a PDF (or any URL) in a new tab allows for (optionally) triggering the print dialog via the following function.
/**
* Opens a URL in a new tab. Optionally triggers the print dialog after the window has loaded.
*/
function openInNewTab(url: string, triggerPrintDialog: boolean = false): void {
if (url !== "") {
const newTabWindow = window.open(url, "_blank");
if (newTabWindow !== null) {
if (triggerPrintDialog) {
newTabWindow.onload = newTabWindow.print;
}
newTabWindow.focus();
}
else {
window.alert("openInNewTab() blocked by browser.");
}
}
}
Here is some HTML (Fiddle):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Write</title>
<script>
function test() {
if (window.location.hash == '#test') {
alert('The hash is already set!');
} else {
document.open();
document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\
<html>\
<head>\
<title>Hello There!</title>\
<script>\
function test() {\
window.location.hash="test";\
}\
</'+'script>\
</head>\
<body>\
<button onclick="test()">Test Hash Now</button>\
</body>\
</html>');
document.close();
}
}
</script>
</head>
<body>
<button onclick="test()">Click to write new page</button>
</body>
</html>
If you run this - then click "Click to write new page" - it will write a new HTML fragment onto the document. This time there is a button to "Test Hash Now" - when you click all it does is update the window.location.hash.
In FireFox the page tries to reload again unexpectedly. In all other browsers it works fine. In Fiddle you will see an error message {"error": "Please use POST request"} if you create a HTML file it will work better, you'll see the "Click to write new page" button appear again after clicking "Test Hash Now" which is (or should be) wrong.
Why is this happening?
My use case is simple - I have a bootstrap page that contains a javascript that fetches a bunch of data using AJAX. It then generates a large HTML string (including doctype/head/body/etc) and then it just needs to render that HTML string.
In this case I am using an inline HTML as a constant - but in the real case it is generating it using some logic. I am trying to simulate what the server will respond with and eliminate any server side requirements for the client.
I would just have a bunch of HTML and JS files zipped up into one file, and I could give that to anyone (developer or not) to run without any need for a server or database. Then they could see the page as if it were the real-deal. That's my goal. If I simply put the HTML into an existing element on the page (such as just manipulating the body of the current page) - it won't behave EXACTLY the same as if the entire document were generated. Plus I want the bootstrap HTML file to be really small (with just one javascript include at the top).
Everything seems to work - except Firefox is the only one that fails. It all works unless there is a script referenced inside the page that needs to write something to the window.location.hash - then it tries to reload the whole page... Uggg...
Any better way to accomplish this?
I tried to create an iframe and using the same document.open();document.write(html);document.close() - but the same exact issue happens.
Try this code to push the hash state:
if (history.pushState) {
history.pushState(null, null, '#test');
}
else {
location.hash = '#test';
}
but I haven't tested it myself.
Added: Try naming your functions test1() and test2(). This won't fix it necessarily, but it may help to debug/discover what is happening.
I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.
Consider the following Html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
alert('' +
'\'test\'[0] = \'' + 'test'[0] + '\'\n' +
'\'test\'.charAt(0) = \'' + 'test'.charAt(0) + '\'\n'
);
</script>
</body>
</html>
When I open this file on my local machine it gives the following output (both in ie8 and Chrome):
'test'[0] = 't'
'test'.charAt(0) = 't'
When I host this file on IIS7.5 I still get the same result in Chrome but ie8 gives the following result:
'test'[0] = 'undefined'
'test'.charAt(0) = 't'
How is this possible?
Jan, just to add to your own answer, the more standards compliant way to enable compatibility view would be to just use a standard doctype at the beginning of your document.
<!DOCTYPE html>
Which is the HTML5 doctype, should put you into standards mode as well.
OK I found out it was due to compatibility view. Internet explorer comes standard (I think, I am not the owner of this laptop) with the option to display all intranet pages in compatibility View. To force it to use ie8 compatibility view I had to add the following meta tag to the head element:
<meta http-equiv="X-UA-Compatible" content="IE=edge" > <!-- IE8 mode -->
You can also turn this option off under 'Page' > 'Compatibility View Settings'
This question has put me in the right direction.
EDIT: I advise web developers to leave this option checked in ie8, because most of your users will have it checked. This way you will catch these errors in the development cycle.
EDIT2: sv_in is right. IE=edge is much cleaner.
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false