We Keep Coding

Activating script via keypress using JS

I am trying to modify a WordPress plugin which activates a game script when a button is pressed. I would like to be able to activate it with a combination of key presses instead (Shift + Control + F).
I have attempted wrapping the entire script in a keypress function, however, this did not work. I have confirmed that script is loaded via console log but pressing the key combination does not do anything.
Original code:
PHP
<?php
...
/* Insert the button*/
switch ($asteroids_buttonopt) {
case "push-1":
echo '<div><p style="text-align: center;">
<a href="#" onclick="'.$asteroids_start.'"><button>Click to Play Asteroids!!!</button>
</a></p></div>';
break;
...
}
?>
JS
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function startAsteroids(color,address) {
var ver = getInternetExplorerVersion();
if(ver>=0){
color = typeof(color) != 'undefined' ? color : 'black';
document.onkeydown = function(ev) {
var key;
ev = ev || event;
key = ev.keyCode;
if(key == 37 || key == 38 || key == 39 || key == 40) {
//e.cancelBubble is supported by IE - this will kill the bubbling process.
ev.cancelBubble = true;
ev.returnValue = false;
}
}
var s =document.createElement('script');
s.type='text/javascript'
document.body.appendChild(s);
s.src = address;
void(0);
return false;
}
else{
color = typeof(color) != 'undefined' ? color : 'black';
var s =document.createElement('script');
s.type='text/javascript'
document.body.appendChild(s);
s.src = address;
void(0);
return false;
}
}
Any help would be greatly appreciated. The original plugin 'Asteroid Widget' was abandoned 8 years ago so I cannot seek help from the developers.

Instead of wrapping the entire page content, you should add the following onkeypress function to the end of the JS file.
Required Function
window.onkeypress=function(e){
if(e.ctrlKey && e.shiftKey && e.code==='KeyF' ){
startAsteroids('','/wp-content/plugins/asteroids-widget/gears/play-asteroids-yellow.min.js');
}
}
Complete resulting file
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function startAsteroids(color,address) {
var ver = getInternetExplorerVersion();
if(ver>=0){
color = typeof(color) != 'undefined' ? color : 'black';
document.onkeydown = function(ev) {
var key;
ev = ev || event;
key = ev.keyCode;
if(key == 37 || key == 38 || key == 39 || key == 40) {
//e.cancelBubble is supported by IE - this will kill the bubbling process.
ev.cancelBubble = true;
ev.returnValue = false;
}
}
var s =document.createElement('script');
s.type='text/javascript'
document.body.appendChild(s);
s.src = address;
void(0);
return false;
}
else{
color = typeof(color) != 'undefined' ? color : 'black';
var s =document.createElement('script');
s.type='text/javascript'
document.body.appendChild(s);
s.src = address;
void(0);
return false;
}
}
window.onkeypress=function(e){
if(e.ctrlKey && e.shiftKey && e.code==='KeyF' ){
startAsteroids('','/wp-content/plugins/asteroids-widget/gears/play-asteroids-yellow.min.js');
}
}

String Detected as Code

I can't figure out why this isn't working! All the code is being detected as code and not a string to be inserted as it should be. This is supposed to be a mouse follower. Since it is for a chrome extension it is meant to only be js.
The only code that is not supposed to be a string is:
var script = document.createElement("script");
and
script.appendChild(code);
document.body.appendChild(script);
var div = document.createElement("div");
var node = document.createTextNode("<img alt="pickle"
src="https://vignette.wikia.nocookie.net/rickandmorty/images/1/19/
Pickle_rick_transparent.png/revision/latest/scale-to-width-down/363?
cb=20171025014216">");
div.style.visibility = "hidden";
div.style.position = "absolute";
div.style.zIndex = "3";
div.appendChild(node);
document.body.appendChild(div);
var script = document.createElement("script");
var code = document.createTextNode("var firstevent = -1;
var supported = -1;
var xcurs=0;
var ycurs=0;
if (navigator.appVersion.indexOf("MSIE 5", 0) != -1 || navigator.appVersion.indexOf("MSIE 6", 0) != -1){
supported = 1;}
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 5){
supported = 1;}
if (navigator.appName == "Konqueror" && parseInt(navigator.appVersion) >= 5){
supported = 1;}
function updatePosition(e){
if(firstevent == -1 && supported != -1){
document.getElementById("jack").style.visibility = "visible";
firstevent = 1;};
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;}
else{
xcurs = event.clientX;
ycurs = event.clientY;};
}
}
function showBat(){
if (supported != -1) {
supported = 1;
document.getElementById("jack").style.left = (xcurs+10) + "px";
document.getElementById("jack").style.top = (ycurs+2) + "px";
};
myTimeout=setTimeout('showBat()',10);
return;
}
myTimeout=setTimeout('showBat()',10);
document.onmousemove=updatePosition;");
script.appendChild(code);
document.body.appendChild(script);
var div = document.createElement("div");
var node = document.createTextNode("<img alt="pickle" src="https://vignette.wikia.nocookie.net/rickandmorty/images/1/19/Pickle_rick_transparent.png/revision/latest/scale-to-width-down/363?cb=20171025014216">");
div.style.visibility = "hidden";
div.style.position = "absolute";
div.style.zIndex = "3";
div.appendChild(node);
document.body.appendChild(div);
<!DOCTYPE html>
<html>
<body>
</body>
</html>

You're missing the end function bracket for function updatePosition(e)
function updatePosition(e){
if(firstevent == -1 && supported != -1){
document.getElementById("jack").style.visibility = "visible";
firstevent = 1;};
if (navigator.appName == 'Netscape'){
xcurs = e.pageX;
ycurs = e.pageY;}
else{
xcurs = event.clientX;
ycurs = event.clientY;};
}
}

