Avatar billede tvilling53 Seniormester
20. juni 2017 - 19:51 Der er 11 kommentarer og
1 løsning

Indsæt variabel i style-script

Hej
Hvordan indsættes der en variabel i stylescript.
<?php $kant=400;?> sætter en variabel i PHP.  //variabel sat til test

<script>var bredde=screen.availWidth;</script> giver skærmens bredde.

.log{margin-left:50px} Margin bliver sat.                //linie fra style-script
.log{ margin-left:<?=$kant?>px;} Margin bliver sat.
.log{ margin-left:bredde px;} Margin bliver ikke sat.

Som jeg ser det, er der 2 mulige løsninger som jeg ikke finde ud af hvordan  hvordan er, så jeg håber på at der er nogen der kan hjælpe mig.

1.Den rigtige syntax til at sætte en script-variabel ind i style-script.
2.Hvordan en script-variabel lægges over i en PHP-variabel.

Hilsen Thomas V
Avatar billede olsensweb.dk Ekspert
20. juni 2017 - 20:14 #1
>1.Den rigtige syntax til at sætte en script-variabel ind i style-script.
noget ala
<script>var bredde=<?php echo $kant; ?>px;</script>


>2.Hvordan en script-variabel lægges over i en PHP-variabel.
du sender den over med GET eller POST, og aflæser den serverside
Avatar billede tvilling53 Seniormester
21. juni 2017 - 17:31 #2
Hej

Jeg kan ikke finde løsningen på problemet, så her er lidt kode...
      <script>
            var bredde=screen.availWidth;
            document.writeln(bredde);
            bredde=(bredde-250)/2;
            document.writeln(bredde);
      </script>
hertil er resultatet som forventet...så er der problemet med at lægge script-variablen over i PHP.....
          <script><?php echo $Kant ?> = bredde;</script>
          <?php  $Kant ?>= <script>bredde;</script>
her er der ingen af de 2 syntaxer der giver et resultat..
          <input type="text" name="bredde" value="BREDDE;"  >
selv om jeg har prøvet alt hvad jeg kan komme i tanke om med diverse " "  , , <> er resultatet ikke som jeg gerne ville have. Jeg har nok overset noget men ved ikke hvad det skulle være, så håber på noget hjælp..

Hilsen Thomas V
Avatar billede olsensweb.dk Ekspert
21. juni 2017 - 19:09 #3
kig lidt på dette

[div]<?php $kant=400;?>

<?php
// hvis feltet med name bredde1 sendes over med GET gør dette
if(isset($_GET['bredde1'])){
    $bredde=$_GET['bredde1'];
    $kant=$_GET['kant'];
    echo $bredde. " ". $kant;   
}
?>


<form method ="GET" action="">
<input type="hidden" name="kant" id="kant">
<input type="text" name="bredde1" id="bredde1" value="dette bliver overskrevet af js længere nede">
<input type="submit">
</form>
<script>
    var bredde=screen.availWidth;
    document.writeln(bredde);
    bredde=(bredde-250)/2;
    document.writeln(bredde);
    // sætter værdierne i indput felterne
    document.getElementById("bredde1").value=bredde;   
    document.getElementById("kant").value=<?php echo $kant; ?>+"px";
</script>
[div]
Avatar billede olsensweb.dk Ekspert
21. juni 2017 - 19:09 #4
damm, her ville det være rart at kunne redigere sine indlæg

kig lidt på dette

<?php $kant=400;?>

<?php
// hvis feltet med name bredde1 sendes over med GET gør dette
if(isset($_GET['bredde1'])){
    $bredde=$_GET['bredde1'];
    $kant=$_GET['kant'];
    echo $bredde. " ". $kant;   
}
?>


<form method ="GET" action="">
<input type="hidden" name="kant" id="kant">
<input type="text" name="bredde1" id="bredde1" value="dette bliver overskrevet af js længere nede">
<input type="submit">
</form>
<script>
    var bredde=screen.availWidth;
    document.writeln(bredde);
    bredde=(bredde-250)/2;
    document.writeln(bredde);
    // sætter værdierne i indput felterne
    document.getElementById("bredde1").value=bredde;   
    document.getElementById("kant").value=<?php echo $kant; ?>+"px";
</script>
Avatar billede keysersoze Guru
21. juni 2017 - 22:38 #5
Det kan være at jeg misforstår - men alt PHP afvikles før frontend-koden, heriblandt JavaScript, så i ét og samme request kan du ikke få PHP til at benytte nogen som helst værdi eller variabel fra JavaScript. Hvis du i din PHP har behov for at læse værdier er du nødt til på en eller anden måde at køre i hvert fald 2 request, det kan fx være i form af en viderestilling eller et ajax-kald.
Avatar billede tvilling53 Seniormester
22. juni 2017 - 00:01 #6
#5
Hej 
Det er heller ikke sikkert at jeg har formuleret mig så det er til at forstå, men det som jeg gerne vil have er få skærmens bredde så min login-form bliver centreret midt på skærmen akkurat som når man giver en "text-align:center; til en H1 overskrift. Det hele må gerne være uden en "submit-button".. Ud over at jeg har hørt at ajax eksistere aner jeg intet om ajax.
Kort beskrevet:
find skærmens bredde..........
udregn venstre margin..........
indsæt værdien i linien
.log{ margin-left:VÆRDIpx;}
  i <style>scriptet.

Hilsen Thomas V
Avatar billede keysersoze Guru
22. juni 2017 - 09:23 #8
Medmindre jquery ellers benyttes i applikationen er det måske overkill at hive ind bare for at få centreret noget indhold - det kan formentlig løses med ren css.
Avatar billede tvilling53 Seniormester
22. juni 2017 - 12:14 #9
Hej
Mange tak for indsatsen, sorry at jeg ikke fik mit problem formuleret på en måde så det var til forstå med det samme, men mit udgangspunkt var når en PHP-variabel kan bruges i style-scriptet, så måtte det være i det her forum. Endnu en gang mange tak for de links der er skrevet så har noget at undersøge.

Hilsen Thomas V
Avatar billede keysersoze Guru
22. juni 2017 - 14:06 #10
Den bedste kommentar til det er nok, at det er vigtigt at forstå hvilken rolle serverside-kode har, hvilken frontend-kode har og i hvilken række følge det sker - er man helt med på det vil der ikke være tvivl om hvad der kan manipulere med hvad.
Avatar billede tvilling53 Seniormester
22. juni 2017 - 14:50 #11
Hej
Nu er jeg amatør og selvlært og det her var et forsøg på at få et program fungere til at se bedre ud, så jeg sprang ud på dybt vand med noget javascript og må så erkende at denne gang druknede jeg.

Hilsen Thomas V
Avatar billede tvilling53 Seniormester
23. juni 2017 - 18:22 #12
Hej
En gang imellem køres de store kanoner frem for at løse et problem, men det var slet ikke nødvendig denne gang.
Løsningen er :
<style type="text/css">
.log1{margin-left:calc(50% - 150px)}
</style>
De150px er den faste bredde på en <input type="text"/>

Hilsen Thomas V
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester