Jump to content


Photo

From overflow: hidden to fit text height


  • Please log in to reply
2 replies to this topic

#1 Silvar

Silvar

    Member

  • Members
  • PipPip
  • 28 posts

Posted 22 January 2013 - 04:24 PM

Okay, I'm using jquery because I have a site with some items that got a + and a - When I click plus I use jquery animate(height) to open the div and when i click minus, it goes back to normal height.
I'm using the function right now where it sets the height of the container to 250px, and everything works.
But when the item expands, I want the height of the <div> to fit the text.
The parent got "overflow: hidden" and the inside div got full height underneath, but is hidden because of overflow property.

So we want this overflow:hidden; div to not hide the overflow, but fit the text.

Heres my jQuery code:
<script type='text/javascript'>
$(document).ready(function() {
var open = false;
$('#plusminus<?php echo $i; ?>').click(function() {
if (open) {


$('#item<?php echo $i; ?>').animate({height:'80px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/plus.png');
} else {


$('#item<?php echo $i; ?>').animate({height:'250px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/minus.png');
}
open = !open;
});
});
</script>

How do I fix this?

Edited by Silvar, 22 January 2013 - 04:24 PM.


#2 BagoZonde

BagoZonde

    Advanced Member

  • Members
  • PipPipPip
  • 69 posts

Posted 29 January 2013 - 04:03 AM

If you want fit whole text, just change overflow: hidden; to overflow: none; when expanded.

$('#item<?php echo $i; ?>').parent().toggleClass('not_overflow');

And add .not_overflow class in CSS:

.not_overflow{
   overflow: none;
}

Obviously pay attention about inheritance of .not_overflow class.
A=1-A ...from Basic...
$a=1-$a ...thru PHP...
LDA $01 EOR #1 ...to 6502 ASM :}

Does it mean I'm going low-level?! ;]

#3 Adam

Adam

    Advanced Member

  • Gurus
  • 5,701 posts
  • LocationSheffield / UK

Posted 30 January 2013 - 10:17 AM

You don't need to specify a height here: http://jsfiddle.net/prt7b/




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com