By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,471 Members | 722 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,471 IT Pros & Developers. It's quick & easy.

dynamic list on mozilla overlaps <span> tag as it grows

P: n/a
so i have a <ul> and I allow the user to append items to it. The
problem is that on mozilla the <span class="line"> which is just a line
to divide the sections
gets overlaped and doesnt move down and adjust to the newly added items
like it does in iE. It just occured to me that i dont really have to
use a span, and a html <hr> tag could do the trick -I will go try. But
aside from that could some one explain why this occurs? And will I get
the overlapping on other browsers? (oh and I know about innerHTML
support, I will change that.)

HTML:

<form>
<ul id="uploadList">
<li>
<input id="file1" type="file" /></li>
<li id="end">
<a
href="javascript:attachAnother('uploadList');">Bla h</a></li>
</ul>
<span class="line">&nbsp;</span><br/>
<input type="submit" id="upload" />
</form>
CODE:

function attachAnother(e)
{
var li,id,fileLi,file;
var end = document.getElementById('end')
var ul = document.getElementById(e);

if( ul == null || end == null || ul.childNodes.length < 2)
return;

// get the last <input> and make sure it
// has some value b4 we add another.
fileLi = ul.childNodes[ul.childNodes.length-2];

if(fileLi.firstChild.value != ''") {

//file = fileLi.firstChild.clone();
id = 'liFile' + fileCount;
li = document.createElement('li');
li.id = id;
li.innerHTML = '<input type="file" id="File"' + fileCount++ +
'/>';
li.innerHTML +='&nbsp;<a
href="javascript:removeFile(\'uploadList\',\'' + id + '\');">Remove
File</a>';
//li.insertBefore(file,null);
ul.insertBefore(li,end);
}
}
thanks!

Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
ok so the <HR> worked.... but any of you ECMAScripting thugs
give me some insight as to why this goes bad with a span?

Jul 23 '05 #2

P: n/a
hs********@yahoo.com wrote:
so i have a <ul> and I allow the user to append items to it. The
problem is that on mozilla the <span class="line"> which is just a line
to divide the sections
gets overlaped and doesnt move down and adjust to the newly added items
like it does in iE.
So you have a problem with the style you are applying to the span.
This is a JavaScript newsgroup, why do you expect answers to
CSS/style problems?

Why do you expect any answer at all when you don't show the CSS for
the style you are applying?
It just occured to me that i dont really have to
use a span, and a html <hr> tag could do the trick -I will go try. But
aside from that could some one explain why this occurs? And will I get
the overlapping on other browsers? (oh and I know about innerHTML
support, I will change that.)
It is much better to use DOM for this type of operation. innerHTML
is great where you just want to splat some text or minimal markup
into somewhere, but it should not be used extensively for adding
elements, intrinsic events, attribute, etc.

HTML:

<form>
The action attribute is required for form elements.
<ul id="uploadList">
<li>
<input id="file1" type="file" /></li>
<li id="end">
<a
href="javascript:attachAnother('uploadList');">Bla h</a></li>
The javascript pseudo-protocol is unnecessary. Use an onclick event
and an href that links to a page to replace whatever functionality is
provided by the script. Return a suitable value from the script to
decide whether the link is followed or not:

<a href="sansJS.html" onclick="
return attachAnother('uploadList');">Blah</a></li>
</ul>
<span class="line">&nbsp;</span><br/>
<input type="submit" id="upload" />
</form>

Do not indent code with tabs, it makes assisting you far more
difficult than it need be and the uncontrolled wrapping it causes
often introduces new errors. Use 2 or 4 spaces for indents and wrap
code manually at about 70 characters.

CODE:

