Javascript innerHTML code generates unexplained line-breaks in IE

J

John Ca

Hi Everyone!

I'm posting this as a follow up message on my previously started
thread here:
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/63fff03661714519?hl=en

Unfortunately since that thread went quite a bit off-topic, I'm
starting this new thread instead!

Anyway, I'm experiencing a very strange problem with IE6... in my
original post I was trying to figure out how to build a function which
will work both with IE & FF, the purpose of which is to highlight
certain keywords in the page's paragraphs, and turn them into
hyperlinks!

RobG was gracious enough to provide me with a working function which
achieves just that, and works both with IE and FF (the function I was
using before that worked only in FF).

Here is the function provided by RobG:

function create_links() {

var keywords = ['Keyword1','Keyword2','Keyword3','Keyword4'],
p,
pCollection = document.getElementsByTagName("p"),
re,
word;

for (var i=0, iLen=pCollection.length; i<iLen; i++) {
p = pCollection;

for (var j=0, jLen=keywords.length; j<jLen; j++) {
word = keywords[j];
re = new RegExp('\\b' + word + '\\b','g');
p.innerHTML = p.innerHTML.replace(re,
'<a href="http://www.mysite.com">' + word + '</a>');
}
}

}


As expected the function now works perfectly in both IE & FF, however
there is now a new and very strange problem!!!

Whenever the function executes in IE, it also adds some kind of weird
line breaks just after each paragraph that it modifies... creating
about 2 lines worth of blank space between that paragraph and the next
element on the page!!! For the life of me I cannot figure out what can
possibly be causing this...

Unfortunately since IE6 doesn't have the option of dynamically showing
the page source (unlike FF which has the option to "View selection
source"), I don't really know what it's adding after the <p> elements
specifically! When I select those "empty lines" on the page it's like
there's an empty character (" ") there, and when I copy-paste it into
notepad it goes down one line, so I assume it's a line-break
character.

Also, since I only have IE6 installed on my machine, I didn't have a
chance to test it with IE7, so I don't know if it applies to all
versions of IE or just IE6, but nonetheless it's extremely strange!

If anyone has any ideas as to what might be causing this, and how to
fix this I would greatly appreciate your help!!!

I'm calling the function in an "onload" event in the body tag as such:
<body onload="create_links();">

If I left out any important information please let me know!

Thanks,
John
 
J

John Ca

I just tested the function you posted with IE6 and a dummy HTML file,
and I can't see the effect you described. It's possible that something
else on the page (custom stylesheet?) is interfering. Could you post a
link to a page which demonstrates this problem, or (if the page is short
enough), post the complete HTML?

cheers,
stefan

Hey Stefan,

Thanks for your willingness to help! The thing is, and this is a bit
awkward, but the blog for which I've been hired to do this for is one
of an *adult* nature, so there's some sexually explicit material on
there... if you don't mind that then I'll be happy to send you the
link; if it's a problem then i'll do my best to recreate the code
without all the "naughty" bits in it...

Thanks,
John
 
G

Garrett Smith

John said:
Hey Stefan,

I'm not Stefan, but replying anyway.
Thanks for your willingness to help! The thing is, and this is a bit
awkward, but the blog for which I've been hired to do this for is one
of an *adult* nature, so there's some sexually explicit material on
there... if you don't mind that then I'll be happy to send you the
link; if it's a problem then i'll do my best to recreate the code
without all the "naughty" bits in it...

Please post a reduced test case. (Remove all the BBW, etc).

:-D
 
J

John Ca

I am Stefan, and I...



...agree. I don't mind seeing the "naughty bits", but since this is a
blog, there's going to be a lot of other stuff (stylesheets, other
scripts/libraries, weird markup) which could possibly influence your
script's behavior. The create_links() function works fine on my
bare-bones test page; it apparently doesn't work on the blog, so I
assume that something else on that page triggers the layout problem.
Probably not the BBW, though :)

cheers,
stefan

lol yeah I figured it probably had to be something else on the blog
that's causing this if the function works fine on a bare-bones test
page, but nonetheless I still have no idea what it could possibly
be... the blog itself is pretty straight forward; other than 2 other
simple "document.write" javascripts on it, the script at hand is
really the main one. Also I can't possibly imagine how the CSS file
could be causing this...

I don't expect you to do all the work for me of course, but if you
could at least have a look and witness this strange phenomena for
yourselves, maybe that will give you some possible leads I could look
into?

Here's the blog's address (It's in Hebrew):
http://www.sexhinamx.com/

If you load it from firefox you'll see the function kicking in and
some keywords get highlighted and turned into hyperlinks. The same
thing happens when you load it from IE, only as the function kicks in,
you'll also see these unexplained line-breaks appearing after each
paragraph... really odd!

Thanks again!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top