Fred Stluka on 18 Nov 2007 21:27:55 -0000


[Date Prev] [Date Next] [Thread Prev] [Thread Next] [Date Index] [Thread Index]

Re: [PLUG] OT: javascript


Rather than using document.write(), you can also modify the
attributes of an existing HTML element by doing something like:

    document.getElementById("resizeimage").innerHTML = "foo";
  
Or you can assign directly to the width and/or height properties
of the existing HTML element, and you can change the size each
time the user resizes the browser window, as:

<html>
 <body id='bdy' onload='resize()' onresize='resize()'>
  <img id='img1' src='afro.jpg'>
  <script>
    function resize()
    {
        var intWindowWidth  = bdy.clientWidth - 100;
        var intWindowHeight = bdy.clientHeight;
        var intImageWidth   = img1.width;
        var intImageHeight  = img1.height;
        var sglRatioWidth   = intWindowWidth  / intImageWidth;
        var sglRatioHeight  = intWindowHeight / intImageHeight;
        var sglRatio = Math.min (sglRatioWidth, sglRatioHeight);
        img1.width *= sglRatio;
    }
  </script>
 </body>
</html>

To see this page live go to:
	http://bristle.com/~fred/afro.htm
--Fred
---------------------------------------------------------------------
Fred Stluka -- mailto:fred@bristle.com -- http://bristle.com/~fred/
Bristle Software, Inc -- http://bristle.com -- Glad to be of service!
---------------------------------------------------------------------

Michael C. Toren wrote:
On Sun, Nov 18, 2007 at 07:49:56PM +0000, Jeff Abrahamson wrote:
  
Googling and reading has gotten me this far:

    http://jeff.purple.com/foo.html
      
*Sigh*.  Never mind.  I got it.

Never fails: hack and read for an hour, don't get it, post, hit send,
inspiration hits.
    

Rather than using document.write(), you can also modify the
attributes of an existing HTML element by doing something like:

    document.getElementById("resizeimage").innerHTML = "foo";

An example using that technique:

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    <html>
    <head>
    <title>_javascript_ Image Resizing Hack</title>
    <script type="text/_javascript_">
    <!--
    function main()
    {
        winH = 0, winW = 0;
    
        // "if" block to query winH and winW taken from Jeff's example
        if (parseInt(navigator.appVersion) > 3)
        {
            if (navigator.appName == "Netscape")
            {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft") != -1)
            {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
    
        }
    
        winH -= 20, winW -= 20;  // prevent scrolling
    
        if (winH > 0 && winW > 0)
        {
            document.getElementById("resizeimage").innerHTML =
                "<img src='' width=" + winW + " height=" + winH + ">"
        }
    }
    //-->
    </script>
    </head>
    <body >
    
    <div id=resizeimage><img src=''></div>
    
    </body>
    </html>
___________________________________________________________________________
Philadelphia Linux Users Group         --        http://www.phillylinux.org
Announcements - http://lists.phillylinux.org/mailman/listinfo/plug-announce
General Discussion  --   http://lists.phillylinux.org/mailman/listinfo/plug



  
___________________________________________________________________________
Philadelphia Linux Users Group         --        http://www.phillylinux.org
Announcements - http://lists.phillylinux.org/mailman/listinfo/plug-announce
General Discussion  --   http://lists.phillylinux.org/mailman/listinfo/plug