Jump to content

Recommended Posts

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
Link to comment
https://forums.phpfreaks.com/topic/273506-from-overflow-hidden-to-fit-text-height/
Share on other sites

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.