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

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Haha, ett enkelt width 100px i CSS löste det problemet. :)
Mr Andersson
Inlägg: 1394
Blev medlem: 29 januari 2011, 21:06:30
Ort: Lapplandet

Re: Om Carvers Corner.se

Inlägg av Mr Andersson »

SeniorLemuren skrev: 17 mars 2022, 15:58:17 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.
Addition sker från vänster till höger.
"Rad 1 y = " + -198 blir "Rad 1 y = -198" (sträng + nummer = sträng)
"Rad 1 y = -198" + 280 blir "Rad 1 y = -198280" (sträng + nummer = sträng)
Använd parentes om du vill göra offset-uträkningen före strängkonverteringen.

Nu hade du ju redan löst det på annat sätt men jag tänkte det kanske var intressant att veta varför det blev som det blev. :)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nu är det dags igen. Jag skriver ju ut coordinater på den rad jag flyttar. Problemet är att jag har 2 textrader och behöver få tag i radernas id i scriptet som flyttar och skriver ut coordinaterna.

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";
                
                //  här skriver jag ut coord. för rad 1
		if .......id rad 1
                document.getElementById("xtext1").innerHTML = 'Text 1 X =' + e.clientX + " px";
                document.getElementById("ytext1").innerHTML = 'Text 1 Y =' + e.clientY + " px";
                
                /*Här skriver jag ut coord. för rad 2. Men eftersom det inte finns någon if för rad 
                1 och 2 så skrivs coord. över så de blir ju alltid samma värde.
                För att sätta if så behöver jag få tag på id för texrad 1 och textrad 2 */
		if........id rad 2
                document.getElementById("xtext2").innerHTML = 'Text 2 X =' + e.clientX + " px";
                document.getElementById("ytext2").innerHTML = 'Text 2 Y =' + e.clientY + " px";


                return false;
            }
Jag har försökt få ett grepp på hur man gör men fattar inte mycket av detta. Koden visar vad som händer när man trycker ned musknappen för att flytta det textfält man skall flytta.
Här kollar man className för textraderna.

Kod: Markera allt

 function down(e) {
            if (!e) e = window.event;
            var temp = (typeof e.target != "undefined") ? e.target : e.srcElement;
            if (temp.tagName != "HTML" | "BODY" && temp.className != "dragclass") {
                temp = (typeof temp.parentNode != "undefined") ? temp.parentNode : temp.parentElement;
            }
            if (temp.className == "dragclass") {
                dragok = true;
                temp.style.zIndex = n++;
                d = temp;
                dx = parseInt(temp.style.left + 50);
                dy = parseInt(temp.style.top + 50);
                x = e.clientX;
                y = e.clientY;
                document.onmousemove = move;
                return false;
            }
        }
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 »

blablablabla.target.id innehåller ID för det element som eventhandlern pysslar med just nu.

Kod: Markera allt

<div id="text1">
Textrad 1
</div>
<br>
<div id="text2">
Textrad 2
</div>
<br>
<div id="resultat">
</div>

<script>
function visa(e){
var objekt = e.target.id;
  document.getElementById("resultat").innerHTML = "Du är nu ovanför: " + objekt;
}

document.onmouseover = visa;
</script>
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Tackar. Jag fick det att fungera. Det var e.target.id jag sökte.

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";
                if (e.target.id == "textrad1") {
                    document.getElementById("xtext1").innerHTML = 'Text 1 X =' + e.clientX + " px";
                    document.getElementById("ytext1").innerHTML = 'Text 1 Y =' + e.clientY + " px";
                }
                if (e.target.id == "textrad2") {
                    document.getElementById("xtext2").innerHTML = 'Text 2 X =' + e.clientX + " px";
                    document.getElementById("ytext2").innerHTML = 'Text 2 Y =' + e.clientY + " px";
                }
                return false;
            }
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 »

Eftersom du har en fast bredd på divarna så radbryts texten om man skriver längre än så.
Prova och sätt width: min-content; på textdivarna.

[edit]
Nej det blir fel. Då radbryts det vid alla mellanslag istället... :doh:

Ta bort width helt för de två divarna, och kör display: inline-block; istället.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Tack o bock!
display: inline-block; 
var rätt medicin.

Hur får du texten att bli grön och i en ruta i ditt inlägg? Det blir ju väldigt tydligt.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nu körvar det sig igen. Jag hittade hur man skall göra för att använda en font som man sparar på servern.
Man laddar upp fonten till servern i en lämplig mapp.
Sedan skriver man en liten snutt i CSS och sedan skall det funka.

