Deleting effect like icon-recycle bin

Discussion in 'Javascript' started by Luke Skywalker, Dec 10, 2005.

  1. 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.
    Luke Skywalker, Dec 10, 2005
    #1
    1. Advertising

  2. Luke Skywalker

    Guest

    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?
    >
    , Dec 10, 2005
    #2
    1. Advertising

  3. > 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.
    Luke Skywalker, Dec 10, 2005
    #3
  4. 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 :)
    Thomas 'PointedEars' Lahn, Dec 10, 2005
    #4
  5. > 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.
    Luke Skywalker, Dec 10, 2005
    #5
  6. 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
    Thomas 'PointedEars' Lahn, Dec 10, 2005
    #6
  7. 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.
    Luke Matuszewski, Dec 11, 2005
    #7
  8. 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=>
    [7]
    <URL:http://groups.google.com/groups?as_q=XHTML&as_ugroup=comp.lang.javascript&scoring=d&filter=0>
    Thomas 'PointedEars' Lahn, Dec 11, 2005
    #8
  9. Luke Skywalker

    John Bokma Guest

    John Bokma, Dec 11, 2005
    #9
  10. 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.
    Luke Matuszewski, Dec 11, 2005
    #10
  11. Luke Skywalker

    John Bokma Guest

    John Bokma, Dec 11, 2005
    #11
  12. 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.
    Luke Matuszewski, Dec 11, 2005
    #12
  13. Luke Skywalker

    John Bokma Guest

    "Luke Matuszewski" <> 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
    John Bokma, Dec 11, 2005
    #13
  14. John Bokma napisal(a):
    > "Luke Matuszewski" <> 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).
    Luke Matuszewski, Dec 11, 2005
    #14
  15. Luke Skywalker

    John Bokma Guest

    "Luke Matuszewski" <> wrote:

    >
    > John Bokma napisal(a):
    >> "Luke Matuszewski" <> 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
    John Bokma, Dec 11, 2005
    #15
  16. 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, Dec 12, 2005
    #16
  17. 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
    Thomas 'PointedEars' Lahn, Dec 12, 2005
    #17
  18. Thomas 'PointedEars' Lahn napisal(a):
    > [...] would you please learn to mark omissions in cited material?


    Will try better.
    Luke Matuszewski, Dec 12, 2005
    #18
  19. Luke Skywalker

    John Bokma Guest

    Thomas 'PointedEars' Lahn <> 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
    John Bokma, Dec 12, 2005
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael Foord

    Recycle Bin and Python

    Michael Foord, Oct 15, 2004, in forum: Python
    Replies:
    3
    Views:
    445
    Michael Foord
    Oct 15, 2004
  2. raghav

    app_offline in recycle bin

    raghav, Sep 28, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    424
    raghav
    Sep 28, 2006
  3. Roedy Green

    Empty recycle bin

    Roedy Green, May 30, 2007, in forum: Java
    Replies:
    3
    Views:
    674
  4. Kevin D. Smith
    Replies:
    7
    Views:
    928
    Chris Mellon
    Aug 16, 2007
  5. anne001
    Replies:
    1
    Views:
    400
Loading...

Share This Page