Link to home
Start Free TrialLog in
Avatar of Sam654
Sam654Flag for Australia

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of Samuel Liew
Samuel Liew
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Sam654

ASKER

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