Javascript and CSS working on Firefox but not working on IE

Question

I have this code which working on Firefox but not working on IE missing last character on IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wrapped</title>   
      <script type="text/javascript" language="javascript">  
       function set_padd(){   
        var tt = document.getElementById("span_padding").innerHTML;    
        var txt = new Array();     
     txt = tt.split(" ");                 
        var atxt = '';
        var f_txt = '';
        var wrd_pr_linr = 4;    
        var cnt = 1;     
        for(var i = 0; i < txt.length; i++){ 
          if(txt[i].length > 0){           
           txt[i] = txt[i].replace(' ','');
           if(cnt < wrd_pr_linr){
            if(txt[i].length > 0){
           atxt += ' '+txt[i].replace(' ','');
           cnt++;          
            }
           }else{
            f_txt += '<a class="padd_txt" >'+atxt+'</a><br />';
            atxt = ''; 
            cnt = 1;
           }
          }
        }  
        document.getElementById("span_padding").innerHTML = f_txt;  
       }  
      </script>  
      <style type="text/css">  
       .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;} 

  body{font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em;}
  span{background-color: #009; width:200px; color: #FFF;" class="blocktext;}



      </style>
</head> 
<body onload="set_padd();">
  <div style="width: 350px;"> 
      <p>
      <span id="span_padding">
          This is what I want to 
       happen where one
       long string is wrapped 
       and the text has this 
       highlight color behind 
       it. 
      </span>  
   </div>  
</body>  
</html>

Output on Firefox is:

This is
I want to
happen where one
string is wrapped
and the text
this highlight
behind it.

and output on IE:

This is what
want to happen
one long string
wrapped and the
has this highlight

missing last two words.

It looks like it doesn't work on either browser properly, words are missing from both outputs. — Andy E
– Andy E, Commented Apr 21, 2010 at 10:44
you should try to the your code a bit more readable, so ppl don't have to be guessing what you want to store in each var — fmsf
– fmsf, Commented Apr 21, 2010 at 10:49

bobince · Accepted Answer · 2010-04-21 11:24:40Z

1

The results are different on IE and Firefox because of IE's habit of throwing away whitespace around tags. But your function is broken on both browsers, as it throws away the last word of each line and potentially the whole last line without ever outputting it.

Seems a bit laborious too. How about using a regex to match each group of up to four words:

function set_padd() {
    var span= document.getElementById('span_padding');
    var text= span.firstChild.data;
    span.innerHTML= '';
    var lines= text.match(/\S+(\s+\S+){0,3}/g);

    for (var i= 0; i<lines.length; i++) {
        var el= document.createElement('a');
        el.className= 'padd_txt';
        el.appendChild(document.createTextNode(lines[i]));
        span.appendChild(el);
        span.appendChild(document.createElement('br'));
    }
}

answered Apr 21, 2010 at 11:24

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy E Over a year ago

+1, I hope you don't mind I borrowed most of your regex to improve the last part of my answer :-)

Community · Accepted Answer · 2017-05-23 11:47:38Z

There are several obvious problems with your code:

In your i, where cnt < wrd_pr_linr is false, you're resetting the count and wrapping a span around the current atxt, but you're not doing anything with txt[i], so it's missed off as the increment increases on the next turn around. You could fix this by adding i--; after cnt++;.
If your loop terminates whilst cnt < wrd_pr_linr is true, your else statement that creates the DOM string will not be executed and the value of atxt is just ignored. You need to run the same code block when your if statement is about to terminate.

If it were me, I'd look into a much neater, simpler, regex based solution:

function set_padd(){   
    var f_txt;
    var tt = document.getElementById("span_padding").innerHTML;

    // replace every third space with "{!BREAK!}"    
    tt = tt.replace(/(.*?\s+.*?\s+.*?)\s+/g, "$1{!BREAK!}");

    // Splitting on that string creates an array with 3 words in each index
    tArr = tt.split("{!BREAK!}");

    // Join the array again with the HTML you need between each index
    f_txt = tArr.join('</a><br/><a class="padd_txt">');

    // Wrap the text with the start tag and the end tag
    f_txt = '<a class="padd_txt">' + f_txt + '</a>';

    // Viola!
    document.getElementById("span_padding").innerHTML = f_txt;  
}

Take out the comments, swap the regex for something similar to bobince's and you can get it to look really small:

function set_padd(){   
    var tt = document.getElementById("span_padding").innerHTML;
    var f_txt = '<a class="padd_txt">'
              + tt.match(/\S+(\s+\S+){0,2}/g)
                  .join('</a><br/><a class="padd_txt">')
              + '</a>';

    document.getElementById("span_padding").innerHTML = f_txt;  
}

Collectives™ on Stack Overflow

Javascript and CSS working on Firefox but not working on IE

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related