001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002 <html xmlns="
https://www.w3.org/1999/xhtml">
003 <head>
004 <**** **********="*******-Type" *******="text/html;charset=windows-1256"/>
005
006 <script type="text/javascript" src="jquery.min.js"></script>
007 <script type="text/javascript">
008 $(document).ready(function () {
009 //min font size
010 var min=11;
011 //max font size
012 var max=22;
013
014 //grab the default font size
015 var reset = $('p').css('fontSize');
016
017 //font resize these elements
018 var elm = $('p.intro, p.ending');
019
020 //set the default font size and remove px from the value
021 var size = str_replace(reset, 'px', '');
022
023 //Increase font size
024 $('a.fontSizePlus').click(function() {
025
026 //if the font size is lower or equal than the max value
027 if (size<=max) {
028
029 //increase the size
030 size++;
031
032 //set the font size
033 elm.css({'fontSize' : size});
034 }
035
036 //cancel a click event
037 return false;
038
039 });
040
041 $('a.fontSizeMinus').click(function() {
042
043 //if the font size is greater or equal than min value
044 if (size>=min) {
045
046 //decrease the size
047 size--;
048
049 //set the font size
050 elm.css({'fontSize' : size});
051 }
052
053 //cancel a click event
054 return false;
055
056 });
057
058 //Reset the font size
059 $('a.fontReset').click(function () {
060
061 //set the default font size
062 elm.css({'fontSize' : reset});
063 });
064
065 });
066
067 //A string replace function
068 function str_replace(haystack, needle, replacement) {
069 var temp = haystack.split(needle);
070 return temp.join(replacement);
071 }
072 </script>
073 <style type="text/css">
074 body {
075 font-size:12px;
076 font-family:Tahoma, Helvetica, Arial, sans-serif;
077 }
078
079 a {
080 color:#c00;
081 text-decoration:none;
082 }
083
084 a:hover {
085 color:#f00;
086 text-decoration:underline;
087 }
088 .intro {
089 BORDER-RIGHT: #87CEFA 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #f8f8f8 repeat-x left top; PADDING-BOTTOM: 4px; BORDER-LEFT: #e0e0e0 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #e0e0e0 1px solid
090 ;
091 margin: 2px 0px 2px 0px;
092 padding: 5px;
093
094 border: 1px solid #87CEFA;
095
096 }
097 </style>
098 </head>
099 <body>
100 <p style="text-align: right">
101 <a href="" class="fontSizePlus">تكبير</a> |
102 <a href="" class="fontReset">استعادة</a> |
103 <a href="" class="fontSizeMinus">تصغير</a>
104
105
106 <p class="intro" style="text-align: right">
107 طموحنا و هدفنا هو أن نساهم في تطوير مجتمع الويب العربي و لو بالشيئ اليسير و دعمه بتطبيقات الأجاكس الرائعة و تقديمها بارقى و أبسط الأساليب .
108 </p>
109 </p>
110 </body>
111 </html>