Save on Delicious

How to take div height from javascript when div element height is auto

Posted on by Wordpress API

Many times we need to get the div or any DOM elements height and width when these properties not defined.

Lets say I kept div height auto and width as 200px fix and data is dynamic for eash user. So how we can get the div height.

We can use two javascript functions for fetching the div height.
1. offsetHeight – this will return the value which are specified in your CSS

2. clientHeight – this function will return real inner height of element that does not matter about CSS.
I recomend to use this function.

Exmaple code as follows:

<style>
#wordpressapidiv{ width:200px; height:auto;border:#ccc 1px solid}
</style>
<div id=\"\wordpressapidiv">
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.

This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content.
</div>

<script>
function getDivHeight(divID){
gd = document.getElementById(divID).clientHeight;
alert(gd);
}

function getDivWidth(divID){
gw = document.getElementById(divID).clientWidth;
alert(gw);
}

</script>

<input name="test" type="button" onclick="getDivHeight('wordpressapidiv')" >

Function above code you can fetch the div height and width using the javascript.

Incoming search terms:

You may like following Articles!

This entry was posted in JavaScript and tagged by Wordpress API. Bookmark the permalink.

About Wordpress API

API means Application Program interface. In Wordpress API we are giving all the information about wordpress API. We worked for many wordpress plugins and themes. We have expertise in PHP, Databases, Graphic Design, Ruby on Rails, Java, Wordpress, Drupal and many CMS. We always give you the best solutions about wordpress and other related topics in This Blog. We will give you always fresh tips and tricks and techniques about wordpress in this blog.

76 thoughts on “How to take div height from javascript when div element height is auto”

  1. Pingback: Xbox 360 Console Repair Convert Unable Xbox In Workable Console | Xbox 360 Pro Bundle

  2. Pingback: Underdog NY makes finalist list for Race to the Top | Paperless Media

  3. Pingback: Fully Managed Windows Dedicated Server Hosting | Dedicated Website Hosting Info

  4. Pingback: What Marie Osmond’s son wrote in suicide note | Paperless Media

  5. Pingback: Was spricht gegen Billigwelpen ?

  6. Pingback: Smoking Hot Blonde Veronika | Porry Babes

  7. Pingback: Veronica Ricci | Porry Babes

  8. Pingback: Intense Butt and Legs – Workout | Waist Belt , waist-belt.com

  9. Pingback: Factory Outlets Shopping| Australia’s largest “Only Online” bargain shopping megastore. | Its Da Cinch

  10. Pingback: SanDisk Sansa Clip 2 GB MP3 Player (Black) | Bestsellers in Electronics Reviews

  11. Pingback: i m a gal 19 yrs yr old gal. i m weghing 68kgs.plz suggest some methods for fat loss? | Buy Fat Loss 4 Idiots

  12. Pingback: Speed, Long Tail… | JimRGraham.com

  13. Pingback: Apolo Ohno’s Olympic Workout | Waist Belt , waist-belt.com

  14. Pingback: Get Your own search site for FREE to Earn Commissions | Trace Lost Relatives.com

  15. Pingback: Jessica Simpson opens up about weight, John Mayer on ‘Oprah’

  16. Pingback: Hot Abs Workout Abs | Mens Fitness Health

  17. Pingback: Vibram Five fingers Review

  18. Pingback: Auto Content Cash – Content For Automated Cash? | Alex Goad Auto Content Cash

  19. Pingback: Jrue Holiday Workout: Sacramento Kings NBA Draft 2009 | Mens Fitness Health

  20. Pingback: Enhance and Advance Your Career with an Online MBA Degree by eLearners.com

  21. Pingback: 2-14-10 Tormentos.wmv | Cozumel Blog

  22. Pingback: Work from home online!

  23. Pingback: does anyone have or have heard of the skin disorder utecariapigmentosa bc i have that i was wandering if anyo? | Health Concerns

  24. Pingback: Dance Fitness Workout for Beginners Tahitian Hip Hop DVD | Waist Belt , waist-belt.com

  25. Pingback: What are some effective ways to lose fat, not weight? | Buy Fat Loss 4 Idiots

  26. Pingback: lose weight? | Buy Fat Loss 4 Idiots

  27. Pingback: Weight loss? | Buy Fat Loss 4 Idiots

  28. Pingback: Information on a Fireplace Vacuum

  29. Pingback: Easy Slipper Knitting Patterns Are Great For Beginners

  30. Pingback: Velcro Bedroom Slippers

  31. Pingback: educational toys electronic kits circuit | Hottest Holiday Toys

  32. Pingback: UK’s economic recovery ‘is under threat’ – Telegraph.co.uk | Forex Megadroid System

  33. Pingback: best systems of psych for understanding and development? | Personal Development Guide

  34. Pingback: 1967 DODGE DART GT $15,995 |

  35. Pingback: unique green couture | Terry Cloth Couture

  36. Pingback: uberVU - social comments

  38. Pingback: Beach Wedding | Wedding Planning

  43. Pingback: My Blog Title

  45. You’ve certainly been really exceptionally on the run helpful hints off any of this amazing weblog, In your own home highly intriguing which you can understand. Can’t have to wait to see remedies produce within the up coming times. Believed mass pm would for your massive testimony, however , Fan genuinely supporting this excellent website, furthermore intention this advice, too as the excellent evaluations most other persons showed, usually support you have to choose if it turns out it’s unquestionably the proper option for you. May be the greatestthing.

    Reply ↓

  48. would it be possible to translate your website into spanish because i have difficulties of speaking to english, and as there are not many pictures on your website i would like to read more of what you are writting

    Reply ↓

  55. Help!!!! Neither of the 2 properties clientHeight and offsetHeight works for me! Could some one suggest any alternatives to find out the height of a div dynamically? Thanks a ton in advance.

    Reply ↓

  56. Hi all,
    I have to show a div onmouseover of an icon. It does get shown up, but in the bottom, so am unable to see the content. How do I format the div so that the div shows up right next to the icon itself? P.S. The div is actually a label created by a certain Label.js file. Could someone help me asap with this please? Thanks a ton in advance.

    Reply ↓

  59. Nice post! You truly have a wonderful way of writing which I find captivating! I will definitely be bookmarking you and returning to your blog. In fact, your post reminded me about a strange thing that happened to me the other day. I’ll tell you about that later…

    Reply ↓

  73. Nice post! You truly have a wonderful way of writing which I find captivating! I will definitely be bookmarking you and returning to your blog. In fact, your post reminded me about a strange thing that happened to me the other day. I’ll tell you about that later…

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>