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 6 of 6

Thread: Variable Issue

  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Variable Issue

    I am having an issue with a variable I am getting from a javascript function. Randomly it will appear to find the height of the image I told it to find to be 0, which to me doesn't make sense. The code is meant to pull the size of the main image, then set navigation arrows to either side at the right height. The Function is first with the call of the function later. I left out the url, but otherwise, this is the only code that would be used.

    Any Help is greatly appreciated...

    This is the function located in the header:
    Code:
    <script type="text/javascript">
    	function arrowHeight(a){
    		var img = new Image();
    		img.src = a;
    		var divh = img.height;
    		var calc = (divh/2)-25;
    	
    		return calc;
    	}
    </script>

    This is the code called later in the code:
    Code:
    <script language="javascript">
    	var a = arrowHeight(".../img0001.jpg");
    	document.write ("<a href='.../img0010.php'><img src='.../left.png' style = 'position: relative; right: 20px; bottom: " + a + "px;'/></a>");
    	document.write ("<img src=.../img0001.jpg' />");
    	document.write ("<a href='.../img0002.php'><img src='.../right.png' style = 'position: relative; left: 20px; bottom: " + a + "px;'/></a>");
    </script>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Simple. The image hasn't finished loading at the point in time you try to get the height.

    Here, try this code:
    Code:
    <html>
    <head>
    <script>
    function foo()
    {
        var i = new Image();
        i.src = "http://www.juncojunction.com/juncojunction/genealogy/KepnerFamilyReunion1901.jpg?t=111"
        alert(i.height);
        return i.src;
    }
    </script>
    </head>
    <body>
    <script>document.write('<img src="' + foo() + '" onload="alert(this.height);"/>');</script>
    </body>
    </html>
    See?? The image is quite large, so it won't be loaded by the time the alert() tries to show its height. But if you wait for the onload event from the image, *now* it is there.

    You need to restructure your code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Example:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    fixup(image)
    {
    
        document.getElementById("ILEFT").style.bottom =
        document.getElementById("IRIGHT").style.bottom =
            Math.floor( (image.height/2) - 25 ) + "px";
    }
    </script>
    <style type="text/css">
    img.ILEFT {
        position: relative; right: 20px; bottom: 0px;
    }
    img.RIGHT {
        position: relative; left: 20px; bottom: 0px;
    }
    </head>
    <body>
    
    <a href='.../img0010.php'><img id="ILEFT" src='.../left.png' /></a>
    <img src=.../img0001.jpg' onload="fixup(this);" />
    <a href='.../img0002.php'><img id="IRIGHT" src='.../right.png' /></a>
    
    </body>
    </html>
    If you can give a better guesstimate for bottom than 0, do so. Then let it get fixed up as soon as the main image is indeed fully loaded.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I understand what I was doing wrong, thanks for that.

    The problem is I am new to javascript, so I am still missing something. I used your code and it doesn't seem to be executing the onload, It never executes fixup.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Dunno what to tell you. This similar sample works for me. Try it yourself.

    Code:
    <html>
    <head>
    <script>
    function fixup(image)
    {
        // moves the thumbnail to the right proportionate to the height of main pic
        document.getElementById("SMALL").style.marginLeft = (image.height/2) + "px";
    }
    </script>
    </head>
    <body>
    <img src="http://www.juncojunction.com/websize/SnohomishBalloons.jpg" 
         alt="big picture" onload="fixup(this);" />
    <img id="SMALL" src="http://www.juncojunction.com/thumbs/th_SnohomishBalloons.jpg" />
    </body>
    </html>
    You might put an alert("here") in your fixup() to find out if it's getting there.

    Does the main image fully load???

    I noticed a missing apostrophe in the code there:
    Code:
    <img src=.../img0001.jpg' onload="fixup(this);" />
    See? after the src= there's no apostrophe.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Jacaar (05-04-2010)

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    lol, so it was definitely my fault, had an extra semi colon, thanks again Old Pedant, I greatly appreciate it.


  •  

    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
    •