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="ve rify('onmouseov er');"
onmouseout="ver ify('onmouseout ');">
The recycle bin. Drag an image here to remove it.
</div>

The function verify() is:

var recycle_bin=fal se;

function verify(_event) {
if (_event=="onmou seover") {
recycle_bin=tru e;
} else if (_event=="onmou seout") {
recycle_bin=fal se;
}
}

After, in the document.onmous eup event:

document.onmous eup=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@gmx.de]

Re: Deleting effect like icon-recycle bin

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


Luke Skywalker schrieb:
[color=blue]
> [...]
> 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?
>[/color]

[Luke Skywalker]

Re: Deleting effect like icon-recycle bin

> 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]

Re: Deleting effect like icon-recycle bin

Luke Skywalker wrote:
[color=blue]
> 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.[/color]

That is not a question of script programming.
[color=blue]
> This is the code (in short):
>
> <img id="to_remove" title="File unnecessary" />[/color]
^
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.or g/>
[color=blue]
> <div id="recycle_bin " onmouseover="ve rify('onmouseov er');"
> onmouseout="ver ify('onmouseout ');">
> The recycle bin. Drag an image here to remove it.
> </div>[/color]

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#pr opdef-z-index>
for details.
[color=blue]
> [...]
> 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[/color]

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_EventHandle rs.html>
<URL:http://msdn.microsoft. com/workshop/author/dhtml/dhtml_node_entr y.asp>
[color=blue]
> or you know how script.aculo.us do?[/color]

Read the Source, Luke. [1]


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

[Luke Skywalker]

Re: Deleting effect like icon-recycle bin

> That is not a question of script programming.

I don't understand what you mean... what's my question?
[color=blue]
> Furthermore, this `img' element lacks the `alt' attribute value
> to be Valid (X)HTML.[/color]

I write the code on the fly, just to explain better my question. Sorry for
the errors.
[color=blue]
> Use the ondrag* event handlers. Since they are not part of Valid HTML,[/color]
you[color=blue]
> have to assign the event listeners through scripting in order to keep your
> markup Valid.
>
> <URL:http://xulplanet.com/references/elemref/ref_EventHandle rs.html>
> <URL:http://msdn.microsoft. com/workshop/author/dhtml/dhtml_node_entr y.asp>[/color]

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

Luke S.

[Thomas 'PointedEars' Lahn]

Re: Deleting effect like icon-recycle bin

Luke Skywalker wrote:
[color=blue][color=green]
>> That is not a question of script programming.[/color]
>
> I don't understand what you mean... what's my question?[/color]

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 ...").
[color=blue][color=green]
>> Use the ondrag* event handlers. Since they are not part of Valid HTML,[/color]
> you[/color]
^^
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>
[color=blue]
> Thanks for your time, I'm trying with the posted urls.[/color]

You're welcome.


PointedEars

[Luke Matuszewski]

Re: Deleting effect like icon-recycle bin


Thomas 'PointedEars' Lahn napisal(a):[color=blue][color=green]
> > <img id="to_remove" title="File unnecessary" />[/color]
> ^
> IE does not support XHTML, --------------------'
> and in HTML that is equivalent to "<img ...>&gt;",
> unless falsely error-corrected.[/color]


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_ima ge" />
, 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]

Re: Deleting effect like icon-recycle bin

Luke Matuszewski wrote:
[color=blue]
> Thomas 'PointedEars' Lahn napisal(a):[color=green][color=darkred]
>> > <img id="to_remove" title="File unnecessary" />[/color]
>> ^
>> IE does not support XHTML, --------------------'
>> and in HTML that is equivalent to "<img ...>&gt;",
>> unless falsely error-corrected.[/color]
>
> This statement is wrong in my assumption.[/color]

Your assumption is what is wrong here.
[color=blue]
> For HTML source code the appropriate parser is called 'soap parser'.[/color]

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]
[color=blue]
> It means that is it will skip all not known elements of markup'.[/color]

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]
[color=blue]
> is perfectly good - it is well 'understood' by common HTML parsers[/color]

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".
[color=blue]
> and furthermore it is valid under XHTML.[/color]

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.or g/>
[3] <URL:http://diveintomark.or g/archives/2003/05/05/why_we_wont_hel p_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.c om/group/comp.lang.javas cript/msg/ecfcb617605ae5d 1?as_umsgid=132 3309.yscONmSHSj @PointedEars.de >
[7]
<URL:http://groups.google.c om/groups?as_q=XHT ML&as_ugroup=co mp.lang.javascr ipt&scoring=d&f ilter=0>

[John Bokma]

Re: Deleting effect like icon-recycle bin

"Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
[color=blue]
> This statement is wrong in my assumption. For HTML source code the
> appropriate parser is called 'soap parser'.[/color]

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]

Re: Deleting effect like icon-recycle bin


Thomas 'PointedEars' Lahn napisal(a):[color=blue]
> If they do not understand it as "<img ...>&gt;"[/color]

Ok, now i see the point.
[color=blue]
> As one of the major browsers (IE) still does not support XHTML,[/color]

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 :( ).
[color=blue]
> Take
>
> <script type="text/javascript" src="foo.js" />
>
> for example, which is perfectly Valid XHTML but will probably not work as
> supposed in IE[/color]

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#ed ef-SCRIPT>

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

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]

Re: Deleting effect like icon-recycle bin

"Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
[color=blue]
> Due to this restrictions, i turned to point where writting HTML as
> valid XHTML isn't possible taking the different UAs implementations of
> parsers.[/color]

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]

Re: Deleting effect like icon-recycle bin


John Bokma napisal(a):[color=blue]
>
> Why do you want to use XHTML?
>[/color]

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]

Re: Deleting effect like icon-recycle bin

"Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
[color=blue]
>
> John Bokma napisal(a):[color=green]
>>
>> Why do you want to use XHTML?
>>[/color]
>
> 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),[/color]

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.
[color=blue]
> so it is wise to think over it now to avoid
> unnecessary work in future.[/color]

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]

Re: Deleting effect like icon-recycle bin


John Bokma napisal(a):[color=blue]
> "Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
>[color=green]
> >
> > John Bokma napisal(a):[color=darkred]
> >>
> >> Why do you want to use XHTML?
> >>[/color]
> >
> > 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),[/color]
>
> which reasons?[/color]

As many XML was designed for.
[color=blue]
> 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.[/color]

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]

Re: Deleting effect like icon-recycle bin

"Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
[color=blue]
>
> John Bokma napisal(a):[color=green]
>> "Luke Matuszewski" <matuszewski.lu kasz@gmail.com> wrote:
>>[color=darkred]
>> >
>> > 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),[/color]
>>
>> which reasons?[/color]
>
> As many XML was designed for.[/color]

Can you name them, or the 3 most important ones? (Since you seem to keep
avoiding the question).
[color=blue][color=green]
>> 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.[/color]
>
> UI is generated via JSP pages, and we mainly write pages using custom
> tags...[/color]

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

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