Unable to click html button on iPhone - javascript

I'm trying to click a button on an iPhone screen. It works fine on my computer. On the iPhone, the button highlights like the safari browser is trying to select it.
<html>
<head>
</head>
<link rel="stylesheet" href="style.css">
<body id="body" overflow="hidden" bgcolor="black" text="white">
<center>
<div class="content">
<div class="buttons">
<div class="button button1" id="button1"></div>
<div class="button button2" id="button2"></div>
</div>
</center>
</body>
<script src="engine-portal.js"></script>
<script src="socket.io.js"></script>
<script src="controller.js"></script>
<script src="controller-link.js"></script>
</html>
<style type='text/css'>
canvas {
/*border: 1px solid #aaa;*/
cursor: none;
}
</style>
<script>
</script>
'use strict';
class Controller extends Portal {
setup() {
}
connectToServer() {
this.io = io();
this.io.portal = this;
console.log("test");
this.io.emit('join', {});
}
installCanvas() {
}
installInput() {
var b1 = document.getElementById('button1');
b1.addEventListener("mousedown", this.b1down);
b1.addEventListener("mouseup", this.b1up);
b1.controller = this;
var b2 = document.getElementById('button2');
b2.addEventListener("mousedown", this.b2down);
b2.addEventListener("mouseup", this.b2up);
b2.controller = this;
}
b1down(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b1Press();
}
b2down(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b2Press();
}
b1up(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b1Release();
}
b2up(event) {
var target = event.srcElement || event.currentTarget || event.target;
target.controller.b2Release();
}
b1Press() {
this.moveInput = -1;
}
b2Press() {
this.moveInput = 1;
}
b1Release() {
this.moveInput = 0;
}
b2Release() {
this.moveInput = 0;
}
parseInput(key_pressed_map, key_up_map, key_pressing_map, key_depressing_map) {
if (this.moveInput == 1) {
this.io.emit('input', 'down');
} else if (this.moveInput == -1) {
this.io.emit('input', 'up');
}
}
}

Related

Angular bind class of element to element focus

