SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    New Orleans
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Script for determining an image's height?

    Hi,

    I currently have an image that I'm using as a drop shadow on a table. Problem is of course, if the table has too much data, the height becomes bigger and the image doesn't stretch the whole height of the table, so it looks goofy.

    What I would like is to find out how to write a small script so that the height of the image can dynamically be the height of the table, regardless of how long the table gets. Does anyone have any idea how to do this?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Joseph,

    This doesn't use images but perhaps it will be helpful. It worked on Win98 with Firebird and IE6 but did not work with Opera7 (haven't debugged that yet).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title></title>
    <style type='text/css'>
    body {
      color:#000; background:#fff;
      margin:0; padding:10px;
    }
    .shadow {
      position:absolute; background:#333; overflow:hidden;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function() {
    
      shadow('table1', 3, 6, 's1', 's2');
    
    }
    function shadow(e,   // element to shadow (ele ref or id string)
                    w,   // shadow width
                    ofs, // offset from edge of e
                    rs,  // right shadow id
                    bs)  // bottom shadow id
    {
      if (document.getElementById) {
        if (typeof(e) == 'string') {e = document.getElementById(e);}
        if (e) {
          var p = 'px', s = document.getElementById(rs);
          if (s && (s = s.style)) {
            s.left = (e.offsetLeft + e.offsetWidth) + p;
            s.top = (e.offsetTop + ofs) + p;
            s.width = w + p;
            s.height = (e.offsetHeight - ofs + w) + p;
          }
          else alert('right shadow ele not found');
          s = document.getElementById(bs);
          if (s && (s = s.style)) {
            s.left = (e.offsetLeft + ofs) + p;
            s.top = (e.offsetTop + e.offsetHeight) + p;
            s.width = (e.offsetWidth - ofs + w) + p;
            s.height = w + p;
          }
          else alert('bottom shadow ele not found');
        }
        else alert('ele to shadow not found');
      }
    }
    </script>
    </head>
    <body>
    
    <table id='table1' width='50%' border='1'>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
    </table>
    
    <div id='s1' class='shadow'></div>
    <div id='s2' class='shadow'></div>
    
    </body>
    </html>

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This version uses the X library. It works in Opera, Moz, Firebird, IE...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>xShadow</title>
    <style type='text/css'>
    body {
      color:#000; background:#fff;
      margin:0; padding:10px;
    }
    .shadow {
      position:absolute; background:#333; overflow:hidden;
    }
    </style>
    <script type='text/javascript' src='x.js'></script>
    <script type='text/javascript'>
    window.onload = function() {
    
      shadow('table1', 3, 6, 's1', 's2');
    
    }
    function shadow(e,   // element to shadow (ele ref or id string)
                    w,   // shadow width
                    ofs, // offset from edge of e
                    rs,  // right shadow id
                    bs)  // bottom shadow id
    {
      xResizeTo(rs, w, xHeight(e) - ofs + w);
      xMoveTo(rs, xLeft(e) + xWidth(e), xTop(e) + ofs);
      xResizeTo(bs, xWidth(e) - ofs + w, w);
      xMoveTo(bs, xLeft(e) + ofs, xTop(e) + xHeight(e));
    }
    </script>
    </head>
    <body>
    
    <table id='table1' width='50%' border='1'>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
      <tr><td>shadow</td><td>shadow</td><td>shadow</td></tr>
    </table>
    
    <div id='s1' class='shadow'></div>
    <div id='s2' class='shadow'></div>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    New Orleans
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks a lot


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •