Om Carvers Corner.se konstigt fel. Psykbryt?

SeniorLemuren · Inlägg av **SeniorLemuren** » 11 mars 2022, 07:48:41

Fontval och val av grafik, typ ett hästhuvud och ev. en bård i överkant samt färgval av de olika komponenterna skall göras. Det hela skall skickas som en datafil via mail när allt är klart.

SeniorLemuren · Inlägg av **SeniorLemuren** » 11 mars 2022, 08:01:24

MadModder skrev: ↑10 mars 2022, 20:33:43 Nja... jag menade att förälder-DIVen ska ha skylten som bakgrund, och inte ligga som ett objekt i samma nivå som den DIV som text ligger i.
<div träbit>
   <div textrad 1></div>
   <div textrad 2></div>
</div>
så de verkligen är inuti skylt-diven.
Det ska gå att sätta DIV-typen som tabellceller, så de håller sig på plats.

Ok, jag är inte helt klar på hur du menar. Kan du enkelt visa hur du menar att jag skall förändra här.

<div class="col-lg-8">
                    <div>
                        <p id="textrad1" class="mytext1"></p>
                    </div>
                    <div>
                        <p id="textrad2" class="mytext2"></p>
                    </div>

                    <img id="image1" class="skyltbox" src="assets/img/framesharpcorner.jpg" width="576" alt="GFG image" />
                    <img id="image2" class="skyltbox" src="assets/img/framerounnegcorner.jpg" width="576" alt="GFG image" />
                    <img id="image3" class="skyltbox" src="assets/img/framerounposcorner.jpg" width="576" alt="GFG image" />
                    <img id="image4" class="skyltbox" src="assets/img/noframe.jpg" width="576" alt="GFG image" />
                </div>

Inlägg av **MadModder** » 11 mars 2022, 08:44:42

Nej jag måste testa själv först. Kan inte allt utantill.

SeniorLemuren · Inlägg av **SeniorLemuren** » 11 mars 2022, 14:37:12

Så enkelt var det, bara man tänker till lite och får hjälp. IMG kommer naturligtvis före texten, sedan satte jag texten till relative och flyttade upp den i skylten med lämpligt negativt värde i style.top .

Kod: Markera allt

<div class="col-lg-8">
                    <img id="image1" class="skyltbox" src="assets/img/framesharpcorner.jpg" width="576" alt="GFG image" />
                    <img id="image2" class="skyltbox" src="assets/img/framerounnegcorner.jpg" width="576" alt="GFG image" />
                    <img id="image3" class="skyltbox" src="assets/img/framerounposcorner.jpg" width="576" alt="GFG image" />
                    <img id="image4" class="skyltbox" src="assets/img/noframe.jpg" width="576" alt="GFG image" />

                    <div>
                        <p id="textrad1" class="mytext1"></p>
                    </div>
                    <div>
                        <p id="textrad2" class="mytext2"></p>
                    </div>

                </div>

Och i Javascriptet:

Kod: Markera allt

window.addEventListener('load', () => {
    mytext1.style.position = 'relative';
    mytext1.style.left = 100 + 'px';
    mytext1.style.top = -210 + 'px';
    mytext2.style.position = 'relative';
    mytext2.style.left = 100 + 'px';
    mytext2.style.top = -230 + 'px';
});

Inlägg av **MadModder** » 11 mars 2022, 14:54:51

Ja det funkar ju himla bra det där nu.

rvl · Inlägg av **rvl** » 11 mars 2022, 15:06:21

Storleken på text1 flyttar på text2, men det är ju logiskt och önskvärt.

Vad är annorlunda med välj storlek rullgardinen? Den saknar den (åtminstone av mig) oönskade egenskapen att resetta allt, som de andra rullgardinerna har, om man råkar trycka på "rubriken".

Inlägg av **MadModder** » 11 mars 2022, 15:10:50

Ja det är något med trycket som gör att den skickar formuläret och laddar om sidan. Verkar det som.
Det borde gå att stänga av det för de knapparna på något sätt.

[edit]
Aha!

På första knappen står det type="button" i koden, men på de tre efter står det type="button " med ett mellanslag. Det blir ju fel.
En ospecificerad knapp verkar bli en submit-knapp.
Testade att ta bort mellanslagen i chrome inspect, och då funkade det.

Inlägg av **MadModder** » 11 mars 2022, 15:39:20

Hittade ett exempel på w3schools där man kunde flytta på en DIV mha musen.
Redigerade det lite så det funkade med två.
Kanske kan du knåpa in det på din sida senare.