In my following angular application, I have multiple rows of myelement (angular directive wrapper over input tag). At a time I need to focus/select/highlight one of it, .selected class in the styles does that.
In following application, everything works fine except focus to the input tag, which needs to be bounded by the css class selected. I.E. whatever element has class selected the corresponding input tag should be focused . How can I acieve that ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.container {
display: flex;
flex-direction: column;
width: 600px;
}
.notebook {
display: flex;
justify-content: center;
}
.cell {
margin: 5px;
padding: 5px;
}
.selected {
border-style: solid;
border-color: green;
border-width: 1px;
border-left-width: 5px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl" class="notebook">
<div class="container">
<myelement ng-repeat="i in listctrl.list"
ng-click="listctrl.selected = $index"
ng-class="{selected : listctrl.selected === $index}"
class="cell"></myelement>
</div>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = [];
listctrl.selected = 0;
listctrl.addCell = function() {
var x = listctrl.list.length;
listctrl.list.push(x);
listctrl.selected = listctrl.list.length - 1;
}
listctrl.addCell();
$scope.$on('add', function (event, message) {
$scope.$apply(listctrl.addCell);
});
$scope.$on('keyUp', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected - 1;
});
});
$scope.$on('keyDown', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected + 1;
});
});
})
.directive('myelement', function($rootScope){
return {
template: '<input style="width: 95%"></input>',
restrict: 'E',
link: function (scope, element, attrs) {
var inputTag = element[0].children[0];
inputTag.focus();
element.on('keydown', function(event) {
if (event.keyCode === 13 && event.shiftKey) {
$rootScope.$broadcast('add');
} else if (event.keyCode === 38) {
$rootScope.$broadcast('keyUp');
} else if (event.keyCode === 40) {
$rootScope.$broadcast('keyDown');
}
});
},
controller: function ($scope) {
}
};
})
</script>
</body>
</html>
Consider the following example. It uses the now recommended component feature of AngularJS (since v1.5). The example is very simple so you can easily understand what is happening and how to apply it in your project.
JavaScript
class MainController {
constructor() {
this.focused = true;
}
}
class MyElementController {
constructor($element) {
this.$element = $element;
}
$onChanges(changes) {
if (changes.focused.currentValue === true) {
this.$element[0].getElementsByTagName('input')[0].focus();
}
}
}
const myElementComponent = {
bindings: {
focused: '<'
},
controller: MyElementController,
template: `<input type="text">`
};
angular
.module('app', [])
.controller('MainController', MainController)
.component('myElement', myElementComponent);
HTML
<body ng-app="app" ng-controller="MainController as vm">
<my-element focused="vm.focused"></my-element>
</body>
var elementComponent = {
bindings:{
selected:'<'
},
controller:function($element){
this.$onChanges = function(changes) {
if(changes.selected.currentValue){
$element[0].getElementsByClassName('textName')[0].focus()
}
}
},
template:'<input type="text" class="textName" style="margin:4px">'
};
var controller = function(){
this.list = [1];
this.selected = 1
this.add = function(){
var length = this.list.length ;
this.list.push(length + 1);
this.selected = length + 1;
}
};
angular.module('app', [])
.component('element', elementComponent)
.controller('appCtrl', controller);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body ng-app="app" ng-controller="appCtrl as vm" >
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<button ng-click="vm.add()">Add New Cell</button>
<div ng-repeat="item in vm.list" >
<element selected="item == vm.selected" ng-click="vm.selected = item"></element>
</div>
Selected Element : {{vm.selected}}
</body>
</html>
This might fill your requirement.
on every key up/done, check the class, and use focus(), blur() to change input states. in case of tab press, preventDefault()
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = ['1','2','3'];
listctrl.selected = 0;
listctrl.addCell = function() {
var x = listctrl.list.length;
listctrl.list.push(x);
listctrl.selected = listctrl.list.length - 1;
}
listctrl.addCell();
$scope.$on('add', function (event, message) {
$scope.$apply(listctrl.addCell);
});
$scope.$on('keyUp', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected - 1;
});
});
$scope.$on('keyDown', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected + 1;
});
});
})
.directive('myelement', function($rootScope){
return {
template: '<input style="width: 95%"></input>',
restrict: 'E',
scope: {},
link: function (scope, element, attrs) {
var inputTag = element[0].children[0];
var updateFocues = function(element) {
if(element[0].className.indexOf('selected') !== -1) {
scope.$apply(function() {
inputTag.focus()
});
} else {
scope.$apply(function() {
inputTag.blur()
});
}
}
element.on('keydown', function(event) {
if (event.keyCode === 13 && event.shiftKey) {
$rootScope.$broadcast('add');
} else if (event.keyCode === 38) {
$rootScope.$broadcast('keyUp');
} else if (event.keyCode === 40) {
$rootScope.$broadcast('keyDown');
}else if (event.keyCode === 9) {
event.preventDefault();
}
});
scope.$on('keyUp', function() {
updateFocues(element)
})
scope.$on('keyDown', function() {
updateFocues(element)
})
},
controller: function ($scope) {
}
};
})
.container {
display: flex;
flex-direction: column;
width: 600px;
}
.notebook {
display: flex;
justify-content: center;
}
.cell {
margin: 5px;
padding: 5px;
}
.selected {
border-style: solid;
border-color: green;
border-width: 1px;
border-left-width: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl" class="notebook">
<div class="container">
<myelement ng-repeat="i in listctrl.list"
ng-click="listctrl.selected = $index"
ng-class="{selected : listctrl.selected === $index}"
class="cell"></myelement>
</div>
</div>
</body>
</html>
Suggest you use css instead (most likely it will fit your needs). Adding extra JS code to support simple behaviours is not a good practice.
:focus selector explained on W3C
E.g.
myelement input:focus {
border-style: solid;
border-color: green;
border-width: 1px;
border-left-width: 5px;
}

Saving a toggled class Div (with local storage)

So I have an example of a basic classtoggle with a div but can I make it so the "active class" can stay switched with a refresh/re-open. Could this be done?
function myfunc(div) {
var className = div.getAttribute("class");
if(className=="normal") {
div.className = "active";
}
else{
div.className = "normal";
}
}
.normal /*Default*/
{width:25%; height:25%; background: #ffeb00;}
.active /*Switch*/
{width:25%; height:25%; background: #ff00e2;}
<html>
<head>
<title>Test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div id="div" class="normal" onclick="myfunc(this)"></div>
<script src=".jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Thank You for all future Answers.
Use the localStorage to hold the last class
try jsfiddle
$("#div").addClass(localStorage.getItem('ClassName')) ;
$("#div").on("click",function(){
if($(this).hasClass('active')){
$(this).removeClass("active").addClass("normal");
localStorage.setItem('ClassName', 'normal');
}
else{
$(this).removeClass("normal").addClass("active");
localStorage.setItem('ClassName', 'active');
}
});
Something similar to this, haven't tested but this will get you on the right track (note that snippet cannot run on stack overflow due to being sandboxed)
function localStorageExists() {
if (typeof(Storage) !== "undefined") {
return true;
}
return false;
}
if (localStorageExists()) {
myfunc(document.getElementById('div'));
}
function myfunc(div) {
var className = div.getAttribute("class");
if (className == "normal" || (localStorageExists() && localStorage.getItem('someKey') == 'active')) {
div.className = "active";
localStorage.setItem('someKey', 'active');
} else if (className == "active" || (localStorageExists() && localStorage.getItem('someKey') == 'normal')) {
div.className = "normal";
localStorage.setItem('someKey', 'normal');
}
}
.normal
/*Default*/
{
width: 25%;
height: 25%;
background: #ffeb00;
}
.active
/*Switch*/
{
width: 25%;
height: 25%;
background: #ff00e2;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="div" class="normal" onclick="myfunc(this)"></div>
<script src=".jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

how to find height of div that is generated by javascript

i have this file in which i want to find height of DIV with id "cpDocument" with the help of jquery. This DIV can be seen inside documen.body.innerHTML in line number 46.
index_scorm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>
<script src="../../jquery.min.js"></script>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script>
var deviceReady = false;
var initCalled = false ;
var initialized = false;
function onBodyLoad()
{
if(typeof window.device === 'undefined')
{
document.addEventListener("deviceready", onDeviceReady, false);
}
else
{
onDeviceReady();
}
}
function onDeviceReady()
{
deviceReady = true ;
if(initCalled === true)
initializeCP();
}
function initializeCP()
{
if(initialized)
return;
initCalled = true ;
if(cp.pg && deviceReady === false)
return;
function cpInit()
{
document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'> <div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' > <div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> <canvas id='slide_transition_canvas'></canvas> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> </div> <div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'> </div> <div id='playbar' style='bottom:0px; position:fixed'> </div> <div id='cc' style='left:0px; position:fixed;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> <div id='gestureIcon' class='gestureIcon'> </div> <div id='gestureHint' class='gestureHintDiv'> <div id='gImage' class='gesturesHint'></div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div>";
cp.DoCPInit();
var lCpExit = window["DoCPExit"];
window["DoCPExit"] = function()
{
if(cp.UnloadActivties)
cp.UnloadActivties();
lCpExit();
};
}
cpInit();
initialized = true;
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='initialLoading'></div>
<script>
(function()
{
if(document.documentMode < 9)
{
document.body.innerHTML = "";
document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");
return;
}
window.addEventListener("load",function()
{
setTimeout(function()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'assets/js/CPXHRLoader.js';
script.defer = 'defer';
script.onload = function()
{
var lCSSLoaded = false;
var lJSLoaded = false;
function constructDIVs()
{
if(lCSSLoaded && lJSLoaded)
{
initializeCP();
}
}
cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
lCSSLoaded = true;
constructDIVs();
});
var lJSFiles = [ 'assets/js/jquery-1.6.1.min.js','scormdriver.js','assets/js/CPM.js' ];
cpXHRJSLoader.js(lJSFiles,function()
{
//console.log("js loaded");
lJSLoaded = true;
constructDIVs();
});
}
document.getElementsByTagName('head')[0].appendChild(script);
},1);
},false);
})();
</script>
<noscript style="text-align:center;font-size:24px;">Enable Javascript support in the browser.</noscript>
</body>
</html>
Iam trying to do something like this with no luck:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("body").on('load', function() {
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
});
});
</script>
The script for finding the height of the element can be the last list of initializeCP() function eg.
cpInit();
initialized = true;
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);

