ansaurus

Question

javascript and css working on firefox but not working on IE

Answer 1

+1 A:

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

bobince 2010-04-21 11:24:40

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

Andy E 2010-04-21 11:40:08

Answer 2

A:

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

Andy E 2010-04-21 11:26:43

ansaurus

tags:

views:

answers:

javascript and css working on firefox but not working on IE

related questions