faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

5 of 14 people (36%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

How can I make layers resizable under "BOTH" IE and Netscape browers?

Apr 5th, 2008 19:31
ha mo, ric wong, Russ Locke,


This should get you started.... it dynamically resizes the width of a 
div layer to the full width of the window. You may need to tweek the 
divoffset depending on your div placement in relation to your ui 
layout. BTW. the is_ie is a boolean to test if IE or NS. Other browsers 
(ie. WebTV) may need a different divoffset.
<html>
<head>
 <script language="javascript">
  onresize = function() { dynamicResize(); }
  function dynamicResize() {
   if (is_ie) divoffset = 20; else divoffset = 5;
   var fullwidth = document.body.offsetWidth - divoffset;
   document.getElementById('layerid').style.width = fullwidth;
  }
</script>
</head>
<body>
 <div id="layerid">
  <table width="100%">
   <tr><td>table content</td><td>table content</td><td>table 
content</td></tr>
  </table>
 </div>
</body>
</html>
/********** edit *******************************/
// this is what I did to the code, and it now resizes.
// "But" unfortunately, I wanted it to increase in size, not working :(
// I want to thx for the help
// My goal is to make the layer resizes by dragging
//Glad to see I am getting there, thankyou.
<html>
<head>
 <script language="javascript">
function changeSize(){
   divoffset = 1;
   document.getElementById('layerid').style.length = 
document.getElementById('layerid').style.length + divoffset;
   document.getElementById('layerid').style.width  =  
document.getElementById('layerid').style.width  + divoffset;
}
</script>
</head>
<body>
<a href="#" onMouseDown="changeSize()">Click Here</a> 
<div id="layerid">
  <table width="75%" border="1">
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>
</body>
</html>
/**************** end of edit ****************************/
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com