Display only if overflowing... 2

[bdichiara]

I'm not sure if I should ask this in javascript or CSS but i have a DIV that displays some announcments. I have the overflow set to hidden. What I would like to happen is if the text is overflowing inside the div, then it displays a link to "see all" or something like that. but i don't want it to display if they all fit in the box. is this possible?

_______________
_brian.

 

[vbkris]

yes,

there is a concept of offsetHeight, what you should do is have a hidden DIV, load the contents into it, find the hidden DIV's offsetHeight, if that is greater than yours, then provide the link...

Known is handfull, Unknown is worldfull

 

[bdichiara]

Ok, that worked pretty good, however it doesn't address the issue of when the browser is resized. The div could be overflowing when the page loads, but if the browser is maximized, it might give it enough room to show all the content. How could I monitor this?

As for now, I ended up having to set the "checking div" to display: none after i found out it's offsetHeight, because visibility: hidden doesn't work too well in firefox and display:none returns 0 as offsetHeight. So i added this bit of script below my 2 divs:

<script type="text/javascript" language="javascript">
  myDiv = document.getElementById("checkann");
  if(myDiv.offsetHeight > 190){ //makes sure it's greater than the offsetHeight of my announcements div
    document.getElementById("overflow").style.display = '';
  }
  document.getElementById("checkann").style.display = 'none';
</script>

_______________
_brian.

 

[bdichiara]

Also, this method requires me to have 2 separate database queries and more content on the page (even though it's hidden). Is there a better way to do this?

_______________
_brian.

 

[kaht]

Is there a better way to do this?

Unfortunately there's not.....

Some changes you could make though:

1) Use the onresize event handler to recalculate the size of the box when the window is resized.

2) Try setting position:absolute on your hidden div so that it doesn't affect the layout of the rest of your page, then visibility:hidden shouldn't be a problem. If that still gives you issues, then you can set the opacity of the div to 0 so that it's transparent. Here's the styles I usually use to make it work across a wide range of browsers:

div {
   opacity:0.0;
   -moz-opacity:0.0;
   -khtml-opacity:0.0;
   filter:alpha(opacity=0);
}

I mainly only test in FF and IE, but that's supposed to work for quite a few browsers.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[vbkris]

hi bdichiara,

sorry for the late reply, kaht has given the exact solution, use absolute positioned DIVs...

Known is handfull, Unknown is worldfull

 

[bdichiara]

Thank you both for the help. It should be fine for now. I'm not exactly sure how to do the onresize event handler... I may just worry about that later, if it poses a problem.

_______________
_brian.