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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unable to call Javascript Function which written using innerHTML method.

    Hi ,

    I am inserting an image into a span tag by click on button and resize the image using resize_image_height_weight function.
    I am using two function to do this task.
    setImage
    setImage_w3Validation

    setImage function resize the image but fail on w3validation on my webpage( As per w3c there is no attribute onload for image tag.) To fix out this issue I am using setImage_w3Validation function which pass on w3validation but unable to call resize_image_height_weight function.

    My purpose is to resize the image.

    Kindly suggest me how to do it?


    <html>
    <head>
    <script TYPE="text/javascript" language="javascript">

    function resize_image_height_weight(id, hgt, wdth){
    //alert(id);
    Obj=document.getElementById(id);
    myImage = new Image();
    myImage.src = Obj.src;
    var heights = myImage.height;
    var widths = myImage.width;
    // alert("Height=>" + heights + " Width=> " + widths);

    if(heights > hgt || widths > wdth)
    {
    if(heights > widths)
    {
    var temp = heights/hgt;
    var new_width = widths / temp;
    new_width = parseInt(new_width);
    heights = hgt;
    widths = new_width;
    }
    else
    {
    var temp = widths/wdth;
    var new_height = heights / temp;
    new_height = parseInt(new_height);
    heights = new_height;
    widths = wdth;
    }
    }
    Obj.height = heights;
    Obj.width = widths;

    }

    function setImage(){
    document.getElementById("IM0").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img1\" alt=\"\" height=\"125\" width=\"125\" onload=\"resize_image_height_weight('img1',125,125);\"><\/center>";
    }

    function setImage_w3Validation(){
    document.getElementById("IM1").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img2\" alt=\"\" height=\"125\" width=\"125\"><script type=\"text/javascript\">document.getElementById('img2').onload = function(){resize_image_height_weight('i12',125,125);};<\/SCRIPT><\/center>";
    //I wanna to do the task using this one function to resize img for w3validation
    }
    function clear_page(){
    document.getElementById("IM0").innerHTML ="";
    document.getElementById("IM1").innerHTML ="";
    }
    </script>
    </head>
    <body>
    <div class="img3"><span id="IM0"></span></div>
    <div class="img3"><span id="IM1"></span></div>
    <input type="button" name="btn1" value="Image Onload W3C Fail" onclick="setImage();">
    <input type="button" name="btn2" value="Image Onload W3C Pass" onclick="setImage_w3Validation();">
    <input type="button" name="btn2" value="Clear" onclick="clear_page();">
    </body>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Do not speciify src until the onload handler is installed.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    Do not speciify src until the onload handler is installed.
    Hi Logic Ali,

    Thanks for reply.

    I am not clear what do you mean??? Could you explain in detail.


    Thanks


  •  

    Tags for this Thread

    Posting Permissions

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