Cannot reference image id javascript

Question

I have a PHP page displaying a bulletin, and an image is embedded in the text. I added the simplified code here. Problem is that when I attempt to change the size of the image, DOM cannot reference the image. In the actual file, if I freshly load the page, the image cannot be referenced, but if I navigate back to it (using a date selector), all of the sudden the Javascript resizing works just fine. Just does not work the first time the image is loaded.

function resizeImg () {
        var w=document.getElementById("textImg").width;
        var h=document.getElementById("textImg").height;
        alert(h+" "+w);
        if (w>300 || h>300) {
            if (w>300) {
                var factor=((300/w));
            } else {
                if (h>300) {
                    var factor=((300/h));
                }
            }
            w*=factor;w=Math.round(w);
            h*=factor;h=Math.round(h);
            document.getElementById("textImg").style.width=w+"px";
            document.getElementById("textImg").style.height=h+"px";

        }
    }//end FUNCTION

HEADER:

<?php 
    $pic="20130213.gif";
    $blText="Yes, you heard right. Thats all we are going to have for dinner. Why?  because cream of corn is good when you put sugar in it, with some pepper and butter. So, quit your complaining and eat the slop.";
?>

HTML:

<body>
   <div id="bullText" class="tBorder">
        <div class="tBorder" id="bullTextArea">
        <?php 
            $file="../../Admin/aPages/upload/".$pic;

            echo "<img id='textImg' class='textImage' src='".$file."' alt='no image' />";
            echo $blText 
        ?>

        </div>
    </div><!--BULL TEXT DIV-->
    <?php
        echo "<script>resizeImg ()</script>";
    ?>
</body>

Do you have a working copy of this script anywhere? Also why are you echoing out the script and resizeImg function at the end? Why not just leave it as HTML? — BBagi, Feb 16 '13 at 22:41
possible duplicate of [this code gives 0 as height and width for the first time it iterates and the second time gives the right dimensions](http://stackoverflow.com/questions/11547180/this-code-gives-0-as-height-and-width-for-the-first-time-it-iterates-and-the-sec) — JJJ, Feb 16 '13 at 22:42
RuralJuror: I ws just trying everything. There is no reason why I tried it...just desperation? I don't have a working copy of the script anywhere but on my computer. The above is copy-paste from a small test file I made...and it is does not work. The only part I forgot to put in was the $pic and $blText variables which were initialized in the header: — user1973630, Feb 16 '13 at 22:58

score 1 · Answer 1 · answered Feb 16 '13 at 22:45

1

You'll probably need to wait for the image to load:

el = document.getElementById("textImg");

if (el.addEventListener){
  el.addEventListener('load', resizeImg, false); 
} else if (el.attachEvent){
  //IE uses attachEvent
  el.attachEvent('onload', resizeImg);
}

before that you should to wait for DOM ready, or else document.getElementById may find nothing.

answered Feb 16 '13 at 22:45

LessQuesar

3,123
1
21
29

You're right about having to wait for the image to load. But in this case it's not necessary to wait for the DOM to load, since the function call is after textImg in the markup. – bfavaretto Feb 16 '13 at 22:47

score 0 · Answer 2 · answered Feb 16 '13 at 22:41

0

have you tried putting your js code in window.onload ?

answered Feb 16 '13 at 22:41

srosh

124
1
3

This should be a comment, not an answer! – bfavaretto Feb 16 '13 at 22:44
oops forgot I have comment privileges now – srosh Feb 16 '13 at 22:45
I am not sure what this will do. I think it is a problem with the code running before the actual image is loaded, hence not in DOM. I will try it though. – user1973630 Feb 16 '13 at 22:55
sure yeah, always make sure DOM is loaded – srosh Feb 16 '13 at 23:36

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

-1

(jsFiddle solution)

The problem here is that you're trying

var w=document.getElementById("textImg").height;

But this only works when you're setting the height yourself. Otherwise you need to use one of the following:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight includes the height and vertical padding.

offsetHeight includes the height, vertical padding, and vertical borders.

scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

source: Getting the height of an element

Same for width, of course.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 16 '13 at 22:54

Roy

1,307
1
13
29

It is now working without these changes. I can get height and width just the way it was, FYI. I just used window.onload= with the function. – user1973630 Feb 16 '13 at 23:09
I'm not sure that's cross-broser. As you can test in the jsFiddle, trying to use only height without offsetheight will give an undefined value. It might be happening in different browsers as well. – Roy Feb 17 '13 at 08:41

Cannot reference image id javascript

3 Answers3