Jag har fått det att funka med en font. ROLIG men ingen annan font vill dyka upp.
Så här ser det ut just nu.

Kod: Markera allt

@font-face {
        font-family: "banditos";
        src: url("http://hahnes.se/carverscorner/fonter/banditos/Bandito Personal Use.ttf") format("truetype");
        font-family: "roligast";
        src: url("http://hahnes.se/carverscorner/fonter/roliga/roliga.ttf") format("truetype");
    }
Båda raderna är lika sånär som på fontnamnen och url. Båda urlerna är testade och fungerar.
roligast fungerar

Kod: Markera allt

.myfont {
        font-family: "roligast";
        font-weight: normal;
        font-style: normal;
    }
banditos fungerar inte. Jag har även testa flera andra utan framgång. Jag har testa med att döpa om fontfilerna så de inte innehåller varken versaler eller mellanslag men det hjälper inte heller.

Kod: Markera allt

.myfont1 {
        font-family: "banditos";
        font-weight: normal;
        font-style: normal;
    }
Om man kopierar url en så kan man ladda ner fontfilerna och kolla i dem. Jag kan inte se att något är fel med dem.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Ok. Klockan 2 i natt kom jag på att man måste skapa @font-face för varje font-family Nu funkar det. Skall bara lägga in alla icke windows fonter nu. Faan vad trögtänkt man blivit på gamla dar. :rofl

Kod: Markera allt

 @font-face {
        font-family: 'Roboto Mono';
        src: local(''), url('http://hahnes.se/carverscorner/fonter/roboto-mono-v13-latin/roboto-mono-v13-latin-regular.woff') format('woff');
    }    
    @font-face {
        font-family: "eastwood";
        src: local(''), url("http://hahnes.se/carverscorner/fonter/eastwood/eastwood.otf") format("opentype");
    }    
    @font-face {
        font-family: "roligast";
        src: local(''), url("http://hahnes.se/carverscorner/fonter/roliga/roliga.otf") format("opentype");
    }    
    @font-face {
        font-family: "banditos";
        src: local(''), url("http://hahnes.se/carverscorner/fonter/banditos/Bandito Personal Use.ttf") format("truetype");
    }
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 »

De inramade gröna kodsnuttarna får man med bbcoden C. Det står för (inline) Code.
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 »

Ett sätt att se hur nåt är gjort är att citera inlägget som innehåller det man undrar över. Med en liten reservation för senaste inlägget, som inte går att citera utan att trixa litet.
"Markera enstaka ord och fraser som kod: [c]text[/c]"
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Nu har jag tröskat igenom de fonter som inte finns i Windows och placerat dem som serverfonter. Eftersom jag har alla fonter som används i min dator så vet jag inte om jag fått med all som inte fungerade.

Tacksam om jag får info om fonter som kanske inte funkar. sidan är än så länge begränsad till att fungera på laptop och desktop.

Jag är också osäker på vilken typ av font som täcker olika läsare. Jag har testat Opera och Chrome där funkar det för mig. Jag använder formatet WOFF som ju skall täcka in alla läsare men jag har inte funnit samtliga fonter med det formatet så i en del fall använder jag formater OTF som ju även det skall klara de flesta läsare.
länk till den sida som gäller just nu

Edit: Flera fonter saknar ju ÅÄÖ åäö så jag tar tacksamt emot tips på lämpligt gratisprogram där man kan editera fontfiler och förse A,a och O,o med prickar och sedan plocka in dem på rätt ställe i fontfilen. Man kan väl kanske lättast göra det i en ttf fil som man sedan kan konvertera med Font Squirrel?
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 »

Fonter som inte funkar alls i mitt Chrome, utan faller tillbaks till Times New Roman är:

Carnivale
IFC Railroad
Black Chancery
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Tack. De var inte uppladdade. Nu är de det. :)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Om Carvers Corner.se

Inlägg av SeniorLemuren »

Det börjar bli dags att samla ihop de bilder som skall kunna väljas till skylten. De är för det mesta i JPG-format från början och behöver göras transparenta. Efter ett kort googlande hittade jag ett onlineprogram där man laddar upp bilden och får tillbaks den transparent på några sekunder. Kanonbra.
Horsehead-1.JPG
horsehead-1-tranp.png
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Skriv svar