+ и -

D

diko

Registered
Някаде гледах код който пишеш в него текст какъвто искаш и после може да си го уголемяжаш т.е. има един + и - до текста и ако натиснеш + увеличава големината на текста ... ако може дайте ми линк към него :oops:
 
Отваряш notepad и в слагаш следното:
Код: 
var currentSize = 14; //Нормален размер на шрифта
         var max = 24; //Максимален размер на шрифта
         var min = 9; //Минимален размер на шрифта

         function increase_decrease(type) {
            var obj = document.getElementById('text');
            if(type) {
               if(currentSize < max) {currentSize++;}
            }
            else {
               if(currentSize > min) {currentSize--;}
            }
            obj.style.fontSize = currentSize + "px";
         }
Запазваш го като text.js да кажем

После в страницата в която искаш да има такава опцията за размера на текста правиш следното:
Код: 
<html>
	<head>
		<title>Залавие</title>
		<script type="text/javascript" src="text.js"></script> // вкарваш js-та
</head>
<body>
<a href="javascript:increase_decrease(1);">Увеличаване на шрифта (+)</a> |
      <a href="javascript:increase_decrease(0);">Намаляне на шрифта(-)</a><br>
<div id="text">
тука пишеш текста
</div>
</body>
</html>
Текстът трябва да е между <div> </div>
Надявам се че ти върши работа ;)
Edit: Ето и демо
 
Ето ти примерен...

Код: 
<html> 
<head> 
<title>Увеличаване / Намаляне на шрифта</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css"> 
 body {font-family: Verdana, arial, serif; font-size: 10px;} 
 a {color: blue; text-decoration: none;} 
 a:hover {text-decoration: underline;} 
 div#text {cursor: default; width: 400px; padding: 5px; margin-top: 5px; border: 1px solid gray; background:#f9f9f9;} 
</style> 
<script type="text/javascript"> 
   var currentSize = 10;        // Нормален размер на шрифта 
   var max = 16;                // Максимален размер на шрифта 
   var min = 9;                 // Минимален размер на шрифта 

   function incdec(type) { 
      var obj = document.getElementById('text'); 
      if(type) { 
         if(currentSize < max) {currentSize++;} 
      } 
      else { 
         if(currentSize > min) {currentSize--;} 
      } 
      obj.style.fontSize = currentSize + "px"; 
   } 
</script> 
</head> 

<body>
<center>
<a href="javascript:incdec(1);">Увеличаване на шрифта</a> | 
<a href="javascript:incdec(0);">Намаляне на шрифта</a> 
<div id="text" style="text-align: justify"> 
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>
</center>
</body> 
</html>

:arrow: http://web-tourist.net/forum/viewtopic.php?p=8982
 
diko каза:
ахам стана и после като качвам сайта този фаил го качвам при страниците нали ?
Увеличете...
Да ;) Ако искаш да ти работи го качи ;) А както показа и DJCharge, може да не правиш отделен файл, ами да си го вкараш кода направо в страницата ;) И в двата случая работи ;)
 
втория код ми върши по голяма работа ма само да питам може ли да се увеличи размера на самото + и - ? и като се посочи да не се подчертава ?!
 
еми сложи така
Код: 
<a href="javascript:incdec(1);">+</a> |
<a href="javascript:incdec(0);">-</a>
А да не се подчертава текста си оправи стиловете:
Код: 
<style type="text/css">
 body {font-family: Verdana, arial, serif; font-size: 10px;}
 a {color: blue; text-decoration: none;}
 a:hover {text-decoration: none;}
 div#text {cursor: default; width: 400px; padding: 5px; margin-top: 5px; border: 1px solid gray; background:#f9f9f9;}
</style>
"a:hover {text-decoration: none;}" - така няма да се подчертава !
 
еми да се увеличи големината на + и - т.е. да стане така + и - а текста да си остане малък т.е. да се увеличи размера само на + и - схвана ли ?
 
Демо:
http://web-tourist.net/project/svilkaa/new.html

Кода:
Код: 
     <html>
<head>
<title>Увеличаване / Намаляне на шрифта</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
   var currentSize = 10;        // Нормален размер на шрифта
   var max = 16;                // Максимален размер на шрифта
   var min = 9;                 // Минимален размер на шрифта

   function incdec(type) {
      var obj = document.getElementById('text');
      if(type) {
         if(currentSize < max) {currentSize++;}
      }
      else {
         if(currentSize > min) {currentSize--;}
      }
      obj.style.fontSize = currentSize + "px";
   }
</script>
<style type="text/css">
 body {font-family: Verdana, arial, serif; font-size: 10px;}
 a {color: blue; text-decoration: none;}
 a:hover {text-decoration: none;}
 </style> 
</head>

<body>
<center>
<a href="javascript:incdec(1);"><div id="text">+</div></a> |

<a href="javascript:incdec(0);"><div id="text">-</div></a>
<div style="text-align: justify">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
   voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
   non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</center>
</body>
</html>

Така !?
 
не самите + и - да са голями и като цъкаш на тях да си останат каквито са а не да се променят т.е. :
+-

текстатеггфгххфхкимбцкн
хийдтхйийх
дфихйфдихйфхг

и сега те да са си такива голями а текста малък
и като цъкаш на + текста да става по голям а самия си + да си е същия
това се однася и за - дано тоя път да си ме разбрал
 
Оправяш си стиловете:
Код: 
<style type="text/css">
 body {
font-family: Verdana, arial, serif; 
font-size: 10px;
}
 a {
color: blue; 
text-decoration: none;
font-size: 20px;
}
 a:hover {
text-decoration: underline;
font-size: 20px; 
}
 div#text {
cursor: default; 
width: 400px; 
padding: 5px; 
margin-top: 5px; 
border: 1px solid gray; 
background:#f9f9f9;
}
</style>

a {
color: blue;
text-decoration: none;
font-size: 20px;
}
a:hover {
text-decoration: underline;
font-size: 20px;
}

;)

Прочети тука за стиловете (CSS):
- http://web-tourist.net/login/login/view.php?st=937
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе