react to CSS overflow

Forum Moderators: open

Message Too Old, No Replies

react to CSS overflow

div2 different style if content overflows div1

monie

12:04 pm on Jun 10, 2010 (gmt 0)

Hi,
I have a bunch of divs with overflow:hidden; and max-height:300px;. Should any div foo have enough content that it's cropped off, I would like a link to appear beneath it, but not otherwise.

What's the easiest way to do this? (I know some javascript and am venturing into php.)

my thoughts:
1. Is there a way to attach a function to overflow, as long as it returns a value? For example,
overflow:"javascript('foo()')";

2. The divs have a set max-height and expand vertically with more content, so perhaps I could say that if(height == max-height) then div has overflowed. That seems hacky.... Is there a better way to detect an overflow?

3. Rather than javascript, would php be of any use in this case? I grab each div's content using php.

Thank you!

subexpression

7:41 pm on Jun 10, 2010 (gmt 0)

monie,

First, I created a CSS class for the overflow divs.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 
<head> 
 
<style type="text/css"> 
.lorem { 
 width:200px; 
 height:100px; 
 overflow:hidden; 
} 
</style>

By changing the width and height in the .lorem class, you can trigger the overflow event manually...just to see how it works.

Then, I created the "content" object which handles classnames, the event listener, and the overflow methods.


<script type="text/javascript"> 
var content = new function(){ 
 var self = this; 
 self.util = { 
 // DOCUMENT DOT GET ELEMENTS BY CLASS NAME 
 'ddgebcn': function(classname,tagname){ 
 var classarray = []
; 
 var rx = new RegExp('^'+classname+'$'); 
 var el = document.getElementsByTagName(tagname); 
 for (var j = 0; j < el.length; j++){ 
 var classes = el[j].className; 
 if(rx.test(classes)){ 
  classarray.push(el[j]); 
 } 
 } 
 return classarray; 
 } 
 }; 
 self.event = { 
 'ev': '', 
 'etarget': '', 
 'addevent': function(eventtype,obj,method){ 
 try { 
 if(obj.addEventListener){obj.addEventListener(eventtype,method,true);} 
 else if(obj.attachEvent){obj.attachEvent('on' + eventtype,method);} 
 else {return false;} 
 }catch(err){} 
 return true; 
 } 
 }; 
 self.overflow = { 
 'divs': [], 
 'load': function(divclass){ 
 this.divs = self.util.ddgebcn(divclass,'div'); 
 for(var j = 0; j < this.divs.length; i++){ 
 self.event.addevent('overflow',this.divs[j],this.overflow); 
 } 
 }, 
 'overflow': function(e){ 
 if(e.type == 'overflow'){ 
 switch(e.detail){ 
  case 0: 
  alert('Vertical content clipped and hidden.'); 
  break; 
  case 1: 
  alert('Horizontal content clipped and hidden.'); 
  break; 
  case 2: 
  alert('Vertical and Horizontal content clipped and hidden.'); 
 } 
 } 
 } 
 }; 
}; 
window.onload = function(){ 
 content.overflow.load('lorem'); 
} 
</script> 
 
</head>

Then, the div(s) of course. You can have any number of them as long as they have the same classname.


<body> 
 
<div class="lorem">Lorem ipsum dolor sit amet, consectetur  
adipisicing elit, sed do eiusmod tempor incididunt ut labore  
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  
exercitation ullamco laboris nisi ut aliquip ex ea commodo  
consequat. Duis aute irure dolor in reprehenderit in voluptate  
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  
sint occaecat cupidatat non proident, sunt in culpa qui  
officia deserunt mollit anim id est laborum.</div> 
 
</body> 
 
</html>

This demonstrates how you can capture the overflow event and make use of the event details.
I wrote this with the sole intention of showing how you can capture overflow events...not create a fully-functioning script ready for the web. You can use it and modify it as you like.

However, there are jQuery plugins which can limit the number of text characters in a div, truncate them, and then render a "more" or "less" link to expand and collapse...revealing more or less text.

If you're curious about this, then just go to your favorite search engine, and look up:
'jquery truncate text more link'

- s

subexpression

9:51 pm on Jun 10, 2010 (gmt 0)

edit:

In the 'load' method, the for() loop has a mistake.


for(var j = 0; j < this.divs.length; i++){

should be...


for(var j = 0; j < this.divs.length; j++){

I use j's for indexes, since an array with an i index in brackets [ ] is converted to a forum code for italic text.

I simply forgot to change the incrementer from i to j

monie

3:54 am on Jun 13, 2010 (gmt 0)

subexpression,
Sorry I didn't reply earlier (I was traveling.) Thank you very much for your response! It looks super helpful, exactly what I was hoping for. I'm going to play around with the code you provided, then check out what I can do with jquery.