Tag-Cloud / Tag-Wolke in PHP
Wer dieses Thema in PHP umsetzen will, sollte sich einmal diesen Forenbeiträg durchlesen:
Archiv für September, 2007
JavaScript: Textübernahme aus Eingabefenster z.B. für einen BBCode-Editor
Wer sich einen kleinen BBCode-Editor für sein eigenens CMS schreiben will, der steht manchmal vor dem Problem, wie er dem Nutzer nun schnell und einfach “BBCode-Knöpfe” anbieten kann. Entsprechende Buttons sind schnell erstellt. Hier das Tag [i] für den Kursivknopf (die JavaScript-Funktion für insert befindet sich am Ende dieses Beitrags):
<input value=”I” onclick=”insert(’[i]‘, ‘[/i]‘)” type=”button” />
Will man nun BBCode mit weiteren Argumenten übernehmen, wie beispielsweise die Adresse einer Bild-URL, dann hilft der nachfolgende CodeSchnipsel für das Einfügen eines Bildes:
function insert_img()
{
var FoundErrors = '';
var enterIMG = prompt("Gib die Adresse des Bildes ein", "http://");
if (!enterIMG.replace("http://","")) { FoundErrors += " " + "URL fehlt"; }
if (FoundErrors) { alert("Fehler"+FoundErrors); return; }
insert("[img]"+enterIMG+"[/img]", "");
}
Dieses kleine JavaScript fragt mit einem Fenster wie dem nachfolgenden nach der Url / Internet-Adresse.
Kleines Manko: Die Abfrage if(!enterIMG) gibt nur einen Fehler aus, wenn der Benutzer auch das http:// löscht, also praktisch nie.
JavaScript Insert: Tags einbinden
Das nachfolgende JavaSkript sorgt dafür, dass BBCode-Tags im gerade genutzten Form / Textarea genutzt werden können:
function insert(aTag, eTag)
{
var input = document.forms['formular'].elements['inhalt'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
Wie kann man ein Div-Element/Box in einer Seite via CSS zentrieren?
Mit margin:auto beispielsweise, wenn die Breite des Div-Elementes vordefiniert ist. Wichtig hierbei ist aber dem Div an dieser Stelle eine feste Breite zu zu weisen, da sonst die gesamte Fensterbreite angenommen wird.
In der Praxis kann dies sehr hilfreich sein, wenn man beispielsweise eine schön kompliziert verschachtelte / verwurstete Seite hat und diese um eine vertikal angeordnetes Banner (Skyskraper) ergänzen möchte.
Angenommen der Webseiteninahlt hat eine Breite von 800 Bildpunkten und das Banner 120 Bildpunkte, erstellen wir ein umschliessendes Div 1 mit einer Breite von 920 Bildpunkten, setzen den ursprünlichen Inhalt in Div 1a und das Banner in Div 1b. Der HTML-Code dazu sieht folgendermassen aus.
<pre name=”code” class=”html”>
<body style=”text-align:center”>
<div id=”1″ style=”margin:auto;width:920px;”>
<div id=”1a” style=”text-align:left;width:800px;float:left”></div>
<div id=”1b” style=”text-align:left;float:right;width:120px;”></div>
</div>
</body>
</pre>
Im Internet Explorer muss im Body-Tag text-align:center gesetzt sein, da dieser margin:auto hier nicht richtig interpretiert und die das Div 1 sonst am linken Seitenrand beginnen würde. Die beiden text-align:left in den Div-Elementen 1a und 1b dienen lediglich dazu, dass das text-align:center sich nicht auf die restlichen Inhalt auswirkt.
Das ganze sieht dann in einer schematischen Darstellung ungefähr so aus.
