Asp Forum - Shape with transparent click through

Andrew Poulos

9/2/2014 10:37:00 PM

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

15 Answers

Thomas 'PointedEars' Lahn

9/3/2014 12:02:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Andrew Poulos

9/3/2014 12:29:00 AM

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

Ed Jay

9/3/2014 1:11:00 AM

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

Thomas 'PointedEars' Lahn

9/3/2014 1:17:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

9/3/2014 1:29:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Ed Jay

9/3/2014 2:00:00 AM

On Wed, 03 Sep 2014 03:28:45 +0200, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

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

Thanks.
>
>> 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.

Wouldn't surprise me.
--
Joey

Andrew Poulos

9/3/2014 2:34:00 AM

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

Evertjan.

9/3/2014 6:54:00 AM

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)

Michael Haufe (\"TNO\")

9/3/2014 8:17:00 AM

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-throu...
https://gist.github.com/mlhaufe/d7e8db313a...

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>

Thomas 'PointedEars' Lahn

9/3/2014 10:41:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

comp.lang.javascript

Shape with transparent click through

Andrew Poulos

Thomas 'PointedEars' Lahn

Andrew Poulos

Ed Jay

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Ed Jay

Andrew Poulos

Evertjan.

Michael Haufe (\"TNO\")

Thomas 'PointedEars' Lahn

x Login to ForumsZone