Issue with Firefox36 and IE11 browser detection

I've made a script to detect browser details (browser version, user agent etc), works fine with chrome but IE11 and FF36 are the issue. From the outset, I had chrome and FF working fine but IE was displaying "Netscape" for the browser name. After doing a bit of research, I found out the "MSIE" token had been removed and replaced with "rv". So I changed the token for IE in my JS to "rv" and ran the script, however when I tested it on FF, it then displayed the browser name as "Microsoft Internet Explorer". So if anyone could give me an insight into why or if i'm missing something in my code that'd be great.
//OS version
var osversion = navigator.platform;
var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName = navigator.appName;
var objfullVersion = '' + parseFloat(navigator.appVersion);
var objBrMajorVersion = parseInt(navigator.appVersion, 10);
var objOffsetName, objOffsetVersion, ix;
// In Chrome
if ((objOffsetVersion = objAgent.indexOf("Chrome")) != -1) {
objbrowserName = "Chrome";
objfullVersion = objAgent.substring(objOffsetVersion + 7);
}
// In Microsoft internet explorer
else if ((objOffsetVersion = objAgent.indexOf("MSIE")) != -1) {
objbrowserName = "Microsoft Internet Explorer";
objfullVersion = objAgent.substring(objOffsetVersion + 5);
}
// In Firefox
else if ((objOffsetVersion = objAgent.indexOf("Firefox")) != -1) {
objbrowserName = "Firefox";
}
// In Safari
else if ((objOffsetVersion = objAgent.indexOf("Safari")) != -1) {
objbrowserName = "Safari";
objfullVersion = objAgent.substring(objOffsetVersion + 7);
if ((objOffsetVersion = objAgent.indexOf("Version")) != -1)
objfullVersion = objAgent.substring(objOffsetVersion + 8);
}
// For other browser "name/version" is at the end of userAgent
else if ((objOffsetName = objAgent.lastIndexOf(' ') + 1) <
(objOffsetVersion = objAgent.lastIndexOf('/'))) {
objbrowserName = objAgent.substring(objOffsetName, objOffsetVersion);
objfullVersion = objAgent.substring(objOffsetVersion + 1);
if (objbrowserName.toLowerCase() == objbrowserName.toUpperCase()) {
objbrowserName = navigator.appName;
}
}
// trimming the fullVersion string at semicolon/space if present
if ((ix = objfullVersion.indexOf(";")) != -1)
objfullVersion = objfullVersion.substring(0, ix);
if ((ix = objfullVersion.indexOf(" ")) != -1)
objfullVersion = objfullVersion.substring(0, ix);
objBrMajorVersion = parseInt('' + objfullVersion, 10);
if (isNaN(objBrMajorVersion)) {
objfullVersion = '' + parseFloat(navigator.appVersion);
objBrMajorVersion = parseInt(navigator.appVersion, 10);
}
window.onload = function () {
document.getElementById("browser").innerHTML = objbrowserName;
document.getElementById("fullV").innerHTML = objfullVersion;
document.getElementById("majorV").innerHTML = objbrowserName + " " + objBrMajorVersion;
document.getElementById("appName").innerHTML = navigator.appName;
document.getElementById("userAgent").innerHTML = navigator.userAgent;
}

How to alert a user their browser is not the latest version?

I found a .NET version of this, but can't find a javascript/jquery way to do this. I test my site in the latest IE/Chrome/FF/Safari/Opera. That is a difficult enough task (to me) without adding backward compatibility. The message will be to simply use another browser which is up to date. Are there any scripts that do this? I'm hoping to find a resource that tracks this sort of thing so I don't have to.

