RE: wrapping li nodes in IE
"Brendan Gogarty" <[email protected]> Mon, 5 Jun 2006 10:30:31 +0100
| Newsgroups | gmane.comp.web.dom.wdf |
|---|---|
| Message-ID | <DB3EFC70F425F0439435CE3109DD7FA2054467@dastardly.phgu.srl.cam.ac.uk> |
Hi Chris/others,
Thanks, I like your idea of internalising the spans, which I will give a
go!
However, I am not sure that (at least my version of IE) isn't a little
buggy when it comes to <li> spans. To indicate what I was referring to
in the previous post, take the HTML you posted and apply a garish style
to the li's - I put a red dotted border around them. You'll see that the
uppermost <li> wraps all below tags and the 2nd wraps the two
subordinate tags, even though its the <ul>'s job to do this.
Then ... write a quick script to get I.E to dump the postload HTML into
a textarea - this is even weirder, as it completely negates the first
two closing tags and appends them to the bottom!
like this ... very strange, and unhelpful semantics - can anyone
explain this behaviour?
-----------------------------------------
<UL>
<LI><SPAN>node</SPAN>
<LI><SPAN>node</SPAN>
<UL>
<LI><SPAN>node</SPAN>
<LI><SPAN>node</SPAN> </LI></UL></LI></UL>
-----------------------------------------
Firefox on the other hand, simply pastes the original, correct version
of the HTML to the textarea.
The script to create the above is below ....
<style>
li {
border:2px red dotted;
}
</style>
<script>
function dumpDiv() {
document.getElementById('testarea').value=document.getElementById('testd
iv').innerHTML;
}
</script>
<div id='testdiv'>
<ul>
<li><span>node</span></li>
<li><span>node</span>
<ul>
<li><span>node</span></li>
<li><span>node</span></li>
</ul>
</li>
</ul>
</div>
<textarea id='testarea' cols="50" rows="8">
</textarea>
<button onclick= dumpDiv()>click</button>
cheers,
Brendan.
-----Original Message-----
From: [email protected] [mailto:[email protected]]
On Behalf Of Chris
Sent: 03 June 2006 17:50
To: [email protected]
Subject: Re: [wdf-dom] wrapping li nodes in IE
Hi Brendan,
I've actually written a script that does what you're trying to
do, and I
think this is a case of misdiagnosis - IE actually interprets ul
and li
tags properly so long as you consistently close each correctly.
Violating the DOM rules of ul/li however will most certainly get
you
inconsistent results across browsers, so the path of wrapping in
DIVs
may actually lead you to a much worse problem.
The HTML I ultimately ended up with was:
<ul>
<li><span>node</span></li>
<li><span>node</span>
<ul>
<li><span>node</span></li>
<li><span>node</span></li>
</ul>
</li>
</ul>
The onclick sorts of events and collision detection boxes are
all based
on the span tags, not the li tags. A parent li tag containing a
ul tag
rightly contains and is comprised of the child ul's and li's, in
both IE
and the rest of the big 4. When you actually move a node you
need to
check that span's parentNode and move that instead.
Certainly, certainly don't wrap the li tags in divs, a la:
<div><li>node</li></div>
That will definitely make things harder for you.
Cheers,
-Chris Moschini
there_are_no_ids_available_argh wrote:
> Hi, I'm really hoping someone here can help me as I've run out
of
> ideas and am running behind schedule!
>
> We have implemented a drag-drop list management script which
allows
> moving, dropping into, removing of <li></li> elements from a
> structured <ul> list.
>
> Unfortunately internet explorer doesn't consider <li> tags to
be
> elements in their own right - skipping the closing </li> tag.
This
> means that any subordinate <li> or <ul> tags are wrapped in
previous
> <li> tags - wreaking havok with the drag-drop detection on
individual
> list elements.
>
> This is not a problem in other standards compliant browsers
>
> Our solution has been to wrap the <li> tags in a blank
container <div>
> tag using server side code. However, we'd like to be able to
implement
> the script entirely on the client side in some instances.
Subsequently
> I need to write a DOM script that will iterate through a list
wrapping
> all <li> elements + their child nodes in a container <div>
tag.
> Obviously because this is an explorer fault it only needs to
work in
> explorer.
>
> The problem is that because explorer doesn't seem to recognise
<li>
> ranges I can't cut everything between <li> and </li> anyway.
I've
> tried many variant functions (one of which is included below)
but
> can't come up with a solution. Any assistance/advice would be
most
> gratefully recieved.
>
> thanks
> brendan.
>
> function wrapLI_elements3(divID) {
>
> // get container div
>
> var oWorkItem =
document.getElementById(divID);
>
> // get all li child nodes
> var aReturn=oWorkItem.getElementsByTagName("li");
>
> // declare variables
>
> var this_val;
> var this_parent;
> var this_node;
>
>
>
> for (a=0;a<aReturn.length;a++) {
>
> var this_node =aReturn[a];
> var this_parent = this_node.parentNode;
>
> // create a new container div
> var newNode =
document.createElement("div");
>
> /* give the node some
> attributes so we can see
> this is working
> */
>
> newNode.style.backgroundColor='yellow';
> newNode.style.border = '1px blue solid';
>
> // insert the blank container div
> this_parent.insertBefore(newNode);
>
> /* remove current li node and
> place it into variable
> */
>
> var removed_node =
this_parent.parentNode.removeChild(this_node);
>
> // place variable node into container
> newNode.appendChild(removed_node);
>
>
> } // end for
>
>
>
>
>
> } // end function
>
Unsubscribe
[email protected]
List info
http://www.quirksmode.org/dom/list.html
SPONSORED LINKS
Dom perignon
<http://groups.yahoo.com/gads?t=ms&k=Dom+perignon&w1=Dom+perignon&w2=Dom
+pedro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=Dom+henrique+
hotel&w6=Dom+pedro+hotel&c=6&s=131&.sig=oLFEYmmvBQ3MHVhNromZAA>
Dom pedro lisboa
<http://groups.yahoo.com/gads?t=ms&k=Dom+pedro+lisboa&w1=Dom+perignon&w2
=Dom+pedro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=Dom+henri
que+hotel&w6=Dom+pedro+hotel&c=6&s=131&.sig=cdto0CUgs12DVmFPHeXi7w>
Javascript dropdown menu
<http://groups.yahoo.com/gads?t=ms&k=Javascript+dropdown+menu&w1=Dom+per
ignon&w2=Dom+pedro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=D
om+henrique+hotel&w6=Dom+pedro+hotel&c=6&s=131&.sig=h-Qjyug9fk34SJX1thZp
TA>
Javascript
<http://groups.yahoo.com/gads?t=ms&k=Javascript&w1=Dom+perignon&w2=Dom+p
edro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=Dom+henrique+ho
tel&w6=Dom+pedro+hotel&c=6&s=131&.sig=RmlZYcIcqnFpbvbxQfeiiQ> Dom
henrique hotel
<http://groups.yahoo.com/gads?t=ms&k=Dom+henrique+hotel&w1=Dom+perignon&
w2=Dom+pedro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=Dom+hen
rique+hotel&w6=Dom+pedro+hotel&c=6&s=131&.sig=GjVzQc700DJFEAu6jCh-fA>
Dom pedro hotel
<http://groups.yahoo.com/gads?t=ms&k=Dom+pedro+hotel&w1=Dom+perignon&w2=
Dom+pedro+lisboa&w3=Javascript+dropdown+menu&w4=Javascript&w5=Dom+henriq
ue+hotel&w6=Dom+pedro+hotel&c=6&s=131&.sig=n7ci1ug8M15jdRET0kEqZg>
_____
YAHOO! GROUPS LINKS
* Visit your group "wdf-dom
<http://groups.yahoo.com/group/wdf-dom> " on the web.
* To unsubscribe from this group, send an email to:
[email protected]
<mailto:[email protected]?subject=Unsubscribe>
* Your use of Yahoo! Groups is subject to the Yahoo!
Terms of Service <http://docs.yahoo.com/info/terms/> .
_____
[Non-text portions of this message have been removed]
------------------------ Yahoo! Groups Sponsor --------------------~-->
You can search right from your browser? It's easy and it's free. See how.
http://us.click.yahoo.com/_7bhrC/NGxNAA/yQLSAA/9rHolB/TM
--------------------------------------------------------------------~->
Unsubscribe
[email protected]
List info
http://www.quirksmode.org/dom/list.html
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/wdf-dom/
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/