Om det ska funka med touch får man lägga till lite kod...

[VISA]

Kod: Markera allt

<!DOCTYPE html>
<html>
<style>
#div1 {
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
}

#div2 {
  position: absolute;
  z-index: 2;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
}

</style>
<body>

<h1>Flyttbara DIV-element</h1>

<p>Klicka och håll musknappen nedtryckt medan du flyttar på DIV-elementen</p>

<p><div id="div1">
  <p>Text nummer ett</p>
</div></p><br><br><br>
<p><div id="div2">
  <p>Text nummer två</p>
</div></p>

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("div1"));
dragElement(document.getElementById("div2"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

SeniorLemuren · Inlägg av **SeniorLemuren** » 11 mars 2022, 15:54:26

Ja det var ju ett jäkla fel med mellanslaget. Det är något som Visual Studio Code lägger till vid något tillfälle. Vet inte hur det kan förhindras så det är bra att veta att man behöver hålla koll på sådant. Nu har jag tagit bort mellanslagen så nu funkar det.

rvl · Inlägg av **rvl** » 11 mars 2022, 15:59:02

Ja, "musflytt" är säkert nåt som många förväntar sig. Har tänkt på det tidigare, men inte skrivit nåt. Pilknapparna är dock fortfarande bra för fininställning.

SeniorLemuren · Inlägg av **SeniorLemuren** » 11 mars 2022, 16:02:54

MadModder skrev: ↑11 mars 2022, 15:39:20 Hittade ett exempel på w3schools där man kunde flytta på en DIV mha musen.
Redigerade det lite så det funkade med två.
Kanske kan du knåpa in det på din sida senare.

Om det ska funka med touch får man lägga till lite kod...

[VISA]

Kod: Markera allt

<!DOCTYPE html>
<html>
<style>
#div1 {
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
}

#div2 {
  position: absolute;
  z-index: 2;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
}

</style>
<body>

<h1>Flyttbara DIV-element</h1>

<p>Klicka och håll musknappen nedtryckt medan du flyttar på DIV-elementen</p>

<p><div id="div1">
  <p>Text nummer ett</p>
</div></p><br><br><br>
<p><div id="div2">
  <p>Text nummer två</p>
</div></p>

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("div1"));
dragElement(document.getElementById("div2"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

Tack o bock. Jag letade lite efter den funktionen tidigare men hittade inget som verkade passa. Med musflytt kan jag ju skippa grovförflyttning med siffertangenterna och bara ha finjustering med piltangenterna. Så detta är ju perfekt. Skall testas senare.

rvl · Inlägg av **rvl** » 11 mars 2022, 17:14:50

Text på rad2 gör att sidan "i onödan" lägger till ett scrollbarkrävande vitt fält längst till höger.

Screenshot 2022-03-11 180846.png

SeniorLemuren · Inlägg av **SeniorLemuren** » 12 mars 2022, 08:30:38

Ja, jag såg det sent i går kväll. Skall ju naturligtvis åtgärdas.

SeniorLemuren · Inlägg av **SeniorLemuren** » 12 mars 2022, 10:55:57

Sådär, nu kan man flytta texten med musen, flyttning med pilar är borttagen, det strulade till sig i kombination med musflytt.

Det finns fel som jag inte blir av med och det är den rektangel som visas under tiden man gör flyttningen. Ett större problem är att jag inte får det att fungera alls om jag sätter texten till position relative i CSS. Om den är absolute så blir det ju fel då man förminskar bilden till vänster. Allt trängs ihop utom texten. Blir inte klok på hur jag skall ändra i javascriptet för att fixa detta.

Javascriptet flyttade ju på hela diven och det var inte så lyckat heller. Jag ändrade det till att sätta id tll texten i stället för diven så det är ju något i den rutinen som måste ändras för att lösa båda felen.

Vore det inte för problemen jag beskrivit så vore det ju perfekt. Kanske jag kan hitta någon annan rutin som är gjord för att flytta ett objekt i stället dör en div. Det finns inbyggda musflyttrutiner i Bootstrap men jag har inte lyckats få de att funka heller. Får kolla vidare.

Henry · Inlägg av **Henry** » 12 mars 2022, 16:51:54

Själv hittar jag inga problem det lilla jag testat, allt funkar som planerat tycker jag och det går fint att flytta runt texten.

rektangel som visas under tiden man gör flyttningen

Ser inget sådant.

Om Carvers Corner.se konstigt fel. Psykbryt?

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se

Re: Om Carvers Corner.se