Om Carvers Corner.se konstigt fel. Psykbryt?

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
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 »

Jag bråkade länge och väl med divarna på min hemsida innan de fogade sig.
De hoppade runt lite hur som helst när jag ändrade storlek på fönstret.
Gjorde allt i Notepad++, så det tog ju en liten stund. Men fördelen är att inget sker automatiskt och/eller ändras av sig självt som i något designprogram. :)

Förresten heter det mahogny på svenska. Mahogany är engelska. ;)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Ja, det är besvärligt med Divarna. Jag har försökt att få det som på bilden. Där textinput rad 1 och knappen för fontval rad 1 upptar en rad med varsin div och samma på rad 2 för text input 2. Sist kommer Skylten men den vill ju uppta en rad fast vid sidan om de 2 raderna för input. Vetesjutton hur man får till det.
blockindelning.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 »

Försök använda display: table-cell och sen en kombination av rowspan och colspan för att bygga upp divarna precis som en table.
Det kanske går bättre.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Gjorde ett enkelt test med att använda <br>. Det verkar funka på min dator när man minskar skärmbredden ner till minimum.
Steg två blir att försöka få in samma struktur i koden för sidan. Det är lätt att röra till det. :)

Kod: Markera allt

<div class="row">
            <div class="col-lg-5">
                Text rad 1 <input type="text"><button class="dropbtn">Font</button><button class="dropbtn1">Färg</button><br>
                <span class="slider1txt">Ändra textstorlek:</span><input class="slider1" type="range" min="10" max="100" id="slider1" onchange="changeSizeBySlider1()" value="1" /><br><br> 
                Text rad 2 <input type="text"><button class="dropbtn">Font</button>
                <button class="dropbtn1">Färg</button><br>
                <span class="slider1txt">Ändra textstorlek:</span><input class="slider1" type="range" min="10" max="100" id="slider1" onchange="changeSizeBySlider1()" value="1" />
            </div>

            <div class="col-lg-7">
               <img id="image4" class="skyltbox img-fluid" src="assets/img/noframe.jpg" width="570" alt="GFG image" />
            </div>
        </div>
Skärmklipp-1.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Om Carvers Corner.se

Inlägg av papabear »

Om bootstrap-klasserna funkar som de gör normalt så brukar man använda sm,md,lg,xl för att styra olika layout beroende på skärmstorlek.
Tex har du col-lg-5 som säger att den (kolumnen) är 5 av 12 enheter bred med en upplösning som klassas som large eller större.
Du kan ju också nestla row och col för att skapa layouten.
Jag har inte koll på var gränserna för resp storlek går, men det står säkert i dokumentationen nån stans.

edit: Och om jag minns rätt finns det även klasser för att dölja för större än, eller mindre än X, vilket man kan använda om man har helt annan markup för tex en mobilvy än för desktop.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Jag tror det går mot det bättre i min dator nu. Det går att minska ner till minimum i Chrome i alla fall. :) Det största problemet var att få knapparna att inte lägga sig över texten i rullgardinslistorna när man minskade bredden.
Skärmklipp-2.JPG
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 »

Ja, Font- (och Färg)val hoppar inte längre omkring när man ändrar fönsterstorlek.
Kvar att lösa är spcialfonterna som inte nödvändigtvis finns färdigt i webläsaren.
WR.png
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 »

Det är ett problem. Men jag tror jag löser det genom att presentera fonterna som går att välja och hur de ser ut på en lista som man öppnar i en modal. Den som skall köpa skylten behöver ju nödvändigtvis inte se den önskade fonten direkt på skylten.

Huvudsaken är ju att han kan se hur den ser ut. Det är ju jag som skall fräsa texten så jag ser ju vilken text som är vald i beställningen.

Att få till det med en automatisk installation av fonterna i användarens dator är definitivt en överkurs som jag inte vill lägga tid på tror jag. Fast nyfikenheten kanske tar över när sidan är klar för övrigt. Vem vet. :D

Kanske det går att länka fonten tillfälligt via servern utan att installera den. :humm:
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 »

Alla fonter är ju inte bra att fräsa.
Man bör kanske begränsa urvalet till exempel de som som finns hos Micro tech Text to Cnc pro.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

De fonter som jag valt har jag testat. De är fräsbara.
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 »

Ett bra knep för att komma rätt med gridindelningen är att lägga in alla 12 gridarna längst upp på sidan. Man ser då lätt vart man kan få plats med de olika komponenterna.

Ett fel som jag gjorde i början var att flytta en komponent med negativ positionsangivelse i CSS så att den hamnade in på föregående grid. Det gäller att hålla komponenterna inom sina områden.

Det går ju att med hjälp av CSS få komponenterna vart man vill, men ligger de i fel grid så skiter det sig när man förminskar skärmen, som alla kunde se i på min sida i början av mina äventyr. :D

Se Exempel
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nya problem som gör mig yr i mössan. Jag har en rutin som skriver ut x och y coordinaterna när man flyttar texten på skylten. Den fungerar utmärkt, men jag vill ändra y-värdet så att det blir positivt och noll i skyltens övre hörn. Rutinen ser ut så här:

Kod: Markera allt

function move(e) {
            if (!e) e = window.event;
            if (dragok) {
                d.style.left = dx + e.clientX - x + "px";
                d.style.top = dy + e.clientY - y + "px";

                var y1 = dy + e.clientY - y;
                var myoffset = 280;
                var y2 = "Rad 1 y = " + y1 + myoffset;
                document.getElementById("ytext1").innerHTML = y2 + " px";
                
                return false;
            }
        }
Vad jag försöker göra är att lägga till myoffset (280) till y2 men utskriften blir i stället
"Rad 1 y = -198280 px"

290 adderas inte utan skris ut efter -198. Där skulle det stå -18 om det funkade som jag vill. Har jag blivit tokig eller är det något viktigt i javascript jag missat? Jag har även testa med
var myoffset = parseInt("280"); med samma resultat.
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 »

Jag får en error i chrome när jag kollar på sitt script.

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
och den pekar på raden
document.getElementById("ytext1").innerHTML = y2 + " px";

:humm:

Du kanske inte har någon ytext1 utskriven på versionen jag kan se.

Kolla på det här exemplet
https://developer.mozilla.org/en-US/doc ... nt/clientX
och rör runt med musen i rutan en bit ner.

Skriv ut varje variabel för sig (dx, x, dy, y, e.clientx och e.clienty ) för att se var knaset kommer från. )
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nej den version jag jobbar med nu är denna Men det problemet löste sig på ett annat vis. Av någon konstig anledning så funkade det så här i stället. Lite underligt kan tyckas att det inte går att plussa på 280 på y2 men ok på y1

Kod: Markera allt

		var y1 = dy + e.clientY - y;
                y1 = y1 + 280;
                var y2 = "Rad 1 y = " + y1;
                document.getElementById("ytext1").innerHTML = y2 + " px";
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 »

Undrar vad du gjort med texten, för muspilen är förflyttningspilar på en bredd av minst 10 gånger så bred som texten, åt höger.
Så om jag placerar texten 5cm till vänster utanför skylten, kan jag fortfarande ta tag i texten som på en osynlig pinne på höger sida om skylten. :D
Skriv svar