Javascript error: Object required...tough time fixing this

Question

The situation is this: a friend of mine asked me to help her with a website she's working on called www.KeepsakePartyInvitations.com. Her original designer created this code but didn't finish the project. So here I am to help save the day.

Now, once a photo has been added to the party template and the mouse is placed over the image, an alternate text message appears to the right. The message informs the visitor how to reposition and resize the image, if necessary.

I'm testing the procedure in the invitation to reposition the image. I follow the directions about moving the picture, but the mouse does not let go of the photo. Where ever the mouse moves, so does the image. The same thing occurs if you want to resize the image, you follow the directions but the image does not resize.

I check the error message in IE 8 and it states:

Message: Object required Line: 873 Char: 3 Code: 0 URI: http://www.keepsakepartyinvitations.com/Includes/JCode.js

When I checked the Javascript file, the Line 873 states:

    tempX = e.clientX + document.body.scrollLeft

If you review the javascript file, the function where the line is located is called: function getMouseXY(e).

Please help me, it has been a long while since I've worked with Javascript and I'm motivated to get this fixed. Thank you!

Answer 1

I don't think document.body has scrollLeft property in strict mode

however, which doctype are you using? I'm asking this because the usage of document.body.scrollLeft and document.documentElement.scrollLeft depends on the doctype. you can't just add them together on the same line

I would rewrite your code

tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

as

tempX = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
tempY = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

and of course, check for other such instances in your code