Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Deleting effect like icon-recycle bin

Reply
Thread Tools

Deleting effect like icon-recycle bin

 
 
Luke Skywalker
Guest
Posts: n/a
 
      12-10-2005
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.


 
Reply With Quote
 
 
 
 
JonasSchneider@gmx.de
Guest
Posts: n/a
 
      12-10-2005
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?
>


 
Reply With Quote
 
 
 
 
Luke Skywalker
Guest
Posts: n/a
 
      12-10-2005
> 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.


 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-10-2005
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
 
Reply With Quote
 
Luke Skywalker
Guest
Posts: n/a
 
      12-10-2005
> 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.


 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-10-2005
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
 
Reply With Quote
 
Luke Matuszewski
Guest
Posts: n/a
 
      12-11-2005

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.

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-11-2005
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/ecfcb617605ae5d1?as_umsgid=1323309.yscONmSHSj@Poin tedEars.de>
[7]
<URL:http://groups.google.com/groups?as_q=XHTML&as_ugroup=comp.lang.javascript&s coring=d&filter=0>
 
Reply With Quote
 
John Bokma
Guest
Posts: n/a
 
      12-11-2005
"Luke Matuszewski" <(E-Mail Removed)> 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 .

--
John MexIT: http://johnbokma.com/mexit/
personal page: http://johnbokma.com/
Experienced programmer available: http://castleamber.com/
Happy Customers: http://castleamber.com/testimonials.html
 
Reply With Quote
 
Luke Matuszewski
Guest
Posts: n/a
 
      12-11-2005

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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
#!/usr/bin/python or #!/usr/bin/env python? John Salerno Python 30 08-10-2006 05:20 AM
#!/usr/bin/ruby , #!/usr/bin/ruby -w , #!/usr/bin/ruby -T?, #!/usr/bin/ruby -T1... anne001 Ruby 1 04-23-2006 03:02 PM
how to encrypt a C data and write a bin file and read a bin at run time and decrypt C data sweety C Programming 9 02-07-2006 05:28 PM
Where do i find the recycle bin? XP PRO with norton protected bin Quiz Time Computer Support 6 06-27-2004 11:13 AM
Can "bin" be changed to "cgi-bin" for asp.net Kevin Mitchell ASP .Net 3 10-19-2003 10:39 PM



Advertisments