How to use JavaScript to show/hide an element based on its parent's dynamic height?

StackOverflow https://stackoverflow.com/questions/17636274

Question

I'd like to show an absolutely-positioned element (a "read more" link) when its parent container's computed height goes over 336px due to dynamic content. The read more link's grandparent container has a set height of 336px and hidden overflow. I have a class I'd like to add to the read more link that will change it from display: none to display: block. I'm new to JS so I'd appreciate any help.

http://jsfiddle.net/sueanna/FHhMG/

<style>

body {font-family: arial; font-size: 16px;}

p {line-height: 24px; margin:0 0 24px;}

span {display: none; background: #fff;  bottom: 0; line-height: 24px; position: absolute; width: 100%;}

.foo {display: block;}

.frame {height: 336px; overflow: hidden; position:relative;}

</style>

<div class="frame">
<div class="content">
<p>
Wonder Woman is a fictional DC Comics superheroine 
created by American psychologist and writer William Moulton Marston. 
She first appeared in All Star Comics #8 (December–January 1941). 
The Wonder Woman title has been published by DC Comics almost continuously 
except for a brief hiatus in 1986.[1] Her depiction as a heroine 
fighting for justice, love, peace, and sexual equality has also 
led to Wonder Woman being widely considered a feminist icon.
</p>

<p>
During the Silver Age, under writer Robert Kanigher, Wonder Woman's
origin was revamped,[19] along with other characters'. 
The new origin story increased the character's Hellenic and mythological 
roots: receiving the blessing of each deity in her crib, Diana is 
destined to become "beautiful as Aphrodite, wise as Athena, as 
strong as Hercules, and as swift as Hermes."
</p>

<span>read more</span>
</div>
</div>

Thanks,

Sue

Was it helpful?

Solution

Here you go http://jsfiddle.net/FHhMG/1/

<script>
  function load(){
    if (document.getElementById("readMore").parentNode.offsetHeight > 336){
        alert("hi");
        //document.getElementById("readMore").className = "MyClass" 
    }
  }
</script>
<body onload="load()">
<div class="frame">
<div class="content">
<p>
Wonder Woman is a fictional DC Comics superheroine 
created by American psychologist and writer William Moulton Marston. 
She first appeared in All Star Comics #8 (December–January 1941). 
The Wonder Woman title has been published by DC Comics almost continuously 
except for a brief hiatus in 1986.[1] Her depiction as a heroine 
fighting for justice, love, peace, and sexual equality has also 
led to Wonder Woman being widely considered a feminist icon.
</p>

<p>
During the Silver Age, under writer Robert Kanigher, Wonder Woman's
 origin was revamped,[19] along with other characters'. 
 The new origin story increased the character's Hellenic and mythological 
 roots: receiving the blessing of each deity in her crib, Diana is 
 destined to become "beautiful as Aphrodite, wise as Athena, as 
 strong as Hercules, and as swift as Hermes."
</p>

<span id="readMore">read more</span>
</div>
</div>
</body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top