Getting width in pixels of a div.

[dpacmittal]

I have set a div's width to 100% in CSS.

 

A text is being injected into the div using Javascript. I want to find out its width in pixels using Javascript. How can I do that?

 

offsetWidth isn't helping. It returns 0 value.

[gevans]

If you use a library such as jquery it can be really easy;

 

$(document).ready(function(){
    var width = $("#your-div").width();
});

[dpacmittal]

I am not using any library.

[gevans]

In which case, a google serach's first result gave me this;

 

var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;

[Psycho]

In which case, a google serach's first result gave me this;

 

var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;

 

That will only work if you specify a width using style properties first. Try this:

 

document.getElementById("mydiv").offsetWidth

[gevans]

offsetWidth isn't helping. It returns 0 value.

 

That was his original problem, which is why I tried to elave offsetWidth out of it

 

Though you are very right about .width only working with a specified width. Been using jquery to long!

[Psycho]

Ah, yes. I lost focus when reading through the posts. I tried offsetWidth in both IE and FF and it worked. But, in some code snippets I have there was also use of clientWidth. I had assumed that both were needed for compatability issues, but I typically only test in IE & FF initially. So maybe something like this would work better:

 

    var divObj = document.getElementById(divId);
    var divWidth = divObj.offsetWidth || divObj.clidsadentWidth;

[dpacmittal]

Nothing works.

 

I've already tried everything mentioned here.

 

This is my markup:

<div id="sb-container">
                    <div id="sb-overlay"></div>
                    <div id="sb-wrapper">
                        <div id="sb-title">
                            <div id="sb-title-inner"></div>
                        </div>
                        <div id="sb-body">
                            <div id="sb-body-inner"></div>
                            <div id="sb-loading">
                                <a onclick="Shadowbox.close()">{cancel}</a>
                            </div>
                        </div>
                        <div id="sb-info">
                            <div id="sb-info-inner">
							<div id="ads">
							<iframe src="http://www.timepass247.com/mylife/adsense.php?e=encodeURI(excerp) + " frameborder="0" scrolling="no"></iframe>
							</div>
							<div id="sb-counter"></div>
                                <div id="sb-nav">
                                    <a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>
                                    <a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a>
                                    <a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a>
                                    <a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a>
                                    <a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a>
                                </div>
                                <div style="clear:both"></div>
                            </div>
                        </div>
                    </div>
                </div>

 

This is the script:

if(alternateCode!="")
document.getElementById('ads') = '<p>' + alternateCode+ '</p>';

alert(document.getElementById('ads').offsetWidth);

 

The alert shows 0.

In CSS, I've mentioned the width as 100%. So. style.width give 100%.

 

Now that you have a clearer picture, can you tell me how to find its width.

[Psycho]

Well, I mocked something together using the code you have above, and it works for me. But, I commented out the first two lines of javascript as it had nothing to do with finding the width of the div. I suspect that is where the problem lies. This line will generate an error:

 

document.getElementById('ads') = '<p>' + alternateCode+ '</p>';

 

 

That line is setting the "object" to a string value. I think you mean to do this:

 

document.getElementById('ads').innerHTML = '<p>' + alternateCode+ '</p>';

 

 

If there are errors please post them, we can only help based upon the information provided

[dpacmittal]

Oops.. That was a type. I have put innerHTML in my code.