How do I get JavaScript to interact with Jquery?

Hi I am doing a project in computing for school. I need to get my drag able jQuery box to interact with my traffic lights( my traffic lights are on a cycle) when the box touches i need to traffic light cycle to start, is this possible? any help would be much appreciated,
Here is my code so far;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightscentre = 0
var timer
function ChangeImage() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function LightCycle() {
clearTimeout(timer)
if (++lightscentre == lights.length)
lightscentre = 0
document.images[0].src = lights[lightscentre]
timer = setTimeout(LightCycle, 1000)
}
function stopCycle() {
clearTimeout(timer)
}
</script>
</head>
<body>
<img src="red.png" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="ChangeImage()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>
You can use drag event:
function init() {
var $light = $('img');
var $draggable = $('#makeMeDraggable').draggable({
drag: function( event, ui ) {
var light_offset = $light.offset();
if (ui.offset.left < light_offset.left+$light.width() &&
ui.offset.left + $draggable.width() > light_offset.left &&
ui.offset.top + $draggable.height() > light_offset.top &&
ui.offset.top < light_offset.top+$light.height()) {
if (!timer) {
LightCycle();
}
} else {
clearTimeout(timer);
timer = null;
}
}
});
}
JSFIDDLE
Either you could do the function in Jquery, for the animation(?) or what you were planning. Else, you can convert Jquery variables in JS to use them in your functions. The best way would be to take any GET/POST and do those in Jquery and do everything else in JS, or the data fetching part.
Also, good luck with your project. Feel free to hit me up at #ev1stensberg ( twitter) and chat.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights = ["red.png", "yellow.png", "green.png"]
var lightsCentre = 0;
var timer = setInterval(function {
window.location.reload()
}, 3000);
var turnOnTheLights = function(e) {
e.preventDefaults();
switch(lights) {
case (document.getElementbyId('redLights').onClick == true) :
return lights[0]
setTimeout(function() {
console.log("hello"),
}, 3000);
case(document.getElementbyId('redLights').onClick == true &&
return lights[0] == true) :
return lights[1].
setTimeout(function() {
console.log("I'm a terrible programmer");
}, 3000)
case(document.getElementbyId('redLights').onClick == true &&
return lights[1] == true) :
return clearInterval(timer)
break;
default: window.location.reload();
}
return lights;
}
var turnOffTheLights = function(e) {
e.preventDefaults();
return window.setTimeout(function() {
console.log("Heyho"), 3000
});
}
</script>
</head>
<body>
<img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123">
<form>
<input type="button" value="Go" name="Go" onclick="turnOnTheLights()">
<input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()">
</form>
<head>
<style>
#makeMeDraggable { width: 100px; height: 100px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
</div>
</body>
</html>

Javascript will not execute

Why will this work on for example, http://codepen.io/ but not when I try it on my webserver? Using wamp. This is how it should be: http://codepen.io/anon/pen/Ctsvp
<!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>
<style type="text/css">
#text {
width: 540px;
height: 50px;
overflow: hidden;
}
#submit {
display: none;
}
</style>
<script>
var textInput = document.getElementById('text')
, submitButton = document.getElementById('submit');
function checkTextValue() {
if (textInput.value !== '') {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
}
</script>
</head>
<body>
<form action="#" method="post">
<textarea onkeypress="checkTextValue()" onkeyup="checkTextValue()" onchange="checkTextValue()" id="text"></textarea>
<input id="submit" type="submit" value="Submit">
</form>
</body>
</html>
You should wait for the DOM to be ready, so change your code to:
<script>
document.addEventListener('DOMContentLoaded', function() {
var textInput = document.getElementById('text')
, submitButton = document.getElementById('submit');
function checkTextValue() {
if (textInput.value !== '') {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
}
});
</script>

Categories

Resources