使用javascript进行元素转换

New to stack overflow and web development --

Background:

I am populating a div with an unknown and constantly changing amount of data (text) that I retrieve from a server using PHP. I want the text to be readable and be a constant size so I've figured about 5-7 lines can be put inside the div. Some days there might be more data than the div can fit inside and it will overflow the page.

Instead of overflowing the div I'm wondering if there is a way to recognize that the div has overflowed and I want it to lets say pause for 10 seconds, then replace the current div to a new div with the rest of the information. I'm picturing a "fade out" to the new div, sort of like a slideshow. Any suggestions or help would be appreciated.

Here is a snippet of the static, non-transitioning div I have so far:

            <div class = "content-box subtext">
                <?php
                    foreach($sprintHash as $name => $value) {
                        echo "$name =>";
                        foreach($value as $ticket) {
                            echo "$ticket | ";
                        }
                        echo "<br>";
                    }
                ?>
            </div>

Tried looking into CSS3 transitions, still not sure how to detect when an overflow has occurred.

You could work out how long your content needs to be for your div to overflow (i.e. approximately how many characters). Then, after loading the content, check the length of the innerHTML of the div using javascript

document.getElementById('id').innerHTML.length

and check if this is greater than your overflow value. If I understand what you're trying to do correctly, you should have something that looks like this:

var overflowLength=100; //100 characters is when your div overflows
window.onload = function()
{
     if(document.getElementById('mydiv').innerHTML.length>overflowLength)
     {
         changeHeight('mydiv');
     }
}

This should accomplish what you're trying to do - but that said, you might want to work this out using css. Maybe reconsider your layout if that's an option.

edit: improved answer I tested this and it seems to work.

function(){
var mydiv = document.getElementById('mydiv');
if(mydiv.clientHeight<mydiv.scrollHeight)
{
    changeHeight();
}
}