Om Carvers Corner.se konstigt fel. Psykbryt?

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Om Carvers Corner.se konstigt fel. Psykbryt?

Inlägg 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 . :)
Senast redigerad av SeniorLemuren 24 maj 2022, 10:50:35, redigerad totalt 8 gånger.
Användarvisningsbild
JimmyAndersson
Inlägg: 26308
Blev medlem: 6 augusti 2005, 21:23:33
Ort: Oskarshamn (En bit utanför)
Kontakt:

Re: Om Carvers Corner.se

Inlägg 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.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg 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.
Användarvisningsbild
Henry
Inlägg: 23588
Blev medlem: 20 april 2005, 02:52:47
Ort: Lund

Re: Om Carvers Corner.se

Inlägg av Henry »

Sidan ser ut så här för mig på 1920x1080.
skylt.jpg
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
JimmyAndersson
Inlägg: 26308
Blev medlem: 6 augusti 2005, 21:23:33
Ort: Oskarshamn (En bit utanför)
Kontakt:

Re: Om Carvers Corner.se

Inlägg 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...
Användarvisningsbild
Henry
Inlägg: 23588
Blev medlem: 20 april 2005, 02:52:47
Ort: Lund

Re: Om Carvers Corner.se

Inlägg 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.
Användarvisningsbild
rvl
Inlägg: 5720
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

Re: Om Carvers Corner.se

Inlägg av rvl »

Chrome, med samma skylt i fullskärm och i ett mindre fönster.
fullskärm.png
mindreFönster.png
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se

Inlägg 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
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
rvl
Inlägg: 5720
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

Re: Om Carvers Corner.se

Inlägg 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.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg 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
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
MadModder
Co Admin
Inlägg: 29905
Blev medlem: 6 september 2003, 13:32:07
Ort: MadLand (Enköping)
Kontakt:

Re: Om Carvers Corner.se

Inlägg 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.
Användarvisningsbild
rvl
Inlägg: 5720
Blev medlem: 5 april 2016, 14:58:53
Ort: Helsingfors

Re: Om Carvers Corner.se

Inlägg av rvl »

Nuvarande på min laptop
Screenshot 2022-03-09 105915.png
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
Lennart Aspenryd
Tidigare Lasp
Inlägg: 12607
Blev medlem: 1 juli 2011, 19:09:09
Ort: Helsingborg

Re: Om Carvers Corner.se

Inlägg 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!
Användarvisningsbild
Henry
Inlägg: 23588
Blev medlem: 20 april 2005, 02:52:47
Ort: Lund

Re: Om Carvers Corner.se

Inlägg 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.
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg 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;
        }
    }
});
Skriv svar