473,703 Members | 2,336 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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="javascrip t:attachAnother ('uploadList'); ">Blah</a></li>
</ul>
<span class="line">&n bsp;</span><br/>
<input type="submit" id="upload" />
</form>
CODE:

function attachAnother(e )
{
var li,id,fileLi,fi le;
var end = document.getEle mentById('end')
var ul = document.getEle mentById(e);

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

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

if(fileLi.first Child.value != ''") {

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

Jul 23 '05 #1
6 2832
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
hs********@yaho o.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="javascrip t:attachAnother ('uploadList'); ">Blah</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.ht ml" onclick="
return attachAnother(' uploadList');"> Blah</a></li>
</ul>
<span class="line">&n bsp;</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,fi le;
var end = document.getEle mentById('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.getEl ementById) {
end = document.getEle mentById('end') ;
} else if (document.all) {
end = document.all['end'];
}
var ul = document.getEle mentById(e);
If you are going to use document.getEle mentById frequently, you may
wish to include something like the DynWrite function suggested on
this group's FAQ:

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

if( ul == null || end == null || ul.childNodes.l ength < 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.l ength-2];

if(fileLi.first Child.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 getElementsByTa gName, you will have much
more certain results.

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

//file = fileLi.firstChi ld.clone();
id = 'liFile' + fileCount;
Where is 'fileCount' initialised?
li = document.create Element('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="javascrip t: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.getE lementById && document.all) {
document.getEle mentById = function(id){
return document.all[id];
}
}

function attachAnother(e le) {
var li,id,fileLi,fi le;
var end = document.getEle mentById('end')
var ul = document.getEle mentById(ele);
if( !ul || !end || ul.childNodes.l ength < 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.l ength-2];
var inputs = ul.getElementsB yTagName('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.create Element('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.create Element('input' );
oInp.type = 'file'
oInp.name = 'File-' + fileCount;

// Create link
var oA = document.create Element('a');
oA.href = 'aUsefulURI.htm l';
oA.onclick =
function() {
return removeFile(this .parentNode)
};

// Add text to link
oA.appendChild( document.create TextNode('Remov e Upload'));

// Add 'em all before last li
oLi.appendChild (oInp);
oLi.appendChild (oA);
end.parentNode. insertBefore(oL i,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.re moveChild) {
return !a.parentNode.r emoveChild(a);
}
return true;
}

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


--
Rob
Jul 23 '05 #3
1st off thanks for such a thurouh response.

RobG wrote:
hs********@yaho o.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="javascrip t:attachAnother ('uploadList'); ">Blah</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.ht ml" onclick="
return attachAnother(' uploadList');"> Blah</a></li>
</ul>
<span class="line">&n bsp;</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,fi le;
var end = document.getEle mentById('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.getEl ementById) {
end = document.getEle mentById('end') ;
} else if (document.all) {
end = document.all['end'];
}
var ul = document.getEle mentById(e);
If you are going to use document.getEle mentById frequently, you may
wish to include something like the DynWrite function suggested on
this group's FAQ:

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


will check this out

if( ul == null || end == null || ul.childNodes.l ength < 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.l ength-2];

if(fileLi.first Child.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.len gth 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 getElementsByTa gName, you will have much more certain results.
will do if( fileLi && fileLi.firstChi ld && fileLi.firstChi ld.value != ''") {

//file = fileLi.firstChi ld.clone();
id = 'liFile' + fileCount;
Where is 'fileCount' initialised?
li = document.create Element('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="javascrip t: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.getE lementById && document.all) {
document.getEle mentById = function(id){
return document.all[id];
}
}

function attachAnother(e le) {
var li,id,fileLi,fi le;
var end = document.getEle mentById('end')
var ul = document.getEle mentById(ele);
if( !ul || !end || ul.childNodes.l ength < 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.l ength-2];
var inputs = ul.getElementsB yTagName('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.create Element('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.create Element('input' );
oInp.type = 'file'
oInp.name = 'File-' + fileCount;

// Create link
var oA = document.create Element('a');
oA.href = 'aUsefulURI.htm l';
oA.onclick =
function() {
return removeFile(this .parentNode)
};

// Add text to link
oA.appendChild( document.create TextNode('Remov e Upload'));

// Add 'em all before last li
oLi.appendChild (oInp);
oLi.appendChild (oA);
end.parentNode. insertBefore(oL i,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.re moveChild) {
return !a.parentNode.r emoveChild(a);
}
return true;
}

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


--
Rob


Jul 23 '05 #4
hs********@yaho o.com wrote:
1st off thanks for such a thurouh response.

RobG wrote:
hs********@ya hoo.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.len gth 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>,re portDOM(<doc_re ference>));">
* e.g. displayReport(' A
Report',reportD OM(document.get ElementById('aD iv'));
*/

// adds 1 to last number of index
// e.g. 1,1,2 becomes 1,1,3
function indexAdd(indexV al) {
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(index Val) {
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(start Point) {
var idx = '0';
var keepGoing = 'yes';
var msg = '';

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

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

// Not gone into kid loop, if there are sibs, do them instead
} else if (thePoint.nextS ibling) {
thePoint = thePoint.nextSi bling;
idx = indexAdd(idx);
++count;
msg = printDetail(cou nt,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.next Sibling && keepGoing == 'yes') {
thePoint = thePoint.parent Node;
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.nextSi bling undefined ('cos we're at the top)
// script will crash
if (keepGoing == 'yes') {
thePoint = thePoint.nextSi bling;
idx = indexAdd(idx);
++count;
msg = printDetail(cou nt,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.le ngth + '</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(t hingName,conten t) {
repWindow = window.open('', 'result','width =550,height=700 ,menubar=0'
+ ',toolbar=1'
+ ',status=0'
+ ',scrollbars=1'
+ ',resizable=1') ;
// Styles
repWindow.docum ent.writeln(
'<html><head><t itle>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.f ocus()\">'
+ '<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=\"#NTlegen d\">Node Type Legend</a>&nbsp;|&nbsp; '
+ '<a href=\"javascri pt: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_REFEREN CE_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_INS TRUCTION_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_NOD E</td></tr>'
+ '<tr><td class="count">1 0</td><td '
+ 'class="legend" >DOCUMENT_TYPE_ NODE</td></tr>'
+ '<tr><td class="count">1 1</td><td '
+ 'class="legend" >DOCUMENT_FRAGM ENT_NODE</td></tr>'
+ '<tr><td class="count">1 2</td><td '
+ 'class="legend" >NOTATION_NOD E</td></tr>'
+ '</table><br>'
+ '<div style=\"padding : 0 20 0 0; text-align: right;\">'
+ '<a href=\"\" '
+ 'onclick=\"java script:window.c lose();\">Close </a></div>'
+ '</body></html>'
);
repWindow.docum ent.close();
}

--
Rob
Jul 23 '05 #5
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.child Nodes[i],x+'.'+i);
}
}

function domReport(s){
rpt.length = 0;
rpt.push('<tabl e><tr><th>Index </th>'
+ '<th>nodeName</th><th>nodeType </th></tr>');
if ( s && '' != s) {
domWalk(documen t.getElementByI d(s),'');
} else {
domWalk(documen t.getElementsBy TagName('body')[0],'0');
}
rpt.push('</table>');
document.getEle mentById('xx'). innerHTML = rpt.join('');
}
</script>
</head>
<body onload="domRepo rt();">

<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
RobG wrote:
hs********@yaho o.com wrote:
RobG wrote:
hs********@yaho o.com wrote: <snip> <a href="javascrip t:attachAnother ('uploadList'); ">Blah</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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
2575
by: Alexander Ross | last post by:
I have an html snippet, and I want to remove any <span> tags that have a specific attribute (class=none) ex. The quick brown <span class="animal">fox</span> jumped <span class="none">over</span> the lazy dog should become The quick brown <span class="animal">fox</span> jumped over the lazy dog
13
3397
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to <foo/>) From XHTML specification:
4
2283
by: DMJ | last post by:
What is the difference between these two tags?
5
29578
by: Kathryn | last post by:
Good morning! I am having a problem with a span. I have items, of which I only want to show the first X characters on the screen. If the user prints the page, I want the entire item to print. Thanks to Els, I have a way to do this, see below, directly from the View Source: This is a long piece of text. This is a long piece of text. This
3
3280
by: Andrew Tang | last post by:
Hi. I'm having problems with the following code. The last line seems to be in the wrong place, its been moved down slightly by about 3 pixels in IE6. <html> <head> <title>Lorem Ipsum</title> </head> <body> <p> <span style="font-size:10px;">Lorem ipsum dolor sit amet, consectetuer
18
4382
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
6837
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the span element. The default mouse action will only select the words when i move the mouse. Can...
2
19581
by: xhe | last post by:
I met a very headache problem in javascript, I think this might be difference between IE and NS / Safari. I have a text area <form> <textarea name='tex1' onkeyup='displayit();'></textarea> </form> <span id="txtValue"></span> <script language='javascript'>
1
6859
by: shivani anand | last post by:
Hi.. I have a doubt. I have some code.. <span class="test1"> my screeen </span> I simply changed it to. <h2 class = "test1"> my screen </h2>
0
8760
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8670
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9254
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9122
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9017
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7872
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6592
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
3125
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2070
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.