Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with resizing

    I am new to javascript so I am guessing this is a simple fix that I am just not understanding.

    I need to resize an image to make sure it is under 800px in width. The height doesn't matter, but it needs to maintain the original aspect ratio.

    I have created the following:

    <script language="javascript">


    var saveWidth = 0;

    function scaleImg(what){
    what = document.getElementById(what);
    if (navigator.appName=="Netscape")
    winW = window.innerWidth;
    if (navigator.appName.indexOf("Microsoft")!=-1)
    winW = document.body.offsetWidth;
    if (what.width>(800) || saveWidth>(800)) {
    if (what.width==(800))
    what.width=saveWidth;

    else
    {
    saveWidth = what.width;
    what.style.cursor = "pointer";
    what.width=(800);
    }

    }
    }
    </script>

    This works perfect for the width, but if an image is resized only the width changes. What do I need to add to have the height stay in line with the resized width?

    Any help would be greatly appreciated.

    An example of how it looks currently is here

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function ReSize(id,sz){
     var obj=document.getElementById(id);
     var ratio=obj.width/obj.height;
     obj.width=sz;
     obj.height=obj.width/ratio;
    }
    //-->
    </script></head>
    
    <body>
    <input type="button" name="" value="ReSize to 800" onclick="ReSize('Img1',800);" > <input type="button" name="" value="ReSize to 400" onclick="ReSize('Img1',400);" ><br>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="1200" height="800"  >
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto

    The only problem with that is I want to upload a photo, of any size, and have the initial resize to no more than 800px down automatically. Like my current script does.

    Is there a simple way to just maintain the aspect ratio?

  • #4
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Figured it out

    I figured it out, at least for my purposes:

    <script language="javascript">
    function resize(img)
    {
    if(img.width>800)
    {
    img.height = parseInt(img.height * 800 / img.width);
    img.width = 800;
    }
    }
    </script>

    The moving back to the original size onClick shouldn't be that hard.

    Thanks for the help.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var SRCAry=[];
    var Cnt=0;
    var TO;
    
    function Img(id,img,sz){
     SRCAry[Cnt]=new Image();
     SRCAry[Cnt].src=img;
     clearTimeout(TO);
     CkLoad(id,sz);
    }
    
    function CkLoad(id,sz){
     if (SRCAry[Cnt].complete){
      document.getElementById(id).src=SRCAry[Cnt].src;
      ReSize(id,sz);
     }
     else {
      TO=setTimeout(function(){ CkLoad(id,sz); },500);
     }
    
    }
    function ReSize(id,sz){
     var obj=document.getElementById(id);
     var ratio=SRCAry[Cnt].width/SRCAry[Cnt].height;
     obj.width=sz;
     obj.height=obj.width/ratio;
     Cnt++;
    }
    //-->
    </script>
    
    </head>
    
    <body onload="Img('Img1','http://www.vicsjavascripts.org.uk/StdImages/One.gif',800);" >
    <input type="button" name="" value="ReSize to 800" onclick="ReSize('Img1',800);" > <input type="button" name="" value="ReSize to 400" onclick="ReSize('Img1',400);" ><br>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=50 height=50 >
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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