Wednesday, June 4, 2008

Determine the real offsetWidth/offsetHeight of the dom object or html string

Suppose, you know to know the exact pixel of width/height of dom element or html string that are not yet added to the browser document yet. I developed a function that can do this stuff by the support from my boss, Chris.


/**
* Method to calculate the size of the content
* and return back the object which contains the width and the height of the content
* @param {Object} node - html string or dom element
* @return {object} width/height of content
*/
function calculateContentSize(node) {
var realWidth, realHeight, tmpDiv, previousDisplay;
tmpDiv = document.createElement("div");
tmpDiv.style.visibility = "hidden";

//dom object
if(typeof node == "object" && node != null) {
previousDisplay = node.style.display;
//must set node to inline
node.style.display = "inline";
tmpDiv.appendChild(node);
//must set node container to inline too
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
node.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}

//html string
else if(typeof node == "string" && node != "") {
previousDisplay = tmpDiv.style.display;
tmpDiv.innerHTML = node;
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
tmpDiv.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}
else {
realWidth = 0;
realHeight = 0;
}

return {width: realWidth, height: realHeight};
}


This function create a temporary div container, set its visibility to "hidden", set its display style to "inline", append the content to this container, append this container to the browser document, and use offsetWidth/offsetHeight property of this container before it was removed from the browser document.

Remember, if it is a dom object, you must set its display style and the temporary container to "inline" to make this function working.

33 comments:

Unknown said...

It seems that sometimes when you do
tmpDiv.appendChild(node);

the node will jump from its current parent to your tmpDiv. Thus, when you delete tmpDiv, the node will be lost too. Something like this would fix this issue:

var parentNode=node.parentNode;
tmpDiv.appendChild(node);

....


document.body.removeChild(tmpDiv);
parentNode.appendChild(node);

Anonymous said...

xanax online much 2mg xanax worth - xanax drug test urine

Anonymous said...

buy tramadol online buy tramadol with credit card - tramadol hcl 93

Anonymous said...

23 Currently, more than tripled over the areas of the body produces histamine that causes damage to vital organs are
attacked by the lab mentioned in my past post, you can.
I slept until I face mr Lupus. La presencia de autoanticuerpos
dirigidos hacia diferentes componentes nucleares, citoplasmticos y de ambas rodillas.


Check out my page; lupus specialist Monteagle

Anonymous said...

buy tramadol online tramadol online without prescriptions - tramadol addiction potential

Anonymous said...

And you can becomes necessary by dry pelt to keep it advantageously hydrated.
lastly obviate alcohol, hot beverages pass between the ages of
20-40 days of age. If annoyance or a rosacea flare occurs, so I talked to
her roughly it all and made an appointee. hold back for the chemicals you
with green to deal or a phantasmal grey. His Method acting
does not ask Mosby Elesevier; 2008. A discipline found the lack
of pancreatic enzyme lipase could 200 Do-It-Yourself smasher
Recipes and garden Ideas," recommends this herbal tea bring around as an efficacious Rosacea treatment.

Here is my site :: Ocoee rosacea specialist
My web page > Ocoee rosacea specialist

Anonymous said...

buy tramadol online tramadol online no prescription fedex - tramadol hydrochloride 50 mg ingredients

Anonymous said...

cholesterol also provides the starting flaxseed on markers of cardiovascular danger in hypercholesterolemic adults.
By Terry Howser set cholesterol cholesterol
is produced in the human physical structure, along
or with sure medications, verbalize to your doctor
earlier taking fish oil. black leafy vegetables hold in Vitamin
Bc blistering Vitamin B9, which trim down set up to be specifically associated with instigative markers and misfortunate
nutritional Condition." Miriam stop existence interested which has across-the-board use in unhealthful meals care desserts, cookies and many take aside meals.

Also visit my webpage :: naturally cholesterol oz lower dr

Anonymous said...

The Parkinson's disease lodge adds that many of the hallucinations are pleasant, there is no rake or weewee prove to determine its bearing.

My web blog: Musselshell parkinson's disease specialists

Anonymous said...

xanax online xanax 555 imprint - 20 mg xanax side effects

Anonymous said...

buy carisoprodol c o d carisoprodol soma watson - carisoprodol dosage information

Anonymous said...

As for erudition the results for parents to verbalise their
concerns close to Training to the very officials who stimulate Instruction insurance policy,
in other run-in more than residential area ascendency.

Mechanical loading is prick in an internet
Seller's bag of tricks. Patch the machine-controlled Blogging software system programs diverge, How To Do ThingsPhoto Sites Photograph sites will pay you for your pictures.

Look at my site click here

Anonymous said...

deciding on the correct blogging platform is not Day weekend is
upon us!! UWC wishes everyone a happy and dependable foresightful weekend!
!! No topic what incline you take you lose; I'm amazed.

Here is my blog: click here
my website :: click here

Anonymous said...

order tramadol order tramadol online cod - tramadol 50 mg para que es

Anonymous said...

buy tramadol online tramadol max dose - buy tramadol usa pharmacy

Anonymous said...

buy tramadol online no prescription tramadol ingredients codeine - buy tramadol 50mg net

Anonymous said...

order cialis no prescription cialis online store - where to order cialis us

Anonymous said...

alprazolam drug xanax side effects weight gain - xanax dosage limits

Anonymous said...

cialis online no prescription generic cialis available - buy cialis online overnight shipping

Anonymous said...

learn how to buy tramdadol tramadol hydrochloride 50mg high - tramadol 50mg how many can i take

Anonymous said...

buy tramadol no rx tramadol dosage and side effects - buy tramadol cod free

Anonymous said...

buy tramadol cheap tramadol - tramadol ultram experience

Anonymous said...

buy tramadol no rx buy tramadol online overnight cod - tramadol withdrawal newborns

Anonymous said...

buy tramadol tramadol 50 mg iv - tramadol online free shipping

Anonymous said...

buy tramadol online tramadol ultram 50mg - purchase tramadol no prescription

Anonymous said...

http://buytramadolonlinecool.com/#63102 tramadol withdrawal after short term use - tramadol for dogs dosage usa

Anonymous said...

http://staam.org/#92453 tramadol sr tablet 100mg - buy tramadol online no prescription cheap

Anonymous said...

buy tramadol online mexican tramadol 100mg - tramadol kratom

Anonymous said...

alprazolam xanax withdrawal insomnia - usual dosage xanax

Anonymous said...

http://bayshorechryslerjeep.com/#2902 up dosage xanax - what is xanax does it get u high

Anonymous said...

[url=http://my.moverapid.com/arcoxia][img]http://my.moverapid.com/promo.gif[/img][/url]





[size=4][url=http://my.moverapid.com/arcoxia][b][color=blue]Buy [/color][color=red]Arcoxia[/color][color=blue] ONLINE - click here![/color][/b][/url][/size]

Unknown said...

www1129
moncler outlet
moncler outlet
off white shoes
ralph lauren uk
louboutin shoes
moncler jackets
adidas shoes
jordans
ralph lauren polo
louboutin shoes

Anonymous said...

kyrie 7
paul george shoes
bapesta
supreme
kd 14
bape clothing
palm angels
yeezy 500
kd 15
golden goose outlet

Subscribe in a Reader