Changing multiple font sizes in a fading scroller

[kcilo]

I'm a newbie...For the following code

1. How do you change font size for the various lines and have multiple font sizes in a single scroller (some are multiple lines long and are too big for the box where the scroller is in while some are shorter and fit fine)?


2. Is there a way for the font to automatically change sizes to fit in the box? I know with 'auto' we can change the box to fit the text size, but I would like to change the text size to fit the box.

THANKS for the help!

script type="text/javascript">

/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var delay = 2200; //set delay between message change (in miliseconds)
var maxsteps=50; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect

var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(23,55,94); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 18px Lucida Calligraphy; padding: 12px;">'; //set opening tag, such as font declarations
fcontent[0]="<div align = center><b>How do we grow?</b></div></a></font>";
fcontent[1]="<div align = center><b>What is our business plan?</b></div></a>";
fcontent[2]="<div align = center><b>Should we franchise?</b></div></a>";
fcontent[3]="<div align = center><b> Who can we acquire?</b></div></a>";
fcontent[4]="<div align = center><b> Can we make an on-target budget?</b></div></a>";
fcontent[5]="<div align = center><b> Who can lead our acquisition due diligence process?</b></div></a>";
fcontent[6]="<div align = center><b> How do we streamline our due diligence process?</b></div></a>";
fcontent[7]="<div align = center><b> Is this the right time to sell our company?</b></div></a>";
fcontent[8]="<div align = center><b> What is our company worth today?</b></div></a>";
fcontent[9]="<div align = center><b> What is the overall competitive landscape?</b></div></a>";
fcontent[10]="<div align = center><b> Do we resonate?</b></div></a>";
fcontent[11]="<div align = center><b> What should be our brand strategy?</b></div></a>";
fcontent[12]="<div align = center><b> Can we reduce our G&A?</b></div></a>";
fcontent[13]="<div align = center><b> What is the most effective method to merge companies?</b></div></a>";
fcontent[14]="<div align = center><b> How can we sell more franchises?</b></div></a>";
fcontent[15]="<div align = center><b> Can we simplify our planning process?</b></div></a>";
fcontent[16]="<div align = center><b> What are our critical business drivers?</b></div></a>";
fcontent[17]="<div align = center><b> How do we best present our financials?</b></div></a>";
fcontent[18]="<div align = center><b> How do we improve communications with our portfolio companies?</b></div></a>";
fcontent[19]="<div align = center><b> What should our projections be?</b></div></a>";
fcontent[20]="<div align = center><b> How can we implement a better operating system?</b></div></a>";
fcontent[21]="<div align = center><b> Can we simplify our store layout?</b></div></a>";closetag='</div>';

var fwidth='290px'; //set scroller width
var fheight='auto'; //set scroller height

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////

fcontent.sort(function() {return 0.21 - Math.random();});
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);

}
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>

[bluewalrus]

Make up some classes and put em in the divs. Post a link and I'll make an example.

[kcilo]

Thanks for responding.

Sorry...new to learning this...Not sure what you mean by "Make up some classes and put em in the divs.

The link to my site is http://www.toundanddrowth.com/Here_To_Help.html

Note that I currently have the box changing size, I want the box to stay the same and the text to change sizes...either to a pre-determined size or automatically to fit the set box size.

Thanks again.

[bluewalrus]

Links not working.

[kcilo]

Sorry...made some changes


http://www.toundanddrowth.com/TD_Gets_Results.html

[bluewalrus]

Put this in your head:

<style type="text/css">
.large {
font:Lucida Calligraphy, Arial, Helvetica, sans-serif, bold 8px;<br>
padding: 12px;
text-align:center;
}
.medium {
font:Lucida Calligraphy, Arial, Helvetica, sans-serif, bold 14px;
padding: 12px;
text-align:center;
}
.small { 
font: font:Lucida Calligraphy, Arial, Helvetica, sans-serif, bold 10px;
padding: 12px;
text-align:center;
}
.x_small {
font:Lucida Calligraphy, Arial, Helvetica, sans-serif, bold 6px;
padding: 12px;
text-align:center;
}
</style>

and this where it was

fcontent[0]="<div class=\"large\">How do we grow?</div>";
fcontent[1]="<div class=\"large\">What is our business plan?</div>";
fcontent[2]="<div class=\"large\">Should we franchise?</div>";
fcontent[3]="<div class=\"large\"> Who can we acquire?</div>";
fcontent[4]="<div class=\"large\"> Can we make an on-target budget?</div>";
fcontent[5]="<div class=\"medium\"> Who can lead our acquisition due diligence process?</div>";
fcontent[6]="<div class=\"medium\"> How do we streamline our due diligence process?</div>";
fcontent[7]="<div class=\"medium\"> Is this the right time to sell our company?</div>";
fcontent[8]="<div class=\"large\"> What is our company worth today?</div>";
fcontent[9]="<div class=\"medium\"> What is the overall competitive landscape?</div>";
fcontent[10]="<div class=\"large\"> Do we resonate?</div>";
fcontent[11]="<div class=\"large\"> What should be our brand strategy?</div>";
fcontent[12]="<div class=\"large\"> Can we reduce our G&amp;A?</div>";
fcontent[13]="<div class=\"medium\"> What is the most effective method to merge companies?</div>";
fcontent[14]="<div class=\"large\"> How can we sell more franchises?</div>";
fcontent[15]="<div class=\"medium\"> Can we simplify our planning process?</div>";
fcontent[16]="<div class=\"medium\"> What are our critical business drivers?</div>";
fcontent[17]="<div class=\"medium\"> How do we best present our financials?</div>";
fcontent[18]="<div class=\"small\"> How do we improve communications with our portfolio companies?</div>";
fcontent[19]="<div class=\"medium\"> What should our projections be?</div>";
fcontent[20]="<div class=\"medium\"> How can we implement a better operating system?</div>";
fcontent[21]="<div class=\"large\"> Can we simplify our store layout?</div>";
closetag='</div>';

i think that'll do it, post back if it doesnt or any questions.