Scripts
UBB werkbalk

Door Evert Nooyens -08-06-2007 00:00 -5.070 views
Wat bij veel gastenboeken is, is dat je als je een tekst selecteerd en je op de ubb button drukt de code naast de tekst komt. Bij deze werkbalk heb je daar geen problemen mee en zowel bij mozilla als IE zal hij de tags voor en naast de geselecteerde tekst zetten
Download alle bestanden als ZIP
ubb-werkbalk
[code]<html>
    <script type="text/javascript">
        function wrapText(el,Tag,Tag2) {
            if (el.setSelectionRange)
            {// W3C/Mozilla
                el.value = el.value.substring(0,el.selectionStart)
                + "["+ Tag +"]"
                + el.value.substring(el.selectionStart,el.selectionEnd)
                + "[/"+ Tag2 +"]"
                + el.value.substring(el.selectionEnd,el.value.length);
            }    else if (document.selection && document.selection.createRange)
            {// IE code goes here
                el.focus(); //or else text is added to the activating control
                var range = document.selection.createRange();
                range.text ="["+ Tag +"]" + range.text + "[/"+ Tag2 +"]";
            }
        }
    </script>
	<script language="JavaScript">
       var bericht = new Array();
     bericht[0] = "Tekst In het Vet zetten";
     bericht[1] = "Tekst onderlijnen";
	 bericht[2] = "Tekst Cursief zetten";
     bericht[3] = "Tekst licht blauw kleuren";
	 bericht[4] = "Tekst grijs kleuren";
	 bericht[5] = "Tekst rood zetten";
	 bericht[6] = "Tekst blauw zetten";
	 bericht[7] = "Tekst groen zetten";
	 bericht[8] = "Tekst Geel zetten";
	 bericht[9] = "Tekst Roos zetten";
	 bericht[13] = "Groote tekst";
	 bericht[14] = "kleine tekst";
	 bericht[15] = "normale tekst";
	 bericht[16] = "Quote plaatsen";
	 bericht[17] = "Tekst Doorstrepen";
	 bericht[18] = "Figuur toevoegen (geef url)";
     function plaatsBericht(nr){
	 
        var blok = document.getElementById('doel');
        blok.innerHTML = bericht[nr];
     }
    
  </script>
<center>
<table>
	    <tr>
		<td id="doel" style="font-size:10pt;">" Tooltip "</td>
		</tr>
</table>
<table border=0 cellpadding=0 cellspacing=3 summary="">
	<tr>
		<td style="font-size:10pt;">tekstkleur :</td>
		<td width=20 bgcolor=#66FFFF><a href="javascript:void(0);" onmouseover="plaatsBericht(3)" onClick="wrapText(document.getElementById('msg'),'color=#66FFFF','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#808080><a href="javascript:void(0);" onmouseover="plaatsBericht(4)" onClick="wrapText(document.getElementById('msg'),'color=#808080','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#FF0000><a href="javascript:void(0);" onmouseover="plaatsBericht(5)" onClick="wrapText(document.getElementById('msg'),'color=#FF0000','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#0000FF><a href="javascript:void(0);" onmouseover="plaatsBericht(6)" onClick="wrapText(document.getElementById('msg'),'color=##0000FF','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#008000><a href="javascript:void(0);" onmouseover="plaatsBericht(7)" onClick="wrapText(document.getElementById('msg'),'color=#008000','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#FFFF00><a href="javascript:void(0);" onmouseover="plaatsBericht(8)" onClick="wrapText(document.getElementById('msg'),'color=#FFFF00','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
		<td width=20 bgcolor=#FFC0CB><a href="javascript:void(0);" onmouseover="plaatsBericht(9)" onClick="wrapText(document.getElementById('msg'),'color=#FFC0CB','color');"><img src="Smilies/trans.gif" border="0" width="20"></a></td>
	</tr>
</table>
	
	<table border=0 cellpadding=0 cellspacing=0 summary="">
	<tr>
	<td style="font-size:10pt;" colspen="2">
		<input class="submit" Value="B" style="font-weight:bold;" type="button" onmouseover="plaatsBericht(0)" onClick="wrapText(document.getElementById('msg'),'b','b' );">
		<input class="submit" Value="U" style="text-decoration:underline;" type="button" onmouseover="plaatsBericht(1)" onClick="wrapText(document.getElementById('msg'), 'u','u');">
		<input class="submit" Value="I" style="font-style:italic;" type="button" onmouseover="plaatsBericht(2)" onClick="wrapText(document.getElementById('msg'), 'i','i');">
		<input class="submit" Value="S" style="text-decoration:line-through;" type="button" onmouseover="plaatsBericht(17)" onClick="wrapText(document.getElementById('msg'), 's','s');">
		<input class="submit" Value="Quote"  type="button" onmouseover="plaatsBericht(16)" onClick="wrapText(document.getElementById('msg'), 'quote','quote');">
		<input class="submit" Value="img"  type="button" onmouseover="plaatsBericht(18)" onClick="wrapText(document.getElementById('msg'), 'img','img');">	
			<select name="size" class="submit" >
					<option value="normaal" onmouseover="plaatsBericht(15)" onClick="wrapText(document.getElementById('msg'),'size=2','size');"> normaal</option>
					<option value="groot"onmouseover="plaatsBericht(13)" onClick="wrapText(document.getElementById('msg'),'size=5','size');"> groot</option>
					<option value="klein"onmouseover="plaatsBericht(14)" onClick="wrapText(document.getElementById('msg'),'size=0','size');"> klein</option>
			</select>
			</td>
	</tr>
</table>
</center>
[/code]