You could navigator.appVersion to find the versions and filter the relevant version using navigator.appName which can give you a version number you can compare against a minimum required version that you could set.
Using somthing like this (JSFiddel) you could break down the string and get the version.
var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName = navigator.appName;
var objfullVersion = '' + parseFloat(navigator.appVersion);
var objBrMajorVersion = parseInt(navigator.appVersion, 10);
var objOffsetName, objOffsetVersion, ix;
if ((objOffsetVersion = objAgent.indexOf("Chrome")) != -1) {
objbrowserName = "Chrome";
objfullVersion = objAgent.substring(objOffsetVersion + 7);
}
else if ((objOffsetVersion = objAgent.indexOf("MSIE")) != -1) {
objbrowserName = "Microsoft Internet Explorer";
objfullVersion = objAgent.substring(objOffsetVersion + 5);
} // In Firefox
else if ((objOffsetVersion = objAgent.indexOf("Firefox")) != -1) {
objbrowserName = "Firefox";
}
else if ((objOffsetVersion = objAgent.indexOf("Safari")) != -1) {
objbrowserName = "Safari";
objfullVersion = objAgent.substring(objOffsetVersion + 7);
if ((objOffsetVersion = objAgent.indexOf("Version")) != -1) objfullVersion = objAgent.substring(objOffsetVersion + 8);
} // For other browser "name/version" is at the end of userAgent
else if ((objOffsetName = objAgent.lastIndexOf(' ') + 1) < (objOffsetVersion = objAgent.lastIndexOf('/'))) {
objbrowserName = objAgent.substring(objOffsetName, objOffsetVersion);
objfullVersion = objAgent.substring(objOffsetVersion + 1);
if (objbrowserName.toLowerCase() == objbrowserName.toUpperCase()) {
objbrowserName = navigator.appName;
}
}
if ((ix = objfullVersion.indexOf(";")) != -1) objfullVersion = objfullVersion.substring(0, ix);
if ((ix = objfullVersion.indexOf(" ")) != -1) objfullVersion = objfullVersion.substring(0, ix);
objBrMajorVersion = parseInt('' + objfullVersion, 10);
if (isNaN(objBrMajorVersion)) {
objfullVersion = '' + parseFloat(navigator.appVersion);
objBrMajorVersion = parseInt(navigator.appVersion, 10);
}
Example code from here.
However it would probably be more beneficial to check for compatibility using the individual features that may lack support and inform the user of any incompatibility's and explain any ramifications.

Check what these guys did: Browser Update Initiative. You can integrate it easily and they offer code samples: http://browser-update.org/
It is going to be much harder to implement on your own and you will have to regularly update your browser version data.

One solution is to have a warning message in a div, and this div is hidden in a subsequent media query section. Only browsers supporting CSS 3 media queries will then auto hide this warning message div.

search page function for internet explorer

I need to put a search page function in the site that I'm working on. I found one online and it works great in Firefox and Chrome but not at all in IE. I think the fact that I didn't write this code is making it particularly hard to debug. Any help or guidance is appreciated!
HTML
<form id="f1" name="f1" action="javascript:void(0)" onsubmit="searchpage()" >
<input id="t1" type="text" name="t1" />
<input id="button" type="submit" value="FIND" name="b1" onclick="searchpage()" />
</form>
JAVASCRIPT
function searchpage() {
if (document.getElementById("t1").value != null && this.document.getElementById("t1").value != '') parent.findString(document.getElementById("t1").value);
return false;
}
var TRange = null;
function findString(str) {
if (parseInt(navigator.appVersion) < 4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound = self.find(str);
if (!strFound) {
strFound = self.find(str, 0, 1);
while (self.find(str, 0, 1)) continue;
}
}
else if (navigator.appName.indexOf("Microsoft") != -1) {
// EXPLORER-SPECIFIC CODE
if (TRange != null) {
TRange.collapse(false);
strFound = TRange.findText(str);
if (strFound) TRange.select();
}
if (TRange == null || strFound == 0) {
TRange = self.document.body.createTextRange();
strFound = TRange.findText(str);
if (strFound) TRange.select();
}
}
else if (navigator.appName == "Opera") {
alert("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert("String '" + str + "' not found!") return;
}​
it is also important to note that while this works in Firefox and Chrome, the "string not found!" alert box doesn't work

Here's a version dapted from another answer of mine.
Demo: http://jsfiddle.net/MRp2G/5/
Code:
function doSearch(text) {
var sel;
if (window.find && window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
sel.collapseToEnd();
}
window.find(text);
} else if (document.selection && document.body.createTextRange) {
sel = document.selection;
var textRange;
if (sel.type == "Text") {
textRange = sel.createRange();
textRange.collapse(false);
} else {
textRange = document.body.createTextRange();
textRange.collapse(true);
}
if (textRange.findText(text)) {
textRange.select();
}
}
}