Button to increase or decrease Font size on website

<script type="text/javascript">
var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

</script>

Link for buttons
-
+

This is not my script, source is White Hat

Easy steps to develop 3 column layout with equal height using CSS

In this I am not going into the details, this is just for the basic solution to the height problem of 3 column layout.

The basic structure goes like this.

<div id=”container”>
 <div id=”left_nav”> </div>
 <div id=”main_content”> </div>
 <div id=”right_nav”> </div>
</div>

Step 1: Find the column whose height will be maximum.

Suppose “main_content” is going to the longest column.

Step 2: Set background color to first column

Set the color which you want to be the color of “left_nav” as background color of “container” div.

#container {
    background-color: #FFFF99;
    margin: 0px;
    padding: 0px;
    width: 100%;
    float: left;
}

Step 3: Set background to third column

Add a extra div as background for the other two divs – “main_content” and “right_nav”.

<div id=”container”>
 <div id=”left_nav”> </div>
 <div id=”extra_div”>
  <div id=”main_content”> </div>
  <div id=”right_nav”> </div>
 </div>
</div>

Make the width of this “extra_div” equal to the sum of width of two divs – “main_content” and “right_nav”.

Height (extra_div) = Height(main_content) + Height(right_nav)
Make the “extra_div” float right or opposite the other two divs.

Make the background color of “extra_div” same as you want for “right_nav”.

#extra_div:background-color = #right_nav:background-color

Add background color to “main_content”.

#extra_div {
    background-color: #FFFF99;
    margin: 0px;
    padding: 0px;
    width: 75%;
    float: right;
}

This gives us three column layout.



There are many articles on this issue. I liked these two:

• Raise text relevance by rearranging a three-column layout


• Equal Height Columns with Cross-Browser CSS & No Hacks

Clear text field on click

<input type="text" name="myText" onFocus="this.value=''" value="Type in to search">

You could do it with onClick as well, but it wouldn't work if user used TAB to focus on the field