lixlpixel php code snippets | html and code


this javascript gives you an iframe-type floating layer.

  

 ---------------------------------------</pre>

  

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <html> 

  <head> 

   <title>untitled</title>

   <style type="text/css">

  

   #thingy {

   width: 300px;

   height: 250px;

   overflow: auto;

   float: left;

   padding-left: 5px;

   padding-right: 3px;

   background: whitesmoke;

   }

  

   #sizer {

   position: absolute;

   top: -100px;

   visibility: hidden;

   }

  

   .divtext {

   font: 200 14px helvetica,arial,verdana,sans-serif;

   }

  

   body {

   background: white;

   }

  

   </style>

   <script type="text/javascript" language="javascript"> 

  

   function getElement(id) {

   return document.getElementById ? document.getElementById(id) :

   document.all ? document.all(id) : null;

   }

  

   function get_lineheight(id) {

   var el = getElement(id);

   if (el && typeof el.offsetHeight != 'undefined') return el.offsetHeight;

   }

  

   function setScrollDIVht(id) {

   var lineheight = get_lineheight('sizer');

   var el = getElement(id);

   var elHt = el.offsetHeight;

   if (el && el.style) el.style.height = String(elHt + (lineheight - (elHt%lineheight)) + 'px');

   }

  

   </script> 

  </head> 

  <body>

   <span id="sizer" class="divtext"><br></span> <!-- use <br> to sample line height -->

   <div id="thingy" class="divtext"> <!-- assign text class to both elements -->

    <script type="text/javascript" language="javascript"> 

     for (i=0;i<400;i++) document.write('blah '); //filler

    </script>

   </div>

   <script type="text/javascript" language="javascript">

    setScrollDIVht('thingy');

   </script>

    <form style="float:left;margin-left:100px;">text-size:

     <select onchange="x=options[selectedIndex].value; getElement('sizer').style.fontSize=getElement('thingy').style.fontSize=x; setScrollDIVht('thingy')">

      <option value="11px">11px</option>

      <option value="13px">13px</option>

      <option value="14px" selected="selected">14px</option>

      <option value="16px">16px</option>

      <option value="22px">22px</option>

      <option value="32px">32px</option>

    </select>

   </form>

  </body> 

  </html>