Stuck in hell, surrounded by font elements

H

hobosalesman

Somehow font elements are being added everywhere in my page, with size
set to 4. Maybe I'm just tired but I have no idea what's going on, even
weirder considering the page is XHTML 1.0 strict served with the proper
MIME type... heres some code:

var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs.className == "cwindow") {
windows.push( [ divs.title, document.body.removeChild(divs)]
);
i--;
}
}

for (var i=0; i<windows.length; i++) {
bodytext += "<div class='window_border'><div class='window_wrap'><div
class='window_header'><div class='window_header_content'>";
//Title
bodytext += windows[0];
bodytext += "</div></div><div class='window_body_border'><div
class='window_body' style='background-position:" +(
Math.round(Math.random()*800) )+ "px " +( Math.round(Math.random()*800)
)+ "px;'>";
//Body
bodytext += windows[1].innerHTML;
bodytext += "</div></div></div></div>";
}

Wherever I add the title and body from 'windows' it puts it inside a
font element with size of 4. Text is huge. It also adds it in other
places in the middle of a string asigned with innerHTML. I don't get it
and I'm giving up for sleep now, please point out my simple stupid
mistake.

HS
 
A

ASM

(e-mail address removed) a écrit :
Somehow font elements are being added everywhere in my page, with size
set to 4. Maybe I'm just tired but I have no idea what's going on, even
weirder considering the page is XHTML 1.0 strict served with the proper
MIME type... heres some code:

That bellow works fine for me :

<div class="cwindow"><h1>One</h1></div>
<div class="cwindow">Two</div>
<div class="other"><span style="color:blue">for</span></div>
<div class="cwindow"><span style="color:red">five</span></div>

<script type="text/javascript">
var divs = document.getElementsByTagName("div");
var windows = new Array();
var bodytext='';
for (var i=0; i<divs.length; i++) {
if (divs.className == "cwindow") {
windows.push([divs.title, document.body.removeChild(divs)]);
i--;
}
}

for (var i=0; i<windows.length; i++) {
bodytext += "<div class='window_border'><div class='window_wrap'>"+
"<div class='window_header'><div class='window_header_content'>";
//Title
bodytext += windows[0];
bodytext += "<\/div><\/div><div class='window_body_border'><div "+
"class='window_body' style='background-position:" +
(Math.round(Math.random()*800) )+ "px " +
( Math.round(Math.random()*800))+ "px;'>";
//Body
bodytext += windows[1].innerHTML;
bodytext += "<\/div><\/div><\/div><\/div>";
}
document.body.innerHTML = bodytext;
Wherever I add the title and body from 'windows' it puts it inside a
font element with size of 4. Text is huge. It also adds it in other
places in the middle of a string asigned with innerHTML.

it would have been better to cloneNode(true) the divs 'cwindow'
 
R

Richard Levasseur

Somehow font elements are being added everywhere in my page, with size
set to 4. Maybe I'm just tired but I have no idea what's going on, even
weirder considering the page is XHTML 1.0 strict served with the proper
MIME type... heres some code:


<font> has a tendency of cascading down the entire dom if it isn't
closed or is put in odd places.
ie: wrap a table in a <font> and all the <td>'s get <font> inserted
into them. It is incredibly annoying.
 
H

hobosalesman

Unbelievable, the problem was a forum admin that thinks he's a web
designer. He added <font size=4> to a forum category, without closing
it, so it ended up applied to most of the page. It was hard to track
down because it was hiding in an SQL database. So, sorry for wasting
bandwidth with what was really a non-javascript issue.
it would have been better to cloneNode(true) the divs 'cwindow'

Is there a difference between cloning and removing, and just using the
return value from removeChild()? I know that removing elements from a
list while stepping through it is maybe not so bright, but in this case
I don't see the problem?

HS
 
H

hobosalesman

Richard said:
<font> has a tendency of cascading down the entire dom if it isn't
closed or is put in odd places.
ie: wrap a table in a <font> and all the <td>'s get <font> inserted
into them. It is incredibly annoying.

