Промяна размера на шрифта. v2

Автор: miro91

Това е малко по разширена версия за променяне размера на текста. Тук са добавени и нови функции: за удебеляване на текста, за подчертаване и накланяне (Bold, Underline, Italic). Така сега си правите един .js файл functions.js

function toggle(el) {
var element = document.getElementById(el);
if ( element.style.display != 'none' ) {
element.style.display = 'none';
}
else {
element.style.display = '';
}
}
function emoticon(text) {
var txtarea = document.post.text;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function checkusername(name){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
var url = 'checkuname.php?name=' + name;
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
var content = xmlhttp.responseText;
}
}
xmlhttp.send(null)
return;
}

function addText(elname, wrap1, wrap2) {

if (document.selection) {

var str = document.selection.createRange().text;

document.forms['inputform'].elements[elname].focus();

var sel = document.selection.createRange();

sel.text = wrap1 + str + wrap2;

return;

} else if ((typeof document.forms['inputform'].elements[elname].selectionStart) != 'undefined') { // for Mozilla

var txtarea = document.forms['inputform'].elements[elname];

var selLength = txtarea.textLength;

var selStart = txtarea.selectionStart;

var selEnd = txtarea.selectionEnd;

var oldScrollTop = txtarea.scrollTop;

var s1 = (txtarea.value).substring(0,selStart);

var s2 = (txtarea.value).substring(selStart, selEnd)

var s3 = (txtarea.value).substring(selEnd, selLength);

txtarea.value = s1 + wrap1 + s2 + wrap2 + s3;

txtarea.selectionStart = s1.length;

txtarea.selectionEnd = s1.length + s2.length + wrap1.length + wrap2.length;

txtarea.scrollTop = oldScrollTop;

txtarea.focus();

return;

} else {

insertText(elname, wrap1 + wrap2);

}

}

function insertText(elname, what) {

if (document.forms['inputform'].elements[elname].createTextRange) {

document.forms['inputform'].elements[elname].focus();

document.selection.createRange().duplicate().text = what;

} else if ((typeof document.forms['inputform'].elements[elname].selectionStart) != 'undefined') { // for Mozilla

var tarea = document.forms['inputform'].elements[elname];

var selEnd = tarea.selectionEnd;

var txtLen = tarea.value.length;

var txtbefore = tarea.value.substring(0,selEnd);

var txtafter = tarea.value.substring(selEnd, txtLen);

var oldScrollTop = tarea.scrollTop;

tarea.value = txtbefore + what + txtafter;

tarea.selectionStart = txtbefore.length + what.length;

tarea.selectionEnd = txtbefore.length + what.length;

tarea.scrollTop = oldScrollTop;

tarea.focus();

} else {

document.forms['inputform'].elements[elname].value += what;

document.forms['inputform'].elements[elname].focus();

}

}

b=0;
u=0;
i=0;
r=1;
size=16;

function StyleI(id) {
if(i==0){
document.getElementById(id).style.fontStyle = "italic" ;
i=1;
}else{
document.getElementById(id).style.fontStyle = "normal" ;
i=0;
}
}

function StyleB(id) {
if(b==0){
document.getElementById(id).style.fontWeight = "bold" ;
b=1;
}else{
document.getElementById(id).style.fontWeight = "normal" ;
b=0;
}
}

function StyleU(id) {
if(u==0){
document.getElementById(id).style.textDecoration = "underline" ;
u=1;
}else{
document.getElementById(id).style.textDecoration = "none" ;
u=0;
}
}

function StylePl(id) {
if (size<25){
size = size + 2;
document.getElementById(id).style.fontSize = size + "px";
}
}

function StyleMi(id) {
if (size>10){
size = size - 2;
document.getElementById(id).style.fontSize = size + "px";
}
}

function StyleNo(id) {
size = 16;
document.getElementById(id).style.fontSize = size + "px";
if(i==1){
document.getElementById(id).style.fontStyle = "normal" ;
i=0;
}
if (b==1){
document.getElementById(id).style.fontWeight = "normal" ;
b=0;
}
if (u==1){
document.getElementById(id).style.textDecoration = "none" ;
u=0;
}
}

След това където ще използвате тези функции кода трябва да изглежда така.
примерно index.php

<script src="functions.js" type="text/javascript"></script>
<a onclick="StylePl('info')">A+ </a> |
<a onclick="StyleMi('info')">A- </a> |
<a onclick="StyleNo('info')">A </a> |
<a onclick="StyleB('info')">B </a> |
<a onclick="StyleU('info')">U </a> |
<a onclick="StyleI('info')">I </a><br>
<div class="var" id="info">
<div>Тука някакъв текст<br><br>
Тука пак някакъв текст<br />
Тука пак някакъв текст<br />
Тука пак някакъв текст<br />
Тука пак някакъв текст<br />Тука пак някакъв текст<br />
Тука пак някакъв текст<br />
Тука пак някакъв текст<br />Тука пак някакъв текст<br />
Тука пак някакъв текст<br />
Тука пак някакъв текст<br />
</div>

това е след малко ще дам демо.
Урока е подготвен специално за web-tourist.net
Забранявам преписването му в други сайтове.