image height is being returned as 0

FOr some reason the height is being returned as 0??? Can only think it's something to do with the JQuery, but it's weird.

This is my style sheet and below is the HTML/Javascript

/* Style sheet for optometrist site */
.pictureArea{ position : relative ; background-color : yellow ; height : 500px ; width : 1000px ; }
.pictureBox{ position : absolute ; top : 100px ; left : 600px ; height : 100px ; width : 100px ; border : 3px solid blue ; }
.pictureImage{ width: 300px; padding: 0.5em; }


#draggable { width: 150px; height: 150px; padding: 0.5em; }
#resizable { width: 300px; height: 300px; padding: 0.5em; }


<HTML>
<HEAD>
	<LINK href="special.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> 
	<script src="http://jqueryui.com/jquery-1.4.4.js"></script> 
	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
	<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script> 
	<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
	<script>
		$(function() {
			$( "#draggable" ).draggable();
		});
		$(function() {
			$( "#resizable" ).resizable({
				aspectRatio: resizeWidth() / resizeHeight()
			});
		});
	</script>
	<script>
		function resizeWidth() {
			var img = document.getElementById('orgImage'); 
//			var img = new Image();
//			img.src = "C:\Users\SC\Desktop\P1030642.jpg" ;
			width = img.width;
			alert( width ) ;
			document.getElementById('resizable').style.width = width ;
			return width ;
		}
		function resizeHeight() {
			var img = document.getElementById('orgImage'); 
//			var img = new Image();
//			img.src = "C:\Users\SC\Desktop\P1030642.jpg" ;
			height = img.height;
			alert( height ) ;
			document.getElementById('resizable').style.height = height ;
			return height ;
		}
	</script>
</HEAD>
<BODY>
	<DIV CLASS=pictureArea>
		<DIV id="draggable" class="pictureImage">
			<IMG id="resizable" lass="ui-widget-content" SRC="C:\Users\SC\Desktop\P1030642.jpg">
		</DIV>
		<DIV CLASS=pictureBox></DIV>
		&nbsp;
	</DIV>
	<A HREF=Javascript:resizeImage()>RESIZE</A>
	<IMG ID="orgImage" CLASS=pictureImage SRC="C:\Users\SC\Desktop\P1030642.jpg">
</BODY>
</HTML>

Open in new window

LVL 7
Sam654Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Samuel LiewCommented:

function resizeWidth() {
			var width = $('#orgImage').width();
			alert( width ) ;
			$('#resizable').css("width", width);
			return width;
		}
		function resizeHeight() {
			var height = $('#orgImage').height();
			alert( height) ;
			$('#resizable').css("height", height);
			return height;
		}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
te-eduCommented:
		function resizeWidth() {
		//	var img = document.getElementById('orgImage'); 
			var img = new Image();
			img.src = "C:\Users\SC\Desktop\P1030642.jpg" ;
			width = img.width;
			alert( width ) ;
			document.getElementById('resizable').style.width = width ;
			return width ;
		}

Open in new window


I think that you need to uncomment this two lines

mine code


	var checkImageDimension = new Image();
	checkImageDimension.src = mediaData[1];			//SET IMAGE SOURCE
	var imageWidth = checkImageDimension.width;		//GET IMAGE WIDTH
	var imageHeight  = checkImageDimension.height;	       //GET IMAGE HEIGHT

Open in new window

Sam654Author Commented:
Neither of those seem to work. I'm wondering if it's something to do with Google Chrome??? Am getting very confused.

sam2912 - Isn't the code you posted just a more direct way of writing what I had? It returns the same result, 0 for Height, let me know if you get a different result, maybe my code is good and it's something else causing the problem.
Also the links you posted, having read them I understand that the images haven't rendered yet and therefore will display 0, although I am getting the correct width property strangely.
I think the WebDeveloper one is saying use an onLoad event to get the width and height, but I can't get my head round how that will work or how to do it.
The stackoverflow stuff makes sense, but I can't get it to fire onLoad, just using the below code to try and get the alerts to show width and height again, but can't even get the first alert to show.
I'm not farmilir with $(img), is that directly referecing all image elements on the page or should img be the id of the image or something maybe?

te-edu - Not following what you're trying to do. Not getting what mediaData[1] is either.

I'm feeling like I'm a couple of steps behind, I'm very new to JQuery, this is my first attempt, although I've done normal  javascript for a while now...
var pic_real_width;
	var pic_real_height;
	img = "resizable" ;
	$(img).load(function() {
		alert( img ) ;
		// Remove attributes in case img-element has set width and height
		$(this).removeAttr("width")
			.removeAttr("height")
			.css({ width: "", height: "" }); // Remove css dimensions as well
		pic_real_width = this.width;
		pic_real_height = this.height;
		alert( pic_real_width ) ;
		alert( pic_real_height ) ;
	});

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.