function attachAnother(e)
{
var li,id,fileLi,file;
var end = document.getElementById('end')
You should use feature detection and not assume every browser
supports a particular method. Maybe you also want to support older
browsers with document.all too:

var end;
if (document.getElementById) {
end = document.getElementById('end');
} else if (document.all) {
end = document.all['end'];
}
var ul = document.getElementById(e);
If you are going to use document.getElementById frequently, you may
wish to include something like the DynWrite function suggested on
this group's FAQ:

<URL:http://www.jibbering.com/faq/#FAQ4_15>

if( ul == null || end == null || ul.childNodes.length < 2)
return;
It is common to evaluate these in the reverse context so that any
syntax errors will show up. e.g.

if( ul = null || ...

will set ul to null and return true every time. If your testing is
not thorough, you will miss the error. Alternatively:

if( null = ul || ...

will throw an error every time that you will be able to debug and
correct to:

if( null == ul || ...

You could use;

if ( !ul || ...


// get the last <input> and make sure it
// has some value b4 we add another.
fileLi = ul.childNodes[ul.childNodes.length-2];

if(fileLi.firstChild.value != ''") {
There is a syntax error here ---------------^

You should be more careful and test that nodes exist before trying to
use them in expressions, as if they don't exist your script will
error and exit. Different browsers insert extra nodes in some
places, you can't be certain that any particular node will have a
firstChild.

If you create your inputs inside a form, or use getElementById on
your starting 'ul' tag then getElementsByTagName, you will have much
more certain results.

if( fileLi && fileLi.firstChild && fileLi.firstChild.value != ''") {

//file = fileLi.firstChild.clone();
id = 'liFile' + fileCount;
Where is 'fileCount' initialised?
li = document.createElement('li');
li.id = id;
This id is not used and not needed, why add it?
li.innerHTML = '<input type="file" id="File"' + fileCount++ +
'/>';

This will create elements with id="File". Creating multiples will
create numerous elements with the same id, which is invalid HTML and
you will likely only ever be able to access the first one (if any).

If you want the value of 'fileCount' to be included in the id (which
seems to be what you are attempting ):

li.innerHTML = '<input type="file" id="File' + fileCount++ + '"/>';

But anyway, form elements need both a name and a value to be
successful, so add a name and not an id (which isn't used and
therefore not needed).
li.innerHTML +='&nbsp;<a
href="javascript:removeFile(\'uploadList\',\'' + id + '\');">Remove
File</a>';
As above, use an onclick event, not javascript pseudo-protocol. Have
the href go somewhere useful for non-JavaScript browsers and return
false to cancel it if your onclick exits successfully.
//li.insertBefore(file,null);
ul.insertBefore(li,end);
}
}


Anyhow, sick of finding errors. Here is a script that does
everything you are attempting but uses all DOM, no innerHTML.

I don't think it fixes your style issue since you haven't told anyone
what it is. There are still logic flow and usability issues, good
luck.

Tested in Firefox and IE - IIRC, some versions of IE have issues with
creating input type file, test thoroughly.

<script type="text/javascript">

// Provides limited support for getElementById for
// browsers that only support document.all
if (!document.getElementById && document.all) {
document.getElementById = function(id){
return document.all[id];
}
}

function attachAnother(ele) {
var li,id,fileLi,file;
var end = document.getElementById('end')
var ul = document.getElementById(ele);
if( !ul || !end || ul.childNodes.length < 2) {
return true; // Link will be followed, add input at server
}

// get the last <input> and make sure it
// has some value b4 we add another.
// fileLi = ul.childNodes[ul.childNodes.length-2];
var inputs = ul.getElementsByTagName('input');
if ( 0 < inputs.length ) {
fileLi = inputs[inputs.length-1];
}

// To ensure unique IDs, add '1' to last input id
if ( fileLi.id) {
var fileCount = fileLi.id.split('-')[1];
fileCount++;
}

if(fileLi.value != '') {
id = 'liFile' + fileCount;
oLi = document.createElement('li');
oLi.id = id; // don't need an id on the li

// Create the input - must have a name to be successful
var oInp = document.createElement('input');
oInp.type = 'file'
oInp.name = 'File-' + fileCount;

// Create link
var oA = document.createElement('a');
oA.href = 'aUsefulURI.html';
oA.onclick =
function() {
return removeFile(this.parentNode)
};

// Add text to link
oA.appendChild(document.createTextNode('Remove Upload'));

// Add 'em all before last li
oLi.appendChild(oInp);
oLi.appendChild(oA);
end.parentNode.insertBefore(oLi,end);
} else {
alert('Will only add another one'
+ ' if you have selected a file in this one');
}
return false;
}

function removeFile(a) {
// If remove works, return false to stop link being followed
if (a.parentNode && a.parentNode.removeChild) {
return !a.parentNode.removeChild(a);
}
return true;
}

</script>
<form>
<ul id="uploadList">
<li>
<input id="File-1" type="file"></li>
<li id="end">
<a href="useful.html" onclick="
return attachAnother('uploadList');
">Add another</a></li>
</ul>
<span class="line">&nbsp;</span><br>
<input type="submit" id="upload">
</form>


--
Rob
Jul 23 '05 #3

P: n/a
1st off thanks for such a thurouh response.

RobG wrote:
hs********@yahoo.com wrote:
so i have a <ul> and I allow the user to append items to it. The
problem is that on mozilla the <span class="line"> which is just a line to divide the sections
gets overlaped and doesnt move down and adjust to the newly added items like it does in iE.
So you have a problem with the style you are applying to the span.
This is a JavaScript newsgroup, why do you expect answers to
CSS/style problems?

Why do you expect any answer at all when you don't show the CSS for
the style you are applying? It just occured to me that i dont really have to use a span, and a html <hr> tag could do the trick -I will go try. But aside from that could some one explain why this occurs? And will I get the overlapping on other browsers? (oh and I know about innerHTML
support, I will change that.)


It is much better to use DOM for this type of operation. innerHTML
is great where you just want to splat some text or minimal markup
into somewhere, but it should not be used extensively for adding
elements, intrinsic events, attribute, etc.

HTML:

<form>


The action attribute is required for form elements.
<ul id="uploadList">
<li>
<input id="file1" type="file" /></li>
<li id="end">
<a
href="javascript:attachAnother('uploadList');">Bla h</a></li>


The javascript pseudo-protocol is unnecessary. Use an onclick

event and an href that links to a page to replace whatever functionality is provided by the script. Return a suitable value from the script to
decide whether the link is followed or not:

<a href="sansJS.html" onclick="
return attachAnother('uploadList');">Blah</a></li>
</ul>
<span class="line">&nbsp;</span><br/>
<input type="submit" id="upload" />
</form>

Do not indent code with tabs, it makes assisting you far more
difficult than it need be and the uncontrolled wrapping it causes
often introduces new errors. Use 2 or 4 spaces for indents and

wrap code manually at about 70 characters.

CODE:

function attachAnother(e)
{
var li,id,fileLi,file;
var end = document.getElementById('end')
You should use feature detection and not assume every browser
supports a particular method. Maybe you also want to support older
browsers with document.all too:


this covers all browsers? var end;
if (document.getElementById) {
end = document.getElementById('end');
} else if (document.all) {
end = document.all['end'];
}
var ul = document.getElementById(e);
If you are going to use document.getElementById frequently, you may
wish to include something like the DynWrite function suggested on
this group's FAQ:

<URL:http://www.jibbering.com/faq/#FAQ4_15>


will check this out

if( ul == null || end == null || ul.childNodes.length < 2)
return;


It is common to evaluate these in the reverse context so that any
syntax errors will show up. e.g.

if( ul = null || ...

will set ul to null and return true every time. If your testing is
not thorough, you will miss the error. Alternatively:

if( null = ul || ...

will throw an error every time that you will be able to debug and
correct to:

if( null == ul || ...

You could use;

if ( !ul || ...


// get the last <input> and make sure it
// has some value b4 we add another.
fileLi = ul.childNodes[ul.childNodes.length-2];

if(fileLi.firstChild.value != ''") {
There is a syntax error here ---------------^

You should be more careful and test that nodes exist before trying

to use them in expressions, as if they don't exist your script will
error and exit. Different browsers insert extra nodes in some
places, you can't be certain that any particular node will have a
firstChild.

no doubt, i had this problem with the extra nodes being inserted. the
<ul> had two <li>'s
but ul.children.length was 5. what is the browser inserting and why? I
believe it was on mozilla
If you create your inputs inside a form, or use getElementById on
your starting 'ul' tag then getElementsByTagName, you will have much more certain results.
will do if( fileLi && fileLi.firstChild && fileLi.firstChild.value != ''") {

//file = fileLi.firstChild.clone();
id = 'liFile' + fileCount;
Where is 'fileCount' initialised?
li = document.createElement('li');
li.id = id;


This id is not used and not needed, why add it?


I will use it later to remove the <li> if the user wishes
li.innerHTML = '<input type="file" id="File"' + fileCount++ + '/>';

This will create elements with id="File". Creating multiples will
create numerous elements with the same id, which is invalid HTML

and you will likely only ever be able to access the first one (if any).

If you want the value of 'fileCount' to be included in the id (which seems to be what you are attempting ):

li.innerHTML = '<input type="file" id="File' + fileCount++ + '"/>';
But anyway, form elements need both a name and a value to be
successful, so add a name and not an id (which isn't used and
therefore not needed).
li.innerHTML +='&nbsp;<a
href="javascript:removeFile(\'uploadList\',\'' + id + '\');">Remove
File</a>';
As above, use an onclick event, not javascript pseudo-protocol.

Have the href go somewhere useful for non-JavaScript browsers and return
false to cancel it if your onclick exits successfully.
thats a better idea, but is their anything in particular that bad about
javascript:.....
other than browsers that are js-less faultering?
//li.insertBefore(file,null);
ul.insertBefore(li,end);
}
}


Anyhow, sick of finding errors. Here is a script that does
everything you are attempting but uses all DOM, no innerHTML.

I don't think it fixes your style issue since you haven't told

anyone what it is. There are still logic flow and usability issues, good
luck.

Tested in Firefox and IE - IIRC, some versions of IE have issues with creating input type file, test thoroughly.
interesting, thanks for the heads up. I dont have much experience
manipulating te DOM and having to do so for multiple browsers. You have
given me a little more insight, thanks.

<script type="text/javascript">

// Provides limited support for getElementById for
// browsers that only support document.all
if (!document.getElementById && document.all) {
document.getElementById = function(id){
return document.all[id];
}
}

function attachAnother(ele) {
var li,id,fileLi,file;
var end = document.getElementById('end')
var ul = document.getElementById(ele);
if( !ul || !end || ul.childNodes.length < 2) {
return true; // Link will be followed, add input at server
}

// get the last <input> and make sure it
// has some value b4 we add another.
// fileLi = ul.childNodes[ul.childNodes.length-2];
var inputs = ul.getElementsByTagName('input');
if ( 0 < inputs.length ) {
fileLi = inputs[inputs.length-1];
}

// To ensure unique IDs, add '1' to last input id
if ( fileLi.id) {
var fileCount = fileLi.id.split('-')[1];
fileCount++;
}

if(fileLi.value != '') {
id = 'liFile' + fileCount;
oLi = document.createElement('li');
oLi.id = id; // don't need an id on the li

// Create the input - must have a name to be successful
var oInp = document.createElement('input');
oInp.type = 'file'
oInp.name = 'File-' + fileCount;

// Create link
var oA = document.createElement('a');
oA.href = 'aUsefulURI.html';
oA.onclick =
function() {
return removeFile(this.parentNode)
};

// Add text to link
oA.appendChild(document.createTextNode('Remove Upload'));

// Add 'em all before last li
oLi.appendChild(oInp);
oLi.appendChild(oA);
end.parentNode.insertBefore(oLi,end);
} else {
alert('Will only add another one'
+ ' if you have selected a file in this one');
}
return false;
}

function removeFile(a) {
// If remove works, return false to stop link being followed
if (a.parentNode && a.parentNode.removeChild) {
return !a.parentNode.removeChild(a);
}
return true;
}

</script>
<form>
<ul id="uploadList">
<li>
<input id="File-1" type="file"></li>
<li id="end">
<a href="useful.html" onclick="
return attachAnother('uploadList');
">Add another</a></li>
</ul>
<span class="line">&nbsp;</span><br>
<input type="submit" id="upload">
</form>


--
Rob


Jul 23 '05 #4

P: n/a
hs********@yahoo.com wrote:
1st off thanks for such a thurouh response.

RobG wrote:
hs********@yahoo.com wrote:
so i have a <ul> and I allow the user to append items to it. The
problem is that on mozilla the <span class="line"> which is just a [...] You should use feature detection and not assume every browser
supports a particular method. Maybe you also want to support older
browsers with document.all too:

this covers all browsers?


If by 'this' you mean document.all, no. But between document.all and
getElementsById you should cover everything except Netscape 4 and may
be 6. Pretty much any browser that supports JavaScript and is less
than 5 years old will support one or the other or both.

[...]
You should be more careful and test that nodes exist before trying


to
use them in expressions, as if they don't exist your script will
error and exit. Different browsers insert extra nodes in some
places, you can't be certain that any particular node will have a
firstChild.


no doubt, i had this problem with the extra nodes being inserted. the
<ul> had two <li>'s
but ul.children.length was 5. what is the browser inserting and why? I
believe it was on mozilla


The DOM specifications say where elements should be inserted and
whether or not other elements should follow them. In short, IE and
Mozilla (et al) behave differently so never assume that if you do not
explicitly code any children that there won't be any.

Mozilla (and Firefox and Netscape) have a DOM inspector that is very
useful for seeing where the elements are in the DOM. Below is some
code I wrote some time ago to provide a DOM report for IE - try it
and see the differences between browsers (there is a bit of wrapping
that you'll need to fix).

I should probably re-write it to be much more efficient, but hey...

[...]
As above, use an onclick event, not javascript pseudo-protocol.


Have
the href go somewhere useful for non-JavaScript browsers and return
false to cancel it if your onclick exits successfully.

thats a better idea, but is their anything in particular that bad about
javascript:.....
other than browsers that are js-less faultering?


JS-less browsers will just do nothing. The javascript: label needed
if you've used some other scripting language higher in the page (say
VBscript with IE) but that is extremely rare. It is just one more
thing that can go wrong and is not needed.

[...]
interesting, thanks for the heads up. I dont have much experience
manipulating te DOM and having to do so for multiple browsers. You have
given me a little more insight, thanks.


It's also good to trim unnecessary quotes from replies - keeps 'em
shorter. DOMwalk below.

/* DOM Walk
* Description: Reports on nodes encountered in an HTML page.
* Starts at the provided start point, reports only
* for branch requested. If no start point given,
* will do entire document.
* Call: displayReport(<window_name>,reportDOM(<doc_referen ce>));">
* e.g. displayReport('A
Report',reportDOM(document.getElementById('aDiv')) ;
*/

// adds 1 to last number of index
// e.g. 1,1,2 becomes 1,1,3
function indexAdd(indexVal) {
var a = indexVal.split(',');
var c = '';
for (var i=0; i<a.length; ++i) {
var b = parseInt(a[i]);
if ( i == (a.length - 1)) {++b}
if ( c == '') {c = String(b);
} else {c += ',' + String(b);
} }
return c;
}

// indexTrim
// trims last value from index
// e.g. 1,0,1 becomes 1,0
function indexTrim(indexVal) {
var x = indexVal.split(',');
var z = x[0];
for (var i=1; i<x.length - 1; ++i){
z += ',' + x[i];
} return z;
}

// Navigates a DOM
// Walks down firstChild until the end, then
// retreats to the first nextSibling up the
// tree until it gets back to the start and
// there are not more nextSiblings
function reportDOM(startPoint) {
var idx = '0';
var keepGoing = 'yes';
var msg = '';

if (arguments.length == 0) startPoint = window.document;
if (startPoint) {
var thePoint = startPoint;
var count = 0;
msg = printDetail(count,idx,thePoint,msg);
} else {
alert('startPoint not valid');
keepGoing = 'no';
}

// Keep doing this till I say stop...
while (keepGoing == 'yes') {
// if there are kids
if (thePoint.firstChild) {
thePoint = thePoint.firstChild;
idx += ',' + 0;
++count;
msg = printDetail(count,idx,thePoint,msg);

// Not gone into kid loop, if there are sibs, do them instead
} else if (thePoint.nextSibling) {
thePoint = thePoint.nextSibling;
idx = indexAdd(idx);
++count;
msg = printDetail(count,idx,thePoint,msg);

} else {

// If no kids or sibs, retreat up the tree until find
// a nextSibling. If get to the top without findng one,
// or if keepGoing has been set to no, we've finished
while (!thePoint.nextSibling && keepGoing == 'yes') {
thePoint = thePoint.parentNode;
idx = indexTrim(idx);

// If going up the tree put is back to the top, that's it.
if (idx == '0') keepGoing = 'no';
}

// Have to test here as 'while' not evaluated yet - if
// thePoint.nextSibling undefined ('cos we're at the top)
// script will crash
if (keepGoing == 'yes') {
thePoint = thePoint.nextSibling;
idx = indexAdd(idx);
++count;
msg = printDetail(count,idx,thePoint,msg);
} } }
return msg;
}

// printDetail
// Writes details of the point passed to it
// as HTML. Expects output to be put in a table
function printDetail(c,x,p,m){
m += '<tr><td class=\"count\">' + c + '</td>'
+ '<td class=\"idx\">' + x + '</td>'
+ '<td><span class=\"kind\">' + p.nodeName
if (p.type) {m += ' ' + p.type}
m += '</span></td>'
+ '<td><span class=\"name\">';
if (p.name) {m += p.name;}
if (p.id && p.name) {m += '/' + p.id;}
if (p.id && !p.name) {m += p.id;}
// else {m += '&nbsp;'}
m += '</span></td>'
+ '<td align=\"center\"><span class=\"type\">' + p.nodeType +
'</span></td>'
+ '<td align=\"center\"><span class=\"kids\">' +
p.childNodes.length + '</span></td></tr>';
return m;
}

// displayReport
// Opens a new window and writes the data to it
// thingName is a name of the thing being reported on
// content is the stuff to write
function displayReport(thingName,content) {
repWindow = window.open('','result','width=550,height=700,menu bar=0'
+ ',toolbar=1'
+ ',status=0'
+ ',scrollbars=1'
+ ',resizable=1');
// Styles
repWindow.document.writeln(
'<html><head><title>Report for: '
+ thingName
+ '</title>'
+ '<style type=\"text/css\">'
+ '.plain, .count, .idx, .kind, .name, .type, .kids, .legend'
+ '{font-weight: normal; font-family: sans-serif; '
+ ' font-size: 12px; color: \#333333;} '
+ 'th' + '{border-bottom: 1px solid \#999999;}'
+ 'td' + '{border-bottom: 1px solid \#999999;}'
+ '.count' + '{padding-right: 15; text-align: right;}'
+ '.idx' + '{padding-right: 10;}'
+ '.name' + '{padding-left: 5;}'
+ '</style>' + '</head><body onLoad=\"self.focus()\">'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\"'
+ ' width=\"100\%\"><tr><td style=\"border-bottom: none;\">'
+ '<h2><span class=\"plain\">DOM Walk Report on:</span> '
+ thingName + '</h2>'
+ '</td><td style=\"padding: 0 20 0 0; text-align: right;'
+ ' border-bottom: none;\">'
+ '<a href=\"#NTlegend\">Node Type Legend</a>&nbsp;|&nbsp;'
+ '<a href=\"javascript:window.close();\">Close</a></td>'
+ '</tr></table>'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\">'
+ '<tr><th>\#</th>'
+ '<th align=\"left\">Index</th>'
+ '<th align=\"left\">Kind</th>'
+ '<th align=\"left\">Name/id</th>'
+ '<th align=\"center\">Node Type</th>'
+ '<th align=\"center\">\# Kids</th></tr>'
+ content
+ '</table><br>'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\">'
+ '<tr><th colspan=\"2" align=\"left\">'
+ '<a name=\"NTlegend\">Node Type Legend</a></th></tr>'
+ '<tr><td class="count">1</td><td '
+ 'class="legend">ELEMENT_NODE</td></tr>'
+ '<tr><td class="count">2</td><td '
+ 'class="legend">ATTRIBUTE_NODE</td></tr>'
+ '<tr><td class="count">3</td><td '
+ 'class="legend">TEXT_NODE</td></tr>'
+ '<tr><td class="count">4</td><td '
+ 'class="legend">CDATA_SECTION_NODE</td></tr>'
+ '<tr><td class="count">5</td><td '
+ 'class="legend">ENTITY_REFERENCE_NODE</td></tr>'
+ '<tr><td class="count">6</td><td '
+ 'class="legend">ENTITY_NODE</td></tr>'
+ '<tr><td class="count">7</td><td '
+ 'class="legend">PROCESSING_INSTRUCTION_NODE</td></tr>'
+ '<tr><td class="count">8</td><td '
+ 'class="legend">COMMENT_NODE</td></tr>'
+ '<tr><td class="count">9</td><td '
+ 'class="legend">DOCUMENT_NODE</td></tr>'
+ '<tr><td class="count">10</td><td '
+ 'class="legend">DOCUMENT_TYPE_NODE</td></tr>'
+ '<tr><td class="count">11</td><td '
+ 'class="legend">DOCUMENT_FRAGMENT_NODE</td></tr>'
+ '<tr><td class="count">12</td><td '
+ 'class="legend">NOTATION_NODE</td></tr>'
+ '</table><br>'
+ '<div style=\"padding: 0 20 0 0; text-align: right;\">'
+ '<a href=\"\" '
+ 'onclick=\"javascript:window.close();\">Close</a></div>'
+ '</body></html>'
);
repWindow.document.close();
}

--
Rob
Jul 23 '05 #5

P: n/a
RobG wrote:
[...]

I should probably re-write it to be much more efficient, but hey...


Just dug up a newer version with a few less lines. If no start point
is given, it just does the whole document. Quick 'n dirty.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> recursive DOMwalk </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
var rpt = [];
function domWalk(n,x) {
rpt.push('<tr><td>' + x
+ '</td><td>' + n.nodeName
+ '</td><td>' + n.nodeType
+ '</tr>');
for (var i=0; i<n.childNodes.length; i++) {
domWalk(n.childNodes[i],x+'.'+i);
}
}

function domReport(s){
rpt.length = 0;
rpt.push('<table><tr><th>Index</th>'
+ '<th>nodeName</th><th>nodeType</th></tr>');
if ( s && '' != s) {
domWalk(document.getElementById(s),'');
} else {
domWalk(document.getElementsByTagName('body')[0],'0');
}
rpt.push('</table>');
document.getElementById('xx').innerHTML = rpt.join('');
}
</script>
</head>
<body onload="domReport();">

<div>
<p>Here is <b>some</b> text</p>
<p>Here is <b>some</b> <i>text</i></p>
<p>Here is some text</p>
</div>

<div id="xx"></div>

</body>
</html>
--
Rob
Jul 23 '05 #6

P: n/a
RobG wrote:
hs********@yahoo.com wrote:
RobG wrote:
hs********@yahoo.com wrote: <snip> <a href="javascript:attachAnother('uploadList');">Bla h</a> the href go somewhere useful for non-JavaScript browsers and
return false to cancel it if your onclick exits successfully.

thats a better idea, but is their anything in particular that
bad about javascript:.....
other than browsers that are js-less faultering?


JS-less browsers will just do nothing. The javascript: label
needed if you've used some other scripting language higher
in the page (say VBscript with IE) but that is extremely rare.
It is just one more thing that can go wrong and is not needed.

<snip>

You under state the situation. While the outcome on a javascript
disabled browser is less than useful (navigating to an internally
generated error page because the protocol used was not recognised/could
not be resolved), and certainly worse than staying on the same page and
just doing nothing, javascript pseudo-protocol HREFs produce undesirable
effects even on script capable and enabled browsers sufficient to
justify a blanket recommendation that they _never_ be used where their
use does not directly result in the replacement of the entire contents
of the page.

Activating javascript HREFs is (not unreasonably) taken by the browser
as representing navigation away from the page (as activating almost any
HREF could be expected to, except for fragment identifiers). Some
browsers (including, but not nearly exclusively, versions of Windows IE)
take the initialisation of navigation away from a page as an opportunity
to stop doing resource-hungry activity on the current page. The page
goes into a 'waiting' state pending its expected replacement.

Very apparent symptoms of this transition to a 'waiting' state have been
reported as, for example, the browser stops animating animated GIF
images, it stops rendering 'swapped' images, and so on. Specific
symptoms have been attributed to the use of javascript pseudo-protocol
HREFs on a number of browsers but the full consequences of a browser
putting a page into a 'waiting' state are not known. It seems likely
that at least some of the otherwise unresolved problems reported on this
group could also be demonstrated to be due to the same cause, if only
the originators of the questions had engaged in the problem solving
process to the extent of providing test-case examples.

In Short; when a page has been put into a 'waiting' state by the
activation of any javascript pseudo-protocol HREF all bets are off as to
what will be possible in the resulting environment. And whether and
which browsers put a page into a 'waiting' state in response to the
activation of a javascript pseudo-protocol HREF (and the practical
consequences of doing so) is undocumented.

There are people who will assert that javascript pseudo-protocol HREFs
are correct and harmless (even some who are nutty enough to propose that
they are a good idea in some circumstances), but those opinions are a
result of inexperience. The harmful consequences will manifest
themselves in some environment eventually. At least for anyone who has
not observed that there are no environments in which a javascript
pseudo-protocol HREF can be used where an alternative doesn't exist
(mostly navigation cancelling onclick handlers), as the others may
abandon their use before actually seeing the folly in their use.

Richard.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.