Jump to content

Width Undeffined issue on DIV


Recommended Posts

Hey guys would you know why I would be gettin a "Undefined" returned when I request the height and width of a DIV. The div contains an Image generated from PHP script, I am essentially trying to change the size of the image contain with regard to the image size. I've able to change the size of the image in acordance to the size of the browser but the width of the DIV container remains the same, but the height changes? Just any ideas why won't let me resize the DIV like have done with the image? Thanks



Link to comment
Share on other sites

Nope I'm afraid not, for example if the image is 250px and then I wan't to resize it in accordance to the size of the browser say browser is reduced to 50% size of normal size reduce the image by 50% so it will be 250px. The problem arrives with the image container, the height changes but it still holds onto the original width of image and I cant seem manipulate the width because I get Undefined

Link to comment
Share on other sites

It works on the principle that I find out the screen width using screen.Width (I also take in account for the width of the scroll bar). I pass the value of the image width on screen load to a variable in a function using something like.


var image_w = document.getElementById("i_mage").width;




I then find out the size of the browser, using client.Width and assign that to myWidth. I declare preset variables such as.


var browser_Width_50 = screenW * 0.5;


This tells me width of the browser at 50%.


if (myWidth <= browser_Width_50){

	 document.getElementById("i_mage").style.width = 50 + '%';

         document.getElementById("image_holder").style.width = 50 + '%'; 


This checks the conditions and then does performs the task if the conditions are met. But for what ever reason it looks as though the image holder is holding onto original image width. The image width is successfully changed but the holder stays the same. This is a real dumbed down portion of the coding that is used.

Link to comment
Share on other sites

lol, I forgot about you....


I think I can make it up though!


OK I think this is what you need:

var DivWidth = document.getElementById("image_holder").offsetWidth;
var DivHeight = document.getElementById("image_holder").offsetHeight;

That works perfectly for me running firefox. (What is does in IE.....)

I think It will work fine in IE though!



Also, in my searches, I stumbled across a script that you might be interested in...

    <script type="text/JavaScript">
		// addEvent function by John Resig:
		// http://ejohn.org/projects/flexible-javascript-events/
		function addEvent(obj, type, fn)
			if (obj.attachEvent)
				obj['e'+type+fn] = fn;
				obj[type+fn] = function(){ obj['e'+type+fn](window.event); }
				obj.attachEvent('on'+type, obj[type+fn]);
				obj.addEventListener(type, fn, false);

		addEvent(window, 'resize', function(event)
			var DivWidth = document.getElementById("image_holder").offsetWidth;
			//alert('The page has been resized');

    <title>A Title!</title>

	<div id="image_holder" style="border-style: solid;"><img src="test.png" id="i_image" /></div>

I improvised the original alert with:

var DivWidth = document.getElementById("image_holder").offsetWidth;

Now, instead of getting an alert that says, "The page has been resized," you get an alert that says the width of the div element.


The really nice thing about this script, is that it is active. As you resize the browser, you will get many popups. What makes that nice is it should give a more dynamic feel to the users.


Hope this helps!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.