Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #25805 > unrolled thread

Shape with transparent click through

Back to article view | Back to comp.lang.javascript

Contents

  Shape with transparent click through Andrew Poulos <ap_prog@hotmail.com> - 2014-09-03 08:37 +1000
    Re: Shape with transparent click through Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-09-03 02:01 +0200
      Re: Shape with transparent click through Andrew Poulos <ap_prog@hotmail.com> - 2014-09-03 10:29 +1000
        Re: Shape with transparent click through Ed Jay <edMbj@aes-intl.com> - 2014-09-02 18:11 -0700
          Re: Shape with transparent click through Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-09-03 03:28 +0200
        Re: Shape with transparent click through Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-09-03 03:16 +0200
          Re: Shape with transparent click through Andrew Poulos <ap_prog@hotmail.com> - 2014-09-03 12:33 +1000
            Re: Shape with transparent click through "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-09-03 08:53 +0200
            Re: Shape with transparent click through Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-09-03 12:40 +0200
    Re: Shape with transparent click through "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-09-03 01:16 -0700
      Re: Shape with transparent click through "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-09-04 02:27 +0200
        Re: Shape with transparent click through "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-09-03 18:45 -0700
          Re: Shape with transparent click through "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-09-04 09:37 +0200
            Re: Shape with transparent click through "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-09-04 18:53 -0700
          Re: Shape with transparent click through "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-09-04 12:29 +0200

#25805 — Shape with transparent click through

Is there a graphics library that will allow me to draw a shape (say, a 
hollow ellipse) on screen and still allow me to click through any 
transparent bit of the shape to interact with an element behind it?

Andrew Poulos

[toc] | [next] | [standalone]

#25807

Andrew Poulos wrote:

> Is there a graphics library that will allow me to draw a shape (say, a
> hollow ellipse) on screen and still allow me to click through any
> transparent bit of the shape to interact with an element behind it?

I do not know.  ISTM you are having an XY problem again.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#25808

On 3/09/2014 10:01 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> Is there a graphics library that will allow me to draw a shape (say, a
>> hollow ellipse) on screen and still allow me to click through any
>> transparent bit of the shape to interact with an element behind it?
>
> I do not know.  ISTM you are having an XY problem again.

Here's the scenario: I have an elearning course. A page may have a Help 
button. If you click the button then Help for the page will appear. The 
form for the Help might be to circle an object on the page and to then 
display an instruction to click that object.

I've been using wz_jsgraphics.js to draw the circle but I'd rather 
something that looked, and is, better. Things like Canvas, VML, and SVG 
all give better looking results but don't allow for clicking through 
transparent areas. (And I'm not that interested in coding something that 
captures clicks and passes them on).

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#25809

On Wed, 03 Sep 2014 10:29:07 +1000, Andrew Poulos
<ap_prog@hotmail.com> wrote:

>On 3/09/2014 10:01 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> Is there a graphics library that will allow me to draw a shape (say, a
>>> hollow ellipse) on screen and still allow me to click through any
>>> transparent bit of the shape to interact with an element behind it?
>>
>> I do not know.  ISTM you are having an XY problem again.
>
>Here's the scenario: I have an elearning course. A page may have a Help 
>button. If you click the button then Help for the page will appear. The 
>form for the Help might be to circle an object on the page and to then 
>display an instruction to click that object.
>
>I've been using wz_jsgraphics.js to draw the circle but I'd rather 
>something that looked, and is, better. Things like Canvas, VML, and SVG 
>all give better looking results but don't allow for clicking through 
>transparent areas. (And I'm not that interested in coding something that 
>captures clicks and passes them on).
>
Z-index is your friend here. 

I have a similar button that resides on the bottom layer of a 5-canvas
stack. The button is attached as a child and has a high z-index to set
it standalone above all the other layers. 
-- 
Joey

[toc] | [prev] | [next] | [standalone]

#25811

Ed Jay wrote:

> Andrew Poulos […] wrote:
>> I've been using wz_jsgraphics.js to draw the circle but I'd rather
>> something that looked, and is, better. Things like Canvas, VML, and SVG
>> all give better looking results but don't allow for clicking through
>> transparent areas. (And I'm not that interested in coding something that
>> captures clicks and passes them on).
>>
> Z-index is your friend here.

The z-index CSS property is likely to be unnecessary here because added 
elements in the same stacking context are higher on the z-axis even without 
the declaration.  IOW: In the same stacking context, following elements 
overlap preceding elements, and absolute positioned elements overlap 
relative positioned or not positioned (“static”) elements.
 
> I have a similar button that resides on the bottom layer of a 5-canvas
> stack. The button is attached as a child and has a high z-index to set
> it standalone above all the other layers.

ISTM you have not read the problem description thoroughly.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#25810

Andrew Poulos wrote:

> On 3/09/2014 10:01 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> Is there a graphics library that will allow me to draw a shape (say, a
>>> hollow ellipse) on screen and still allow me to click through any
>>> transparent bit of the shape to interact with an element behind it?
>> I do not know.  ISTM you are having an XY problem again.
> 
> Here's the scenario: I have an elearning course. A page may have a Help
> button. If you click the button then Help for the page will appear. The
> form for the Help might be to circle an object on the page and to then
> display an instruction to click that object.
> 
> I've been using wz_jsgraphics.js to draw the circle but I'd rather
> something that looked, and is, better.

Good idea.  Walter Zorn’s code (at least the parts I have reviewed) is badly 
written, six years out of date now and will probably never be updated (he 
died in 2009; I am not aware of a maintained fork).

You can draw a circle around any element with the CSS3 border-radius 
property.  However, what you are asking for does not make sense in the first 
place.  You do *not* want the clicked object react as if Help mode was not 
enabled when it is, and you can have translucent elements.  So I do not see 
the problem.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#25813

On 3/09/2014 11:16 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 3/09/2014 10:01 AM, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> Is there a graphics library that will allow me to draw a shape (say, a
>>>> hollow ellipse) on screen and still allow me to click through any
>>>> transparent bit of the shape to interact with an element behind it?
>>> I do not know.  ISTM you are having an XY problem again.
>>
>> Here's the scenario: I have an elearning course. A page may have a Help
>> button. If you click the button then Help for the page will appear. The
>> form for the Help might be to circle an object on the page and to then
>> display an instruction to click that object.
>>
>> I've been using wz_jsgraphics.js to draw the circle but I'd rather
>> something that looked, and is, better.
>
> Good idea.  Walter Zorn’s code (at least the parts I have reviewed) is badly
> written, six years out of date now and will probably never be updated (he
> died in 2009; I am not aware of a maintained fork).
>
> You can draw a circle around any element with the CSS3 border-radius
> property.  However, what you are asking for does not make sense in the first
> place.  You do *not* want the clicked object react as if Help mode was not
> enabled when it is, and you can have translucent elements.  So I do not see
> the problem.

Yes I do want them to react. Some of the pages have a number of steps 
that the user needs to complete in order. If they do something "wrong" 
they get a message. If they do it wrong again I draw a circle around the 
element they are meant to react with.

And I don't want to maintain multiple versions of the "same" content.

Is being able to click through a transparent area to the content behind 
too much to ask?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#25814

Andrew Poulos <ap_prog@hotmail.com> wrote on 03 sep 2014 in 
comp.lang.javascript:

> Is being able to click through a transparent area to the content behind 
> too much to ask?

Yes.

Why? Because html at present is designed that way.

Transparents are the ideal way to catch klicks and not to pass them trough,
giving a modal illusion, wanting them to act oppositely seems unneccesary,
as you easily can programme [multangular] areas that catch onclicks or put 
other [rectangular] transparents in front of them that do.

Transparents act just like other images in this way.

I didn't test if you can shape rectangular forms to say circles or ovals by
css border-radius and so preventing clicks outside the constructed border,
would that help?.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#25816

Andrew Poulos wrote:

> On 3/09/2014 11:16 AM, Thomas 'PointedEars' Lahn wrote:
>> You can draw a circle around any element with the CSS3 border-radius
>> property.  However, what you are asking for does not make sense in the
>> first place.  You do *not* want the clicked object react as if Help mode
                                                            ^^^^^^^^^^^^^^^
>> was not enabled when it is, and you can have translucent elements.  So I
   ^^^^^^^^^^^^^^^^^^^^^^^^^^
>> do not see the problem.
> 
> Yes I do want them to react.

I have marked the important part.

> Some of the pages have a number of steps that the user needs to complete
> in order. If they do something "wrong" they get a message. If they do it
> wrong again I draw a circle around the element they are meant to react
> with.

In that case either the business logic for the Help mode belongs in the 
event listener for the corresponding events for the elements in the first 
place, or entering/leaving Help mode should add/remove the respective 
listeners.  The latter may require native support for DOM3+ Events or an 
emulation thereof because order may matter.
 
> And I don't want to maintain multiple versions of the "same" content.

You do not have to.
 
> Is being able to click through a transparent area to the content behind
> too much to ask?

No, but it may be easier to place a ring marker "behind" (below, in the same 
stacking context) the widget to be marked, or IOW the widget on its marker.

You will need to implement the business logic of the Help mode in any case.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#25815

On Tuesday, September 2, 2014 5:37:25 PM UTC-5, Andrew Poulos wrote:
> Is there a graphics library that will allow me to draw a shape (say, a 
> hollow ellipse) on screen and still allow me to click through any 
> transparent bit of the shape to interact with an element behind it?

Here is a starting point:

http://thenewobjective.com/temp/html-click-through-circle/
https://gist.github.com/mlhaufe/d7e8db313a8bdc7ce29c