Oh boy is it ever....

It's inspired me to write a perl script that looks through a site for
pages with a valid XHTML doctype , and adds deprecated markup in random
places.

HS
 
H

hobosalesman

Is there a difference between cloning and removing, and just using the
return value from removeChild()? I know that removing elements from a
list while stepping through it is maybe not so bright, but in this case
I don't see the problem?

I was giving this more thought, and wouldn't it be more efficient to
use the returned value from removeChild(), than the extra memory
involved in a deep copy of the element only to remove it anyway?

HS
 
A

ASM

(e-mail address removed) a écrit :
As I found no problem in my test with inneHTML, I can't say more.
I was giving this more thought, and wouldn't it be more efficient to
use the returned value from removeChild(), than the extra memory
involved in a deep copy of the element only to remove it anyway?

As I don't understand what you try to do ...
Tacking content of divs of class 'something' to put it in others divs of
class 'something-else' ...

Why not to append directly the divs of class 'something' after having
changed this class in 'something-else' in your group of others divs (I
don't know their use)


<div class="cwindow" title="un">
<h1>One</h1>
</div>
<div class="other" title="number 2">
<span style="color:red">two</span>
</div>
<div class="cwindow" title="trois">
<font size="6" color="maroon">Three</font>
<tt>three</tt>
</div>
<div class="other">
<span style="color:blue">for</span>
</div>
<div class="cwindow" title="red span">
<span style="color:red">five</span>
</div>


<script type="text/javascript">

function newDiv(classe) {
var D = document.createElement('div');
D.className = classe;
return D;
}

var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
if (divs.className == "cwindow") {
var R = newDiv('window_border');
var S = newDiv('window_wrap');
var T = newDiv('window_header');
var U = newDiv('window_header_content');
U.innerHTML = divs.title;
T.appendChild(U);
S.appendChild(T);
T = newDiv('window_body_border');
divs.className = 'window_body';
divs.style.backgroundPosition =
(Math.round(Math.random()*800) )+ "px " +
( Math.round(Math.random()*800))+ "px";
T.appendChild(divs);
S.appendChild(T);
R.appendChild(S);
document.body.appendChild(R);
}
}
</script>
 
H

hobosalesman

ASM said:
As I don't understand what you try to do ...
Tacking content of divs of class 'something' to put it in others divs of
class 'something-else' ...

Why not to append directly the divs of class 'something' after having
changed this class in 'something-else' in your group of others divs (I
don't know their use)

I was thinking more theoretically, but I have PHP generated divs which
are content for "windows", which javascript removes from the page so
that a loader screen can appear while the rest of the HTML and JS is
downloaded, then it creates windows and adds the content from the
original page. I can't append directly to the other div because it
doesn't exist yet.
 
A

ASM

(e-mail address removed) a écrit :
I was thinking more theoretically, but I have PHP generated divs which
are content for "windows", which javascript removes from the page so
that a loader screen can appear while the rest of the HTML and JS is
downloaded, then it creates windows and adds the content from the
original page. I can't append directly to the other div because it
doesn't exist yet.

No, I understood your displayers groups of divs don't exist, in what I
suggested these groups are created each time it is necessary.
Of course, you can make a function to do all that job; this function
being launched after complete loading of the php file.
Appending on the fly directly in groups the targeted divs one by one is
equivalent to move them one by one (no need to remove and remember all
them)

onload = function() {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++)
if( ... etc ...
}


But that will not fix the problem of absent font closing tag :)

Is tag 'font' allowed in XHTML 1.0 strict ?
 
H

hobosalesman

ASM said:
Is tag 'font' allowed in XHTML 1.0 strict ?

Noooooo... it's like taking a 1982 Toyota Corolla with blown rings and
missing catalytic converter in for an emissions test. The font tag is
evil, useless, obsolete, and only used by amateurs that don't know any
better (like my users apparently).

HS
 

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