Sida 1 av 9
Om Carvers Corner.se konstigt fel. Psykbryt?
Postat: 4 mars 2022, 15:41:21
av SeniorLemuren
Som flera säkert redan har sett så har jag slängt ut lite hjälpförfrågningar om Javascript i samband med uppbyggnaden av
Carvers Corner.se
'Carvers Corner.se är en site som jag vill bygga för att presentera och sälja lite olika produkter som jag tillverkar rent hobbymässigt.
Jag har startat bygget med att ladda hem Business Casual v7.0.3 som är gjort i Bootstrap och börjat ändra om det så att det passar mig. Allt har flutit på utan större problem fram till nu. Förutom att Business Casual inte använde Bootstraps CSS utan hade en helt egen. Detta medförde att en del Bootstrapfunktioner inte fungerade.
Jag testade att lägga in även Bootstraps CSS men då förstördes en del formateringar som var gjorda i Casuals CSS. Lösningen fick bli att jag kopierade just det avsnitt i Bootstraps CSS jag behövde och lade i en egen CSS-fil. Det var just formateringen av rullgardinslistan som inte fungerade utan Bootstraps CSS.
Ok. Nog om detta. Anledningen till att jag skriver detta är att jag vill veta om det överhuvudtaget finns något intresse av att jag berättar lite och även ställer lite frågor i denna tråd. Den kan ju fungera som bollplank och ge andra lite insikt i alla problem som uppstår vid ett hemmsidebygge. Det kommer ju att inbegripa HTML, Javascript och PHP så det kan bli en salig röra.
Jag är nu framme vid den sida där användaren skall definiera hur den skyllt han vill köpa skall se ut. Det återstår en hel del arbete med den ännu. Sista sidan blir den sida där man hanterar Leverans och betalning och den har jag inte en aning om hur jag skall designa ännu.
Så frågan är: Finns det något intresse för detta eller skall jag bara helt enkelt göra som tidigare att bara slänga ut lite frågor när jag kör huvudet i väggen och dessemellan bara jobba på i det tysta .
Re: Om Carvers Corner.se
Postat: 7 mars 2022, 12:37:42
av JimmyAndersson
Jag tycker definitivt att du ska fortsätta skriva, och även be om hjälp.
Responsen kanske inte kommer direkt, det är ju lite allmänt lågvatten här nu.. Men det vore ändå intressant att följa detta.
När det gäller det du skrev här:
viewtopic.php?p=1663961#p1663961
Så känner jag igen mig väldigt mycket.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 00:20:22
av SeniorLemuren
Så där. Nu har jag kommit en liten bit på skyltdesigndelen. Återstår att komma på hur jag skall flytta texten, välja font, välja fontens färg. Sedan tillkommer val av grafik. Det jag inte har koll på än är hur sidan ser ut med annan upplösning än den jag har på min dator (1280 x 1024)
Testa gärna sidan och kom med åsikter.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 02:07:19
av Henry
Sidan ser ut så här för mig på 1920x1080.
skylt.jpg
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 02:19:30
av JimmyAndersson
Vilken webbläsare använde du?
Jag testade med senaste Firefox i Windows 10 och samma upplösning som du. Här fungerar det precis som det ska.
I mobilen (iPhone med Safari) så ser jag inte skylten och när man klickar på t.ex "Välj skyltens träslag" så hamnar alternativen underst, så de skyms av "Välj.."-knapparna.
Just det här med skärmstorlekar/upplösning är knepigt.
Förr kunde man ju gå efter hur det såg ut på ens egen datorskärm, och så kunde man vara (hyfsat) säker på att det såg likadant ut hos varenda kotte.
Men nu har man en liten skärm i mobilen, en lite större i läsplattan och (ofta) en väldigt stor till datorn.
Så det som ser rätt ut på datorn blir mikroskopiskt i mobilen. Både när det gäller storlek på text/grafik, men även placering av saker.
Vet inte riktigt hur man ska tänka där...
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 04:20:16
av Henry
Chrome W10, testade genom nämnd anledning nu även Firefox men märkligt nog samma även där.
Allt uppdaterat till senaste versionerna.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 06:54:06
av rvl
Chrome, med samma skylt i fullskärm och i ett mindre fönster.
fullskärm.png
mindreFönster.png
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 06:56:17
av MadModder
Testade på mobilen i safari.
Alla dropdown-menyer hamnar bakom de
svarta mörkbruna knapparna.
För varje val jag gör nollställs alla andra fält.
Stående syns inte skylten alls.
Liggande ser det ut såhär
B6DAFBE5-2E1C-4921-ACE8-2CA69914D30E.png
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 07:18:03
av rvl
Skriver jag ett enda tecken på skylten, oberoende av font- och fönsterstorlek, så får hela sidan horisontalscrollbar, men utan text klarar den sig utan.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 08:01:31
av SeniorLemuren
Tackar för all input. Ja, att få detta rätt till alla olika användare blir inte lätt. Det första jag konstaterar är nog att begränsa sidan till endast laptop och desktop. Att försöka anpassa till mindre skärmar får nog bli en framtidsfråga.
Det som förvånar mig lite är att Jimmy och Henry får olika resultat med samma förutsättningar.
Beroende på val av storlek på skylt och vald font så hoppar texten lite hit och dit men det är ju meningen att man skall positionera texten själv dit man vill ha den, så just det problemet ser jag inte som så stort. Flytta text-rutinen jobbar jag med nu.
Så här skall sidan se ut just nu :
carversida.JPG
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 08:07:19
av MadModder
Det ställer till det när sidan mobilanpassas.
Om du inte stänger av den funktionen borde trätavlan förminskas och placeras under alla reglage istället för till höger när mobil används.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 10:00:40
av rvl
Nuvarande på min laptop
Screenshot 2022-03-09 105915.png
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 10:42:57
av Lennart Aspenryd
Jag tycker att dina frågor har ett stort berättigande. Du skall fortsätta att fundera, mixtra och kommunicera.
Det är gubbar som dig, som vill ta hand om sig själva, som kommer att föra detta framåt.
Så backa inte snälla Senioren!
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 12:44:18
av Henry
Att jag och Jimmy får olika förvånar mig med.
Så här ser det ut för mig nu med tex max storlek på texten i både Chrome och Firefox. Men om man senare kan interagera och justera texten exakt som man själv vill ha den så ja då spelar det ju förstås ingen större roll med textdelen. Får sedan nämnas att detta testas på min stationära dator.
Re: Om Carvers Corner.se
Postat: 9 mars 2022, 13:07:10
av SeniorLemuren
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;
}
}
});