tekst css met php
Gewijzigd op 27/10/2015 12:23:26 door - Ariën -
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$("button").click(function(){
$("#fonttext").css("font-family", "Verdana");
});
});
$("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.
Toevoeging op 27/10/2015 19:32:24:
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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);
?>
<?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);
?>
Toevoeging op 27/10/2015 19:33:01:
btw, de courier new, arial etc, dat deel werkt gewoon, het gaat enkel om de lettergrootte, in de code Lettertype genoemd
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.
Gewijzigd op 28/10/2015 16:55:20 door - Ariën -
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.
Met wat creativiteit kan je ook andere opmaakelementen erin verwerken, zoals font-size, font-weight, font-family etc..
Toevoeging op 30/10/2015 15:34:17:
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.
Daarnaast vraag ik me af hoe ik zorg dat ik de "voorbeeld zonder jquery" code zo kan aanpassen dat hij dmv een form invulveld ook de tekst binnen een div aanpast.
Gewijzigd op 01/11/2015 16:36:29 door bart de kinkelaar
Die p waar de tekst in komt kan je ook een div van maken.
Zoek vooral de functies eens op die je ziet!
Gewijzigd op 01/11/2015 17:10:08 door Randy vsf
Toevoeging op 02/11/2015 09:21:51:
Is het ook mogelijk om een value (in dit geval van het aaantal tekens in de textbox), te onthouden als je naar een andere pagina gaat, bijvoorbeeld in de a href link o.i.d?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="container">
Voorbeeld<br>
<p id="paragraph"></p>
</div>
<input type="text" id="fontSize" placeholder="Font size"><br>
<input type="text" id="fontFamily" placeholder="font family"><br>
<input type="text" id="fontColor" placeholder="Font color"><br>
<button id="button">change</button> Klik hier om te zien hoe "Voorbeeld" eruit ziet in de de door jouw gekozen grootte, lettertype en kleur.<br>
<textarea id="textArea" onkeyup="countChar(this)"></textarea><br>
<button id="button">change</button>
<script>var container = document.getElementById('container');
document.getElementById('button').addEventListener('click', function() {
container.style.fontSize = document.getElementById('fontSize').value;
container.style.fontFamily = document.getElementById('fontFamily').value;
container.style.color = document.getElementById('fontColor').value;
});
var textarea = document.getElementById('textArea');
var container = document.getElementById('container');
document.getElementById('textArea').addEventListener('keydown', function() {
container.innerHTML = textarea.value;
});</script>
<script>
$( document.body )
.click(function() {
$( document.body ).append( $( "<div>" ) );
var n = $( "text" ).length;
$( "span" ).text( "There are " + n + " text.");
})
// Trigger the click to start
.trigger( "click" );
</script><br>
Het aantal tekens:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$('#charNum').text(0 + len);
}
};
</script>
Gaat $Color de database in?
2 regels verder gebruik je namelijk echo.
Input naar het scherm moet inderdaad escape-t worden, maar dan wel met een daarvoor geschikte functie. mysqli_escape beveiligt de invoer tbv het plaatsen in een query voor Mysql. (en dus niet voor Oracle etc)
Tekst die naar het scherm gaat, dien je met htmlspecialchars() te beveiligen.
Als iemand color "blauw'groen" aanlevert, dan wordt dat "blauw\'groen", maar dat kon op het scherm geen kwaad.
Voert hij in "<script>alert()</script> dan heb je meer aan htmlspecialchars() om de < > onschadelijk te maken (idem voor " in je invoer)
kijk eens naar window.location(url).
Die functie kan je gebruiken om variables via de url door te sturen.
Andere opties heeft - Ariën - al gegeven
Toevoeging op 04/11/2015 20:03:06:
Inmiddels ben ik aan het kijken of het kan met Localstorage, maar ook dat wil nog niet vlotten.
Toevoeging op 04/11/2015 20:31:05:
Ik vraag me af: is het eigenlijk uberhaupt wel mogelijk om de value van het aantal tekens in een textbox op te slaan in localstorage of cookies en te laten zien in een andere pagina. Zoja, hoe? Naar session heb ik gekeken maar dat blijkt zoiezo al niet of nauwelijks te kunnen.
