Advanced Search

Results 1 to 3 of 3

Thread: Text maximum 1 line

  1. #1
    Join Date
    Jul 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Text maximum 1 line

    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!


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

    Code:
    <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>

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    This:
    Code:
    whitespace: nowrap;
    CSS property allows you to stop the text from wrapping.
    This:
    Code:
    overflow: hidden;
    Will restrict the width of anything that goes over the width of the wrapper. Play around with those.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Jul 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    But how? I'm really not familiar with javascript and the combination with CSS... :S

Similar Threads

  1. How to increase text line spacing with css
    By jcdesigns in forum CSS
    Replies: 5
    Last Post: 01-17-2011, 10:45 AM
  2. Resolved list text indent, second line
    By sp3125532 in forum CSS
    Replies: 4
    Last Post: 05-20-2009, 03:01 AM
  3. Replies: 2
    Last Post: 02-11-2009, 08:28 PM
  4. Replies: 3
    Last Post: 11-05-2008, 12:24 PM
  5. Jump to line of text
    By stillatlarge in forum HTML
    Replies: 5
    Last Post: 12-10-2006, 04:08 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •