Wat ik wil maken is als iemand op de homepage een lettertype invoert (die opgehaald is uit een database, al hoeft dat neit perse), dat degene als hij op Bevestigen-button klikt, op de volgende pagina een zin ziet in de gekozen lettergrootte. Is dat mogelijk, zo ja hoe?
Dat is mogelijk. Je kan met font-family in CSS het lettertype bepalen. let er wel op dat deze wel beschikbaar moet zijn bij de gebruiker. Anders kan je bijv. via 'Google fonts' ervoor zorgen dat je ook exotische fonts kan gebruiken.
Dat klopt, dat weet ik. Maar hoe kan ik ervoor zorgen dat de font-family/font-size automatisch word aangepast aan wel getal qua size de gebruiker invoert?
Dit kan je on-the-fly met jQuery aanpassen:

$(document).ready(function(){
    $("button").click(function(){
        $("#fonttext").css("font-family", "Verdana");
    });
});

Zie ook: http://jsfiddle.net/mq8z4az7/

Indien je het met PHP wilt, dan moet je de waarde van de font via een $_POST meesturen.
Het is gelukt met post (php). Als ik nu 50 invoer, dan laat hij een voorbeeldtekst op de volgende pagina zien in 50px lettergrootte.

[size=xsmall]Toevoeging op 27/10/2015 19:32:24:[/size]

Ik heb het idee dat wat ik vanmiddag zei niet klopt. Volgens mij pakt hij hem enkel tussen de 1 en de 5px, maar als ik groter doe, of dat nou 10, 15 of 50 is, dan houd hij een standaard grootte aan om de een of andere reden.
Form:
<div class="caption-full">
	<h2>Plakletters maken</h2>
  <form method='post' class="form-horizontal" action='PlaklettersVerwerken2.php' role="form">  
    <div class="form-group"><p>vul achter de lettergrootte het woord px in, anders kan het zijn dat hij het niet doet.
      <label class="control-label col-sm-3" for="Lettertype">Lettertype:</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="Lettertype" name="Lettertype" placeholder="Het lettertype.">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-3" for="Tekst">Tekst:</label>
      <div class="col-sm-3">          
        <input type="text" class="form-control" id="Tekst" name="Tekst" placeholder="De tekst.">
      </div>
    </div>
	<div class="form group">
	<label class="control-label col-sm-3" for="Font">Font:</label>
	<select name="cars">
  <option value="Lucida Console, Monaco, monospace">Lucida Console, Monaco, monospace</option>
  <option value="Courier New, Courier, monospace">Courier New, Courier, monospace</option>
  <option value="Verdana, Geneva, sans-serif">Verdana, Geneva, sans-serif</option>
  <option value="Trebuchet MS, Helvetica, sans-serif">Trebuchet MS, Helvetica, sans-serif</option>
    <option value="Tahoma, Geneva, sans-serif">Tahoma, Geneva, sans-serif</option>
  <option value="Impact, Charcoal, sans-serif">Impact, Charcoal, sans-serif</option>
  <option value="Comic Sans MS, cursive, sans-serif">Comic Sans MS, cursive, sans-serif</option>
  <option value="Georgia, serif">Georgia, serif</option>
    <option value="Arial Black, sans-serif">Arial Black, Gadget, sans-serif</option>
  <option value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif</option>
  <option value="Times New Roman, Times, serif">Times New Roman, Times, serif</option>
</select>
	</div>
	<div class="form group">
	<label class="control-label col-sm-3" for="Color">Kleur:</label>
	<select name="Color">
  <option value="#000000">Zwart</option>
    <option value="#00FFFF">Cyaan</option>
	  <option value="#0000FF">Blauw</option>
	    <option value="#008000">Donkergroen</option>
		  <option value="#FF8C00">Oranje</option>
		    <option value="#FF1493">Roze</option>
			  <option value="#FF00FF">Paars</option>
</select>
	</div>
    <center><div class="form-group">        
      <div class="col-sm-offset-3 col-sm-3">
        <center><button type="submit" class="btn btn-default" id="btnlogin" name="Btnlogin">Inloggen</button>
      </div>
    </div>
  </form>
<script>
var shownnn="yes";
var dropd=document.getElementById("image-dropdown");
function showww(){dropd.style.height="auto";    dropd.style.overflow="y-scroll";}   
function hideee(){dropd.style.height="$Lettertype";    dropd.style.overflow="hidden";}
//dropd.addEventListener('mouseover', showOrHide, false);
//dropd.addEventListener('click',showOrHide , false);


function myfuunc(imgParent)
{
    hideee();
    var mainDIVV = document.getElementById("image-dropdown");
    imgParent.parentNode.removeChild(imgParent);
    mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}
</script>


de verwerking:

<div class="container">
					<?php include 'config.php'?>
<?php
if(isset($_GET['username']))
{ 
  $username = $_GET['username'];
  // getting info from db
}?><?php include 'config.php'?><?php

// Get the data passed from the form
$Lettertype = $_POST['Lettertype'];
$Tekst = $_POST['Tekst'];
$Font = $_POST['cars'];
$Color = $_POST['Color'];
// escape variables for security
$Lettertype = mysqli_real_escape_string($con, $_POST['Lettertype']);
$Tekst = mysqli_real_escape_string($con, $_POST['Tekst']);
$Font = mysqli_real_escape_string($con, $_POST['cars']);
$Color = mysqli_real_escape_string($con, $_POST['Color']);

echo "<h2>Your Input:</h2>";
echo "<div class='otel'><font color='$Color'><font face='$Font'><font size='$Lettertype'>$Tekst</font></div><br>";

mysqli_close($con);
	?>


[size=xsmall]Toevoeging op 27/10/2015 19:33:01:[/size]

btw, de courier new, arial etc, dat deel werkt gewoon, het gaat enkel om de lettergrootte, in de code Lettertype genoemd
Waarom gebruik je de inmiddels 'bejaarde' font-tag in HTML? Deze is zeer beperkt, en kan maar 7 verschillende groottes aan.

Als je niet wilt gebonden zijn aan grenzen, dan moet je style="font-size:18px" gebruiken. Deze kan je onbeperkt schalen.

Vergeet de font-tag gewoon. Daar heb je niks meer aan.
Thanx voor die tip, nu werkt ie goed.
De vraag van degene waar ik het voor maak was, is het mogelijk, om als een tekst invoert, en vervolgens een lettertype kiest, dat de tekst dan meteen veranderd in de gekozen lettertype. Hetzelfde met kiezen van de kleur. Is dat mogelijk?

Het kiezen van lettertypes en kleuren gebeurt nu net als invullen van tekst in een form.
Heb je mijn eerdere reactie met de JavaScript-codeal gelezen?
Met wat creativiteit kan je ook andere opmaakelementen erin verwerken, zoals font-size, font-weight, font-family etc..
Die code zonder jquery werkt tot nu toe het beste, alleen de gekozen opmaak verdwijnt al gelijk nadat het verschenen is na druk op Change, dat is nu het probleem.

[size=xsmall]Toevoeging op 30/10/2015 15:34:17:[/size]

EDIT: Inmiddels blijft de tekst staan maar wat ik wil is dat de gebruiker tekst kan invoeren en dat die tekst dan verschijnt ipv een standaardtekst. Was al bezig met replaceWith maar dat wil nog niet lukken.

Reageren