code below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Click-Through Circle</title>
        <style type="text/css">
            html, body{
                margin:0;
                padding:0;
            }
            #btnHelp{
                position: absolute;
                top:0;
                right:0;
            }
            #btnTarget{
                position:absolute;
                top:120px;
                left:120px;
            }
            #helpCircle{
                display:none;
                position: absolute;
                border:1px solid red;
                border-radius:50%;
                pointer-events:none;
            }
        </style>
    </head>
    <body>
        <button id="btnTarget">Target Object</button>
        <button id="btnHelp">Help!</button>
        
        <div id="helpCircle"></div>
        <script type="text/javascript">
            function id(o){ return document.getElementById(o); }
            
            function encircle(element){
                var s = helpCircle.style;
                s.top = element.offsetTop - element.offsetHeight/4 + 'px';
                s.left = element.offsetLeft - element.offsetWidth/5 + 'px';
                s.width = element.offsetWidth + element.offsetWidth*.4 + 'px';
                s.height = element.offsetHeight + element.offsetHeight*.4 + 'px';
                helpCircle.style.display = 'block';
            };

            var btnHelp = id('btnHelp'),
                btnTarget = id('btnTarget'),
                helpCircle = id('helpCircle');

            btnTarget.onclick = function(e){
                alert("You clicked the button!");
            };
            btnHelp.onclick = function(e){
                encircle(btnTarget);
            };
        </script>
    </body>
</html>

[toc] | [prev] | [next] | [standalone]

#25818

Michael Haufe (TNO) wrote:

>                 pointer-events:none;

Thanks for bringing this up -- I was not aware of this CSS property,
which may come in handy.

However, it seems to be noteworthy that this property is a recent and
not yet standardized addition to the CSS toolset for general HTML
elements, which seems to have been adopted from the SVG 1.1
specification[1].

[1] <http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#25819

On Wednesday, September 3, 2014 7:27:19 PM UTC-5, Christoph M. Becker wrote:
> Michael Haufe (TNO) wrote:
>
> >                 pointer-events:none;
> 
> Thanks for bringing this up -- I was not aware of this CSS property,
> which may come in handy.
> 
> However, it seems to be noteworthy that this property is a recent and
> not yet standardized addition to the CSS toolset for general HTML
> elements, which seems to have been adopted from the SVG 1.1
> specification[1].
> 
> [1] <http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>

I think the practical limitation here is is that IE11 is required.

ref: http://caniuse.com/#feat=pointer-events

[toc] | [prev] | [next] | [standalone]

#25820

"Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 04 sep 2014 in
comp.lang.javascript: 

> On Wednesday, September 3, 2014 7:27:19 PM UTC-5, Christoph M. Becker
> wrote: 
>> Michael Haufe (TNO) wrote:
>>
>> >                 pointer-events:none;
>> 
>> Thanks for bringing this up -- I was not aware of this CSS property,
>> which may come in handy.
>> 
>> However, it seems to be noteworthy that this property is a recent and
>> not yet standardized addition to the CSS toolset for general HTML
>> elements, which seems to have been adopted from the SVG 1.1
>> specification[1].
>> 
>> [1] <http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>
> 
> I think the practical limitation here is is that IE11 is required.
> 
> ref: http://caniuse.com/#feat=pointer-events

What does the last sentence of the below mean in practice?

"By contrast, a mask is not a binary transition, but a pixel operation, and 
different behavior for fully transparent and almost-but-not-fully-
transparent may be confusingly arbitrary; as a consequence, for elements 
with a mask applied, pointer-events must still be captured even in areas 
where the mask goes to zero opacity. If an author wishes to achieve an 
effect where the transparent parts of a mask allow pointer-events to pass to 
an element below, a combination of masking and clipping may be used."

<http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#25823

On Thursday, September 4, 2014 2:37:06 AM UTC-5, Evertjan. wrote:

> What does the last sentence of the below mean in practice?
> 
> "By contrast, a mask is not a binary transition, but a pixel operation, and 
> different behavior for fully transparent and almost-but-not-fully-
> transparent may be confusingly arbitrary; as a consequence, for elements 
> with a mask applied, pointer-events must still be captured even in areas 
> where the mask goes to zero opacity. If an author wishes to achieve an 
> effect where the transparent parts of a mask allow pointer-events to pass to 
> an element below, a combination of masking and clipping may be used."
> 
> <http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>

I take it to mean: "Use a shit load of clipping definitions and fake it for the transparent areas of your mask". 

A mask makes a clear window, not a hole for your clicks.

[toc] | [prev] | [next] | [standalone]

#25821

Michael Haufe (TNO) wrote:

> On Wednesday, September 3, 2014 7:27:19 PM UTC-5, Christoph M. Becker wrote:
>> Michael Haufe (TNO) wrote:
>>
>>>                 pointer-events:none;
>>
>> Thanks for bringing this up -- I was not aware of this CSS property,
>> which may come in handy.
>>
>> However, it seems to be noteworthy that this property is a recent and
>> not yet standardized addition to the CSS toolset for general HTML
>> elements, which seems to have been adopted from the SVG 1.1
>> specification[1].
>>
>> [1] <http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty>
> 
> I think the practical limitation here is is that IE11 is required.
> 
> ref: http://caniuse.com/#feat=pointer-events

Indeed.  Using an SVG instead of a div should be supported from MSHTML 9
onward.

-- 
Christoph M. Becker

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web