CODEWITHSUNDEEP
javascriptcsscross-browser
Nirbhay saini
Nirbhay saini

Reputation: 11

Javascript and CSS working on Firefox but not working on IE

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.

Upvotes: 1

Views: 647

Answers (2)

Andy E
Andy E

Reputation: 344567

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

Upvotes: 0

bobince
bobince

Reputation: 536379

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

Upvotes: 1

Related Questions