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.

66 comments:

Maksym 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...

generic xanax generic xanax brand - xanax bars mg

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...

generic xanax non-prescription xanax online - buy xanax bars with no prescription

Anonymous said...

buy tramadol online tramadol online without prescriptions - tramadol addiction potential

Anonymous said...

xanax online xanax withdrawal how long - best site buy alprazolam

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...

buy tramadol online tramadol buy online no prescription mastercard - buy tramadol cheap online no prescription

Anonymous said...

buy carisoprodol carisoprodol vs metaxalone - erowid tramadol carisoprodol

Anonymous said...

buy tramadol online good place buy tramadol online - rx tramadol sr - 100 mg

Anonymous said...

generic xanax xanax pills line - xanax vicodin

Anonymous said...

carisoprodol 350 mg carisoprodol other names - 5513 dan carisoprodol drug

Anonymous said...

generic xanax generic xanax buspar - xanax drug schedule

Anonymous said...

xanax online xanax side effects pregnant women - order xanax online with mastercard

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...

xanax online xanax withdrawal success stories - xanax pills identification

Anonymous said...

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

Anonymous said...

buy cialis online buy cialis online pharmacy - cialis price south africa

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...

xanax online valor alprazolam 0 5mg - risks xanax overdose

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 tramadol hcl 50 mg for dogs - 627 tramadol high

Anonymous said...

buy tramadol online tramadol us no prescription - tramadol hcl 50 mg strong

Anonymous said...

buy tramadol cheap tramadol - tramadol ultram experience

Anonymous said...

buy tramadol india tramadol 100mg high - tramadol extended release 200 mg

Anonymous said...

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

Anonymous said...

buy tramadol tramadol overnight no prescription mastercard - tramadol hcl 50 mg canine

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...

buy tramadol tramadol 50mg zydol - tramadol for sale online no prescription

Anonymous said...

buy tramadol tramadol addiction + 2011 - side effects of tramadol 50mg tablets

Anonymous said...

buy tramadol buy tramadol online no prescription cheap - tramadol hcl contraindications

Anonymous said...

ways to buy ativan online dosage of ativan vs xanax - ativan dosage guidelines

Anonymous said...

ways to buy ativan online lorazepam 1mg tab ran - lorazepam-ratiopharm 1mg beipackzettel

Anonymous said...

buy ativan online 70 mg ativan - dosage of ativan

Anonymous said...

buy xanax online xanax jaw clenching - xanax 2mg sale

Anonymous said...

http://staam.org/#50589 buy tramadol in missouri - tramadol hcl solubility

Anonymous said...

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

Anonymous said...

http://ranchodelastortugas.com/#30416 xanax overdose signs - xanax withdrawal symptoms in newborns

Anonymous said...

buy tramadol online mexican tramadol 100mg - tramadol kratom

Anonymous said...

http://ranchodelastortugas.com/#37284 xanax jewelry - xanax anti anxiety meds

Anonymous said...

http://ranchodelastortugas.com/#58720 xanax withdrawal from .25 - xanax dosage mg

Anonymous said...

where can i buy xanax online xanax high like weed - xanax withdrawal symptoms length

Anonymous said...

http://ranchodelastortugas.com/#50698 xanax urinalysis - xanax side effects urination

Anonymous said...

http://ranchodelastortugas.com/#58720 buy xanax canada - buy xanax dogs

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/prosolution][img]http://my.moverapid.com/promo.gif[/img][/url]





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

Anonymous said...

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





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

Anonymous said...

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





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

Anonymous said...

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





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

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]

Subscribe in a Reader