PDA

View Full Version : Text maximum 1 line



Jeroen94
09-17-2012, 04:43 PM
I would like to restrict the second line of text in fade scroller (see: Javascript code beneath) to a single line and, if possible, end that same line by "...". (The overflow is deleted.)

e.g. "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test" becomes for example "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test te..."

Initially, I customized the text manually, but I discovered that the length of the line depends on the internet browser and the width of the screen one uses. Consequently, the fade scroller looks very messy sometimes.


Can someone help me with this problem?

Thank you by advance! :D


-----------------------------------------------------------------------------------------------


<script type="text/javascript">

var delay = 4000;
var maxsteps=20;
var stepdelay=40;
var startcolor= new Array(255,255,255);
var endcolor=new Array(70,78,84);

var fcontent=new Array();
begintag='<div style="font: 11px verdana; padding: 12px;">';

fcontent[0]="<b>Persoon1 (datum1)</b> - 1 van 3<br><br><hr><br><i>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</i><br><br><hr><br>bij: '<A href=http://memopoezie.weebly.com>website</A>' (Persoon, datum)";

fcontent[1]="<b>Persoon2 (datum2)</b> - 2 van 3<br><br><hr><br><i>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</i><br><br><hr><br>bij: '<A href=http://memopoezie.weebly.com>website</A>' (Persoon, datum)";

fcontent[2]="<b>Persoon3 (datum3)</b> - 3 van 3<br><br><hr><br><i>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</i><br><br><hr><br>bij: '<A href=http://memopoezie.weebly.com>website</A>' (Persoon, datum)";

closetag='</div>';

var fwidth='866px';
var fheight='120px';

var fadelinks=1;


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;

function changecontent(){
if(changecontent.pause){
setTimeout(changecontent, 500);
return;
}
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(0);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++

}

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);
}
}


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);

}
}

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" onmouseover="changecontent.pause=true;" onmouseout="changecontent.pause=false;" 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>

bernie1227
09-17-2012, 08:32 PM
This:


whitespace: nowrap;

CSS property allows you to stop the text from wrapping.
This:


overflow: hidden;

Will restrict the width of anything that goes over the width of the wrapper. Play around with those.

Jeroen94
09-21-2012, 01:46 PM
But how? :confused: I'm really not familiar with javascript and the combination with CSS... :S