Deleting effect like icon-recycle bin

[Luke Skywalker]

Hi guys,
I have to simulate the removing of a file in Windows with javascript: in
other words I drag an image above a layer and the image disappears (like the
recycle bin).

I know (or better I thought to know) the way to write the script: in effect
I'm not able to indicate to browser that the image is above the layer.

This is the code (in short):

<img id="to_remove" title="File unnecessary" />

<div id="recycle_bin" onmouseover="verify('onmouseover');"
onmouseout="verify('onmouseout');">
The recycle bin. Drag an image here to remove it.
</div>

The function verify() is:

var recycle_bin=false;

function verify(_event) {
if (_event=="onmouseover") {
recycle_bin=true;
} else if (_event=="onmouseout") {
recycle_bin=false;
}
}

After, in the document.onmouseup event:

document.onmouseup=function() {
// ...here the code to stop drag'n'drop
if (recycle_bin) {
alert("Image removed");
}
}

The trouble is that when I drag the image above the layer, the onmouseover
event of the layer is not executed (in effect the cursor is onmouseover the
image I'm dragging). How can I do? Do you have alternative ideas or you know
how script.aculo.us do?

Thanks in advance.

--
Luke S.

[JonasSchneider]

why don't you use script.aculo.us?
Luke Skywalker schrieb:

[...]
The trouble is that when I drag the image above the layer, the onmouseover
event of the layer is not executed (in effect the cursor is onmouseover the
image I'm dragging). How can I do? Do you have alternative ideas or you know
how script.aculo.us do?

[Luke Skywalker]

> why don't you use script.aculo.us?

'cause I don't understand how they do to make the effect I'm looking for and
the whole script is too large (and complex) for my target (it would be like
to use a gun to kill a mosquito).
I tried to read the scripts but I didn't find where script.aculo.us specify
how to execute the onmouseover of the layer.

Thanks however for your reply. Someone else can help me?

--
Luke S.

[Thomas 'PointedEars' Lahn]

Luke Skywalker wrote:

I have to simulate the removing of a file in Windows with javascript: in
other words I drag an image above a layer and the image disappears (like
the recycle bin).

I know (or better I thought to know) the way to write the script: in
effect I'm not able to indicate to browser that the image is above the
layer.
That is not a question of script programming.
This is the code (in short):

<img id="to_remove" title="File unnecessary" /> ^
IE does not support XHTML, --------------------'
and in HTML that is equivalent to "<img ...>&gt;",
unless falsely error-corrected.

Furthermore, this `img' element lacks the `alt' attribute value
to be Valid (X)HTML.

<URL:http://validator.w3.org/>
<div id="recycle_bin" onmouseover="verify('onmouseover');"
onmouseout="verify('onmouseout');">
The recycle bin. Drag an image here to remove it.
</div>
The `div' element was included after the `img' element, hence it
will always be displayed on top of it, unless specified otherwise,
e.g.:

<img src="..." alt="..." style="z-index:2">

<div ... style="z-index:1">...</div>

See <URL:http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index>
for details.
[...]
The trouble is that when I drag the image above the layer, the onmouseover
event of the layer is not executed (in effect the cursor is onmouseover
the image I'm dragging). How can I do? Do you have alternative ideas
Use the ondrag* event handlers. Since they are not part of Valid HTML, you
have to assign the event listeners through scripting in order to keep your
markup Valid.

<URL:http://xulplanet.com/references/elemref/ref_EventHandlers.html>
<URL:http://msdn.microsoft.com/workshop/author/dhtml/dhtml_node_entry.asp>
or you know how script.aculo.us do?

Read the Source, Luke. [1]
PointedEars
___________
[1] That's my usual reply, but it could not fit better here :)

[Luke Skywalker]

> That is not a question of script programming.

I don't understand what you mean... what's my question?

Furthermore, this `img' element lacks the `alt' attribute value
to be Valid (X)HTML.
I write the code on the fly, just to explain better my question. Sorry for
the errors.
Use the ondrag* event handlers. Since they are not part of Valid HTML, you have to assign the event listeners through scripting in order to keep your
markup Valid.

<URL:http://xulplanet.com/references/elemref/ref_EventHandlers.html>
<URL:http://msdn.microsoft.com/workshop/author/dhtml/dhtml_node_entry.asp>

Thanks for your time, I'm trying with the posted urls.

Luke S.

[Thomas 'PointedEars' Lahn]

Luke Skywalker wrote:

That is not a question of script programming.
I don't understand what you mean... what's my question?

Your problem that the `div' element is displayed above the `img' element (on
the z-axis) when the latter is dragged on it is not something that is to be
solved by script programming (the figure of speech for this being AFAIK "is
not a question of ...").

Use the ondrag* event handlers. Since they are not part of Valid HTML,

you

^^
Please visit <URL:http://insideoe.com/> to work around the major flaws
in the NetNews client software you are using, or consider switching to
better software, like Mozilla Thunderbird.

<URL:http://www.mozilla.com/thunderbird/>

And please provide attribution of quoted material in the future, as
described in the newsgroup's FAQ:

<URL:http://jibbering.com/faq/faq_notes/pots1.html>
Thanks for your time, I'm trying with the posted urls.

You're welcome.
PointedEars

[Luke Matuszewski]

Thomas 'PointedEars' Lahn napisal(a):

<img id="to_remove" title="File unnecessary" />

^
IE does not support XHTML, --------------------'
and in HTML that is equivalent to "<img ...>&gt;",
unless falsely error-corrected.

This statement is wrong in my assumption. For HTML source code the
appropriate parser is called 'soap parser'. It means that is it will
'skip all not known elements of markup'. For my perspective the:
<img id="to_remove" title="File unnecessary" alt="remove_image" />
, is perfectly good - it is well 'understood' by common HTML parsers
and furthermore it is valid under XHTML. Notice however that there is a
space between " and /> - if omitted it could make trouble.

If my words are not true - point me an address/resource/whatever which
says otherwise.

Best regards.
Luke.

[Thomas 'PointedEars' Lahn]

Luke Matuszewski wrote:

Thomas 'PointedEars' Lahn napisal(a):

> <img id="to_remove" title="File unnecessary" /> ^
IE does not support XHTML, --------------------'
and in HTML that is equivalent to "<img ...>&gt;",
unless falsely error-corrected.

This statement is wrong in my assumption.

Your assumption is what is wrong here.
For HTML source code the appropriate parser is called 'soap parser'.
The appropriate parser für HTML is an SGML parser as that is an SGML
application per its Specifications.[1] That few Web browsers use such
a strict parser does not make the parsed code correct or even Valid,
because Web browsers are only a subset of HTML user agents. Therefore
I wrote "falsely error-corrected"; that false error-correction (correct
would be to render the markup as described) is part of the behavior of
"_tag soup_ parsers" in Web browsers; it is not of the W3C Markup
Validator[2], _e.g._

Non-Valid markup is non-interoperable markup, which is a Bad Thing.[3]
It means that is it will skip all not known elements of markup'.
The SGML SHORTTAG feature that is enabled for HTML is not an unknown
element of HTML markup. It is well specified[4] and documented, and
even partially supported by current implementations.[5]
is perfectly good - it is well 'understood' by common HTML parsers
If they do not understand it as "<img ...>&gt;", those are _not_ really
HTML parsers, but, as you tried to point out, "tag soup parsers".
and furthermore it is valid under XHTML.

As one of the major browsers (IE) still does not support XHTML, that
does not bear any meaning regarding the usefulness of that code. Take

<script type="text/javascript" src="foo.js" />

for example, which is perfectly Valid XHTML but will probably not work as
supposed in IE even if declared as such: first thing is that IE does not
support the proper media type for XHTML, application/xhtml+xml; second is
that if that markup is served with the media type text/html, the above is
probably parsed (due to the mentioned false error-correction) to the HTML
markup

<script type="text/javascript" src="foo.js">

The `script' element would be not closed, hence all following markup was
considered script code which would probably cause this content not to be
displayed and instead cause a SyntaxError in that UA.[6]

Those are well-known facts that have often (enough) been discussed here.[7]

See also <URL:http://hixie.ch/advocacy/xhtml>
PointedEars
___________
[1] <URL:http://www.w3.org/TR/REC-html32>
<URL:http://www.w3.org/TR/html4/>
<URL:https://www.cs.tcd.ie/15445/15445.html>
<URL:http://rfc-editor.org/rfc/rfc2854.txt>
[2] <URL:http://validator.w3.org/>
[3] <URL:http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
[4] <URL:http://www.w3.org/TR/html4/sgml/sgmldecl.html>
[5] <URL:http://www.dodabo.de/html+css/tests/shorttag.html>
[6]
<URL:http://groups.google.com/group/comp.lang.javascript/msg/ec*******************************************@Poin tedEars.de>
[7]
<URL:http://groups.google.com/groups?as_q=XHTML&as_ugroup=comp.lang.javascript&s coring=d&filter=0>

[John Bokma]

"Luke Matuszewski" <ma****************@gmail.com> wrote:

This statement is wrong in my assumption. For HTML source code the
appropriate parser is called 'soap parser'.

Go wash your mouth with soap, please :-D.

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html

[Luke Matuszewski]

Thomas 'PointedEars' Lahn napisal(a):

If they do not understand it as "<img ...>&gt;"
Ok, now i see the point.
As one of the major browsers (IE) still does not support XHTML,
And it will not support even in IE 7 (i have IE 7 beta 1 and it still
not supports major CSS 2 properties like min-width, furthermore
supported width property is treated by IE as min-width which is bad
thing :( ).
Take

<script type="text/javascript" src="foo.js" />

for example, which is perfectly Valid XHTML but will probably not work as
supposed in IE
Therefor i use

<script type="text/javascript" src="foo.js"></script>

construct, which will be treated well by IE.
<URL:http://www.w3.org/TR/REC-html40/interact/scripts.html#edef-SCRIPT>

[1] <URL:http://www.w3.org/TR/REC-html32>
[and many other links]

Thanks for many materials.

The solution for empty elements is to use the long form of it (when
writting HTML that will be valid XHTML 1.0) eg.

<img ...></img>

<URL:http://www.w3.org/TR/xhtml1/#guidelines>

Another thing is UAs with soup parsers, which may treat eg.

<br></br>

, as double <br> not one ! and it will be harmfull. Another thing is
inputs:

<input...></input>

I wonder how Konqueror will handle this empty elements...

Due to this restrictions, i turned to point where writting HTML as
valid XHTML isn't possible taking the different UAs implementations of
parsers.

Best regards.
Luke.

[John Bokma]

"Luke Matuszewski" <ma****************@gmail.com> wrote:

Due to this restrictions, i turned to point where writting HTML as
valid XHTML isn't possible taking the different UAs implementations of
parsers.

Why do you want to use XHTML?

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html

[Luke Matuszewski]

John Bokma napisal(a):

Why do you want to use XHTML?

I am currently working on large project, which will be maintained along
many years from now. Its interface is build using HTML 4.01 strict - by
appropriate doctype (to make it work as close as UA can get to w3c CSS
standards). Target browsers are IE, Gecko engine UAs, Opera, Konqueror.
In future probably it will be rewritten to XHTML for many reasons (as
many as XML is for), so it is wise to think over it now to avoid
unnecessary work in future.

[John Bokma]

"Luke Matuszewski" <ma****************@gmail.com> wrote:

John Bokma napisal(a):

Why do you want to use XHTML?

I am currently working on large project, which will be maintained along
many years from now. Its interface is build using HTML 4.01 strict - by
appropriate doctype (to make it work as close as UA can get to w3c CSS
standards). Target browsers are IE, Gecko engine UAs, Opera, Konqueror.
In future probably it will be rewritten to XHTML for many reasons (as
many as XML is for),

which reasons?

And why not just define it in XML and transform it to HTML 4.01 (see
below). You profit from both worlds :-D.
so it is wise to think over it now to avoid
unnecessary work in future.

Yup, I do the same. Hence my site (personal page) is defined (most of it)
in a few XML files, and a small perl script spits out HTML 4.01 strict.

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html

[Luke Matuszewski]

John Bokma napisal(a):

"Luke Matuszewski" <ma****************@gmail.com> wrote:

John Bokma napisal(a):

Why do you want to use XHTML?

I am currently working on large project, which will be maintained along
many years from now. Its interface is build using HTML 4.01 strict - by
appropriate doctype (to make it work as close as UA can get to w3c CSS
standards). Target browsers are IE, Gecko engine UAs, Opera, Konqueror.
In future probably it will be rewritten to XHTML for many reasons (as
many as XML is for),

which reasons?

As many XML was designed for.
Yup, I do the same. Hence my site (personal page) is defined (most of it)
in a few XML files, and a small perl script spits out HTML 4.01 strict.

UI is generated via JSP pages, and we mainly write pages using custom
tags... it was a matter of decision (we have not considered Cocon or
other framework).

[John Bokma]

"Luke Matuszewski" <ma****************@gmail.com> wrote:

John Bokma napisal(a):

"Luke Matuszewski" <ma****************@gmail.com> wrote:

>
> John Bokma napisal(a):
>>
>> Why do you want to use XHTML?
>>
>
> I am currently working on large project, which will be maintained
> along many years from now. Its interface is build using HTML 4.01
> strict - by appropriate doctype (to make it work as close as UA can
> get to w3c CSS standards). Target browsers are IE, Gecko engine
> UAs, Opera, Konqueror. In future probably it will be rewritten to
> XHTML for many reasons (as many as XML is for),
which reasons?

As many XML was designed for.

Can you name them, or the 3 most important ones? (Since you seem to keep
avoiding the question).

Yup, I do the same. Hence my site (personal page) is defined (most of
it) in a few XML files, and a small perl script spits out HTML 4.01
strict.

UI is generated via JSP pages, and we mainly write pages using custom
tags...

Ah, but you still could control it via an XML template :-D.
it was a matter of decision (we have not considered Cocon or
other framework).

Uhm: so you just took JSP.

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html

[Thomas 'PointedEars' Lahn]

Luke Matuszewski wrote:

Thomas 'PointedEars' Lahn napisal(a):

If they do not understand it as "<img ...>&gt;"
Ok, now i see the point.

Grand, and would you please learn to mark omissions in cited material?

Take

<script type="text/javascript" src="foo.js" />

for example, which is perfectly Valid XHTML but will probably not work as
supposed in IE

Therefor i use

<script type="text/javascript" src="foo.js"></script>

construct, which will be treated well by IE.
<URL:http://www.w3.org/TR/REC-html40/interact/scripts.html#edef-SCRIPT>

And is described in Appendix C of the XHTML 1.0 Specification.
However, why would you want to use XHTML then? Just to "be cool"?

[1] <URL:http://www.w3.org/TR/REC-html32>
[and many other links]

Thanks for many materials.

The solution for empty elements is to use the long form of it (when
writting HTML that will be valid XHTML 1.0) eg.

<img ...></img>

<URL:http://www.w3.org/TR/xhtml1/#guidelines>

As I said and explained many times before, that HTML Compatibility
Guidelines of XHTML 1.0 Appendix C are nonsense. SGML applications
and XML applications cannot be made compatible. It "works" with using
optional close tags for HTML elements that have an empty content model,
but that is it.
[...]
Due to this restrictions, i turned to point where writting HTML as
valid XHTML isn't possible taking the different UAs implementations
of parsers.

Finally.
PointedEars

[Thomas 'PointedEars' Lahn]

Luke Matuszewski wrote:

I am currently working on large project, which will be maintained along
many years from now. Its interface is build using HTML 4.01 strict - by
appropriate doctype (to make it work as close as UA can get to w3c CSS
standards). Target browsers are IE, Gecko engine UAs, Opera, Konqueror.
OK.
In future probably it will be rewritten to XHTML for many reasons (as
many as XML is for), so it is wise to think over it now to avoid
unnecessary work in future.

Nonsense. HTML will not expire because of XHTML, and converting HTML 4.01
Strict markup to XHTML 1.0 Strict markup is a matter of seconds.

It will rather expire because the Web as-we-know-it will, and then not even
XHTML will help you. ISTM that you are falling for nothing but a hype.
PointedEars

[Luke Matuszewski]

Thomas 'PointedEars' Lahn napisal(a):

[...] would you please learn to mark omissions in cited material?

Will try better.

[John Bokma]

Thomas 'PointedEars' Lahn <Po*********@web.de> wrote:

Luke Matuszewski wrote:

[..]

In future probably it will be rewritten to XHTML for many reasons (as
many as XML is for), so it is wise to think over it now to avoid
unnecessary work in future.

Nonsense. HTML will not expire because of XHTML, and converting HTML
4.01 Strict markup to XHTML 1.0 Strict markup is a matter of seconds.

Yup, I am still curious for the reasons why XHTML has been chosen over
HTML.

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html