Nu kan jag flytta texten med pilarna och siffertangenterna, åtminstone i min dator är väl bäst att tillägga
. Jag Kör chrome.
Jag testade med att göra skylten "responsive" och då lade den sig fint nederst när jag minskade skärmbredden, men då uppstår ytterligare problem med texten. Den lägger sig alltid utanför skylten och flyttar skylten nedåt när man förstorar texten. Får nog ta en kurs i Bootstrap.
Ett annat problem som jag inte lyckats lösa är att om man justerat storleken med slidern och den har focus så slidar den när man klickar på piltangenterna vänster resp höger för att flytta texten. Det är därför man måste klicka på skylten, för att flytta focus från slidern. Jag har försökt att sätta fokus på skylten i javascriptet men det funkar inte (se rad 1 i javascriptet). "image1" är id för den kantiga skylten.
Det där med att man väljer vilken text man vill flytta med siffran noll eller ett hade jag i stället önskat göra med två knappar och använda onClick för att skicka en variabel till en funktion i javascriptet. Problemet var att jag inte fick tag i variabeln utanför funktionen för att använda i flyttrutinen. Läste om globala parametrar och blev inte klok på hur man får tag i en variabel inne i en funktion för att använda utanför funktionen i samma script.
Jag löste det i stället med att använda "window.addEventListener('keyup', (e) => {" Där jag kollar om det är siffran noll eller ett som tryckt in. Anledningen till att jag inte kan använda siffrorna ett och två, som ju är mer naturligt är ju att siffran 2 använder jag för text ner. Det går helt säkert att göra "flyttrutinen" mycket enklare med mindre och smartare kod, men detta var det sätt jag klarade av att få önskad funktion med (nästan)
Länk till sidan.
Kod: Markera allt
document.getElementById("image1").focus();
let mytext1 = document.querySelector('.mytext1');
let mytext2 = document.querySelector('.mytext2');
let moveBy = 1;
window.addEventListener('load', () => {
mytext1.style.position = 'absolute';
mytext1.style.left = 650 + 'px';
mytext1.style.top = 350 + 'px';
mytext2.style.position = 'absolute';
mytext2.style.left = 650 + 'px';
mytext2.style.top = 370 + 'px';
});
window.addEventListener('keyup', (e) => {
if (e.key == 0 || e.key == 1) { radnr = e.key };
if (radnr == 0) {
switch (e.key) {
case 'ArrowLeft':
mytext1.style.left = parseInt(mytext1.style.left) - moveBy + 'px';
break;
case 'ArrowRight':
mytext1.style.left = parseInt(mytext1.style.left) + moveBy + 'px';
break;
case 'ArrowUp':
mytext1.style.top = parseInt(mytext1.style.top) - moveBy + 'px';
break;
case 'ArrowDown':
mytext1.style.top = parseInt(mytext1.style.top) + moveBy + 'px';
break;
case '4':
mytext1.style.left = parseInt(mytext1.style.left) - moveBy * 10 + 'px';
break;
case '6':
mytext1.style.left = parseInt(mytext1.style.left) + moveBy * 10 + 'px';
break;
case '8':
mytext1.style.top = parseInt(mytext1.style.top) - moveBy * 10 + 'px';
break;
case '2':
mytext1.style.top = parseInt(mytext1.style.top) + moveBy * 10 + 'px';
break;
}
}
if (radnr == 1) {
switch (e.key) {
case 'ArrowLeft':
mytext2.style.left = parseInt(mytext2.style.left) - moveBy + 'px';
break;
case 'ArrowRight':
mytext2.style.left = parseInt(mytext2.style.left) + moveBy + 'px';
break;
case 'ArrowUp':
mytext2.style.top = parseInt(mytext2.style.top) - moveBy + 'px';
break;
case 'ArrowDown':
mytext2.style.top = parseInt(mytext2.style.top) + moveBy + 'px';
break;
case '4':
mytext2.style.left = parseInt(mytext2.style.left) - moveBy * 10 + 'px';
break;
case '6':
mytext2.style.left = parseInt(mytext2.style.left) + moveBy * 10 + 'px';
break;
case '8':
mytext2.style.top = parseInt(mytext2.style.top) - moveBy * 10 + 'px';
break;
case '2':
mytext2.style.top = parseInt(mytext2.style.top) + moveBy * 10 + 'px';
break;
}
}
});
