Merging Two Scripts on onInterval infinite loop

Greetings All,

I've been having trouble combining 2 scripts and to have them automatically preform them both at the same time.

I have one script that is a simple slideshow that loads dynamic text into a DIV every 5 seconds.

The next script edits the SPAN of the text to resize according to the character amount. The text it pulls can be any length and it simply edits the font size to force the post to fill the entire static box.

How can I get this resizing script to run in parallel right after the slide switches? Should I combine them into one script? Or should I just also set it to an interval of 5 seconds (and how would I do that?)

Script 1 - Slideshow:


[CODE]
<script>
$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);
</script>
[CODE]

Script 2 - Resize Text

[CODE]
<script>
$(function resize() {
$('#slideshow span').css('font-size', '4em');

while( $('#slideshow span').height() > $('#slideshow').height() ) {
$('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
}
});
</script>
[CODE]

If you want them both to update one immediately after the other then it would be best to place them inside the same setInterval:

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');

$(function resize() {
$('#slideshow span').css('font-size', '4em');

while( $('#slideshow span').height() > $('#slideshow').height() ) {
$('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
}
});
}, 5000);

THANK YOU! That worked beautifully.

The only thing it seemed to break is loading on page.

I'm trying to do my research but I'm having trouble.

How could I call it to go immediately on page load AND interval every 5 seconds?

Sorry, let me clarify.

It doesn't load "onLoad" of the webpage and takes 5 seconds to put itself into effect.

To run the code immediately as well as every 5 seconds we'll need to pull the function out of the setInterval so we can call it immediately as well as from inside the setInterval - like this:

$("#slideshow > div:gt(0)").hide();

var sld = function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');

$(function resize() {
$('#slideshow span').css('font-size', '4em');

while( $('#slideshow span').height() > $('#slideshow').height() ) {
$('#slideshow span').css('font-size', (parseInt($('#slideshow span').css('font-size')) - 1) + "px" );
}
});
}
setInterval(sld, 5000);
sld();

Thanks so much for the help! I tried that but figured there may be an easier way.

Amazingly fast response time! I really appreciate everything you've done.