mark110384 Posted January 27, 2009 Share Posted January 27, 2009 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 Quote Link to comment Share on other sites More sharing options...
bobleny Posted January 27, 2009 Share Posted January 27, 2009 You mean, " document.getElementById("SomeDiv").style.height = "42px"; " doesn't work? Quote Link to comment Share on other sites More sharing options...
mark110384 Posted January 28, 2009 Author Share Posted January 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
bobleny Posted January 28, 2009 Share Posted January 28, 2009 Would It be possible for you to post your code, or at least a dumb downed version of it so I can play with it? I think I may have tried something similar to that before. So it would be interesting to see what you got going on. Quote Link to comment Share on other sites More sharing options...
mark110384 Posted January 28, 2009 Author Share Posted January 28, 2009 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; image_wrapper_adjust(image_w) 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 + '%'; return; } 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. Quote Link to comment Share on other sites More sharing options...
bobleny Posted January 30, 2009 Share Posted January 30, 2009 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... <html> <head> <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]); } else { obj.addEventListener(type, fn, false); } } addEvent(window, 'resize', function(event) { var DivWidth = document.getElementById("image_holder").offsetWidth; alert(DivWidth); //alert('The page has been resized'); }); //--> </script> <title>A Title!</title> </head> <body> <div id="image_holder" style="border-style: solid;"><img src="test.png" id="i_image" /></div> </body> </html> I improvised the original alert with: var DivWidth = document.getElementById("image_holder").offsetWidth; alert(DivWidth); 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! Quote Link to comment Share on other sites More sharing options...
mark110384 Posted February 2, 2009 Author Share Posted February 2, 2009 Thanks I was able to determine the size but how can you use it to manipulate and change the width of "image_holder"? Again document.getElementById("image_holder").offsetWidth = image + 'px'; does not work. Image being the width of the image. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.