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

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

How to do a popup box

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

Contents

  How to do a popup box bit-naughty@hotmail.com - 2015-06-25 12:18 -0700
    Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 21:29 +0200
      Re: How to do a popup box Scott Sauyet <scott.sauyet@gmail.com> - 2015-06-25 13:02 -0700
        Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:10 +0200
      Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:05 +0200
    Re: How to do a popup box Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-06-25 22:18 +0200
      Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-25 22:25 +0200
        Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-25 22:55 -0700
          Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-26 09:14 +0200
    Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-25 22:54 -0700
      Re: How to do a popup box Gregor Kofler <usenet@gregorkofler.com> - 2015-06-26 12:29 +0200
        Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-06-26 20:28 +0100
          Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:14 -0700
            Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-07-02 20:13 +0100
              Re: How to do a popup box Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 10:48 +0200
            Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-07-02 20:30 +0100
      Re: How to do a popup box Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-06-26 11:34 +0100
        Re: How to do a popup box bit-naughty@hotmail.com - 2015-06-26 12:36 -0700
          Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-26 21:58 +0200
            Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:06 -0700
              Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-02 22:01 +0200
          Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-06-26 22:32 +0100
            Re: How to do a popup box "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-06-27 01:41 +0200
              Re: How to do a popup box Tim Streater <timstreater@greenbee.net> - 2015-06-27 08:51 +0100
                Re: How to do a popup box "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-06-27 09:57 +0200
                  Re: How to do a popup box Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-06-29 15:39 +0200
                Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:08 -0700
      Re: How to do a popup box "Leonardo Azpurua" <leonardo@exmvps.org> - 2015-06-30 12:32 -0430
        Re: How to do a popup box bit-naughty@hotmail.com - 2015-07-02 11:16 -0700

Page 1 of 2  [1] 2  Next page →

#28166 — How to do a popup box

Hi,
I have a <div> which will have some text in it, when someone clicks on that box, I want a "menu" with some options in it to popup on TOP of that box, how do I do this please? I do NOT want to use CSS, ie. a:link ,. The items in the menu will have to be fetched via AJAX.

Thanks.

[toc] | [next] | [standalone]

#28167

bit-naughty@hotmail.com wrote on 25 Jun 2015 in comp.lang.javascript:

> I have a <div> which will have some text in it, when someone clicks on
> that box, I want a "menu" with some options in it to popup on TOP of
> that box, how do I do this please? I do NOT want to use CSS, ie. a:link
> ,. The items in the menu will have to be fetched via AJAX. 

Wrong NG. 
This is not a paid helpdesk.
We won't code for you for free.

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

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

#28169

Stefan Ram wrote:
> Evertjan writes:

>> This is not a paid helpdesk.
>> We won't code for you for free.
> 
> The question can be interpreted to be a question about
> JavaScript (that is, to be on topic). [ ... ]

And of course, we often do code for you for free.  But you need to find
a way to pique our interest.  Such a question probably won't do it.

  -- Scott

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

#28171

Scott Sauyet <scott.sauyet@gmail.com> wrote on 25 Jun 2015 in 
comp.lang.javascript:

> Stefan Ram wrote:
>> Evertjan writes:
> 
>>> This is not a paid helpdesk.
>>> We won't code for you for free.
>> 
>> The question can be interpreted to be a question about
>> JavaScript (that is, to be on topic). [ ... ]
> 
> And of course, we often do code for you for free. 

The OP would need to show at least some primordial effort,
giving the vague promise of his own implementation.

> But you need to find
> a way to pique our interest.  Such a question probably won't do it.

Quite, it does not pop me up!

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

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

#28170

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 25 Jun 2015 in 
comp.lang.javascript:

> "Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
>>Wrong NG. 
>>This is not a paid helpdesk.
>>We won't code for you for free.
> 
>   The question can be interpreted to be a question about
>   JavaScript (that is, to be on topic).

Human interpretation has no limits,
unlike script interpreter engines.
 
>   Nowhere does the charta exclude answers that can be used for
>   work (for profit). If you do not want to answer to a
>   question, you are free to do so.

"charter"!

This posting is typically a question of free help,
and methinks that is off topic.
 
>   Nowhere does the charta exclude the possibility to ask for a
>   payment. If you want to be paid by the OP, you are free to
>   ask him to do so.

"charter"!

This NG has a strong and long history of discouraging such questions,
and quite rightly so.

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

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

#28173

bit-naughty@hotmail.com wrote:

> I have a <div> which will have some text in it, when someone clicks on
> that box, I want a "menu" with some options in it to popup on TOP of that
> box, how do I do this please? I do NOT want to use CSS, ie. a:link ,. The
> items in the menu will have to be fetched via AJAX.

Bad idea.

See the FAQ referred to below.

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

#28175

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote on 25 Jun 2015 in 
comp.lang.javascript:

> bit-naughty@hotmail.com wrote:
> 
>> I have a <div> which will have some text in it, when someone clicks on
>> that box, I want a "menu" with some options in it to popup on TOP of that
>> box, how do I do this please? I do NOT want to use CSS, ie. a:link ,. The
>> items in the menu will have to be fetched via AJAX.
> 
> Bad idea.
> 
> See the FAQ referred to below.

Good advice.

>> I do NOT want to use CSS, ie. a:link
>> .. will have to be fetched ..

"I do NOT want"? Why?

Perhaps his schoolteacher said so?

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

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

#28179

On Friday, June 26, 2015 at 1:56:26 AM UTC+5:30, Evertjan. wrote:
> 
> "I do NOT want"? Why?
> 

Because I want to LEARN Javascript!!!

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

#28180

bit-naughty@hotmail.com wrote on 26 Jun 2015 in comp.lang.javascript:

> On Friday, June 26, 2015 at 1:56:26 AM UTC+5:30, Evertjan. wrote:
>> 
>> "I do NOT want"? Why?
> 
> Because I want to LEARN Javascript!!!

Well, asking someone else to do the coding for you, as you write in another 
post "but yes, it IS for a site I'm making", that is not a sound way to 
learn. 

Learning is an interaction of showing what you know already,
and asking for help from someone you expect to be more proficient than you, 
where and when you get stuck.

Learning is not:
specifying what result you "need" and so
limiting your teacher to what he dare not touch, as in
"I do NOT want to use CSS, ie. a:link ,."
and
"The items in the menu will have to be fetched via AJAX."

Learning is:
Hoping your teacher will come up with arguments to do something in a way you 
never dreamed of before.

"Oh for God's sake":
You better leave out incantations to the invisible imagined little man in 
the sky. I trust his knowledge of Javascript is actually infinitesimal.

"The menu has to be displayed where the mouse was clicked":
why "has to be", unless your schoolteacher has ordered you so?

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

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

#28178

Oh for God's sake - there's SEVEN replies, all filled with *this* bullshit - if you don't want to help me, DON'T, don't go on and on about it...?!!! This is NOT homework, but yes, it IS for a site I'm making, and I can only tell you what I *thought* of - I don't *know* what to code, if I knew, I wouldn't BE here....?

The z-index for this "menu" has to be more than that  of the page, right.....? But I can't figure out how to code the "onclick" stuff..... The menu has to be displayed where the mouse was clicked, how do I do that?

Thanks for your help. No thanks for no help.

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

#28181

Am 2015-06-26 um 07:54 schrieb bit-naughty@hotmail.com:
> Oh for God's sake - there's SEVEN replies, all filled with *this* bullshit - if you don't want to help me, DON'T, don't go on and on about it...?!!! This is NOT homework, but yes, it IS for a site I'm making, and I can only tell you what I *thought* of - I don't *know* what to code, if I knew, I wouldn't BE here....?
>
> The z-index for this "menu" has to be more than that  of the page, right.....? But I can't figure out how to code the "onclick" stuff..... The menu has to be displayed where the mouse was clicked, how do I do that?

Depends. Most people use libraries for that. In plain JS/DOM you would 
calculate the position of the clicked element in your listener by 
summing up the offsetTop/offsetLeft properties of the element and all 
parent elements. Then position your menu absolutely at this coordinate, 
set an appropriate zIndex (or define a suitable z-index in your CSS). 
Voilà...

Gregor

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

#28184

Gregor Kofler <usenet@gregorkofler.com> writes:

> Am 2015-06-26 um 07:54 schrieb bit-naughty@hotmail.com:
>> Oh for God's sake - there's SEVEN replies, all filled with *this*
>> bullshit - if you don't want to help me, DON'T, don't go on and on
>> about it...?!!! This is NOT homework, but yes, it IS for a site I'm
>> making, and I can only tell you what I *thought* of - I don't *know*
>> what to code, if I knew, I wouldn't BE here....?
>>
>> The z-index for this "menu" has to be more than that of the page,
>> right.....? But I can't figure out how to code the "onclick"
>> stuff..... The menu has to be displayed where the mouse was clicked,
>> how do I do that?
>
> Depends. Most people use libraries for that. In plain JS/DOM you would
> calculate the position of the clicked element in your listener by
> summing up the offsetTop/offsetLeft properties of the element and all
> parent elements. Then position your menu absolutely at this
> coordinate, set an appropriate zIndex (or define a suitable z-index in
> your CSS). Voilà...

Is there are reason to avoid using the position of the mouse click as
contained in the event?  My sketch of the method would be:

<!DOCTYPE html>
<html>
  <head>
    <style>
     #area {
         background: yellow;
         width: 60%;
         height: 10em;
         margin-left: auto;
         margin-right: auto;
     }
     #menu {
         position: absolute;
         display: none;
         background: white;
         padding: 0.3em;
     }
    </style>
    <script type="text/javascript">
     window.addEventListener(
          'load',
          function () {
               var menu = document.getElementById('menu');
               document.getElementById('area').addEventListener(
                    'click',
                    function (evt) {
                         menu.style.display = 'block';
                         menu.style.top = evt.clientY + 'px';
                         menu.style.left = evt.clientX + 'px';
                    },
                    false);
               menu.addEventListener(
                    'click',
                    function (evt) {
                         this.style.display = 'none';
                         evt.stopPropagation();
                    },
                    false);
          },
          false);
    </script>
    <title>Menu</title>
  </head>
  <body>
    <div id=area><div id=menu style="">X</div></div>
  </body>
</html>

-- 
Ben.

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

#28253

On Saturday, June 27, 2015 at 12:58:37 AM UTC+5:30, Ben Bacarisse wrote:
>


OK, I'm trying to understand this *without* opening my JS book,
1) Can you please explain the function (evt) stuff? Like if you define a function that way, it'll automatically call the function with an argument of the "event" (which will be an object), the properties of which you can access with evt.clientY and X? Is that what's going on?
2) What is evt.stopPropagation() ?

Thanks lots for your help.

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

#28255

bit-naughty@hotmail.com writes:

> On Saturday, June 27, 2015 at 12:58:37 AM UTC+5:30, Ben Bacarisse wrote:
>>
>
> OK, I'm trying to understand this *without* opening my JS book,

That's going to be hard work.  You don't need a book but you will need
some reference.  I often use MDN (developer.mozilla.org).

> 1) Can you please explain the function (evt) stuff? Like if you define
> a function that way, it'll automatically call the function with an
> argument of the "event" (which will be an object), the properties of
> which you can access with evt.clientY and X? Is that what's going on?

That's pretty much it, yes.

> 2) What is evt.stopPropagation() ?

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

You'll probably get what event propagation is immediately if you try the
page with and without that call (I posted a working page).

<snip>
-- 
Ben.

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

#28267

Ben Bacarisse wrote:

> bit-naughty@hotmail.com writes:
>> 2) What is evt.stopPropagation() ?
> 
> https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
> 
> You'll probably get what event propagation is immediately if you try the
> page with and without that call (I posted a working page).

Event propagation/flow is not as trivial as you present it to be.  I find 
the diagram in the W3C UI Events Specification (formerly, DOM Level 3 
Events), most instructive:

<http://www.w3.org/TR/2015/WD-uievents-20150428/#event-flow>

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

#28256

In article <cc310794-5505-4381-9060-cea00db8bd50@googlegroups.com>,
<bit-naughty@hotmail.com> wrote:

>On Saturday, June 27, 2015 at 12:58:37 AM UTC+5:30, Ben Bacarisse wrote:

>OK, I'm trying to understand this *without* opening my JS book,

>1) Can you please explain the function (evt) stuff? Like if you define a
>function that way, it'll automatically call the function with an argument of
>the "event" (which will be an object), the properties of which you can access
>with evt.clientY and X? Is that what's going on?

Yeah, roughly. But see below.

>2) What is evt.stopPropagation() ?

When an event happens (e.g., click on a table cell), you can have a
handler on the cell which handles the event. But the event propagates
up and down so that the row that the cell is in gets gets the event
too, and so on up to the body. If you have click handlers there, they
will also get called. If you want to stop that happening, you need to
call evt.stopPropagation() in the last handler that you want to have
deal with the event, and it won't propagate any further.

The above is incomplete and slightly erroneous, but good enough for
this explanation. My advice is indeed to delve into your JS books, and
read up on the various event models, and event propagation/bubbling, to
see more detail and to understand better.

My books are JavaScript: The definitive guide by David Flanagan, and
the JavaScript Bible 7th Edition (Goodman et al). All editions of both
books are out of date before they are even purchased (I'm on my second
version of Flanagan and third of Goodman) so you have to be a bit
careful, but by and large they'll do and they go into some detail about
a large number of things. Expect to replace books with newer editions
on a regular basis.

People here will argue the toss all day about this or that author being
a fool and incompetent, I'd say go on Amazon and Read Inside various
books to see which authors have writing styles that suit you and screw
the wise guys.

-- 
"Once you adopt the unix paradigm, the variants cease to be a problem - you
bitch, of course, but that's because bitching is fun, unlike M$ OS's, where 
bitching is required to keep your head from exploding." - S Stremler in afc

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

#28182

bit-naughty@hotmail.com writes:

> Oh for God's sake - there's SEVEN replies, all filled with *this*
> bullshit - if you don't want to help me, DON'T,

Also some people might not have helped despite wanting to.  I read your
post and decided to leave it alone because I could not see clearly what
the problem was.  If you don't know the first thing about client-side
scripting you need one sort of answer, but if you know a lot and are
just having trouble with some detail, then you need another sort.

Then there is the question of constraints.  If it has to work on every
browser ever, most of the problems will be fiddly ones of compatibility.
If you have control of the browser environment the solution will be
simpler.  With so many variables, I know from experience that the chances
of hitting on anything useful are very small.

I could take the time to try to get some clarification but that is so
often met with annoyance that I rarely bother these days.  Your post had
a couple of signs that suggested you wanted to shut down questions and
just get to "the answer" so I remained silent.

tl;dr: Be specific about what you know and don't know.  Specify
constraints.  Signal that you are open to discussion.

<snip>
-- 
Ben.

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

#28185

On Friday, June 26, 2015 at 4:04:57 PM UTC+5:30, Ben Bacarisse wrote:

> Also some people might not have helped despite wanting to.  I read your
> post and decided to leave it alone because I could not see clearly what
> the problem was.  If you don't know the first thing about client-side
> scripting you need one sort of answer, but if you know a lot and are
> just having trouble with some detail, then you need another sort.
> 
> Then there is the question of constraints.  If it has to work on every
> browser ever, most of the problems will be fiddly ones of compatibility.
> If you have control of the browser environment the solution will be
> simpler.  With so many variables, I know from experience that the chances
> of hitting on anything useful are very small.
> 
> I could take the time to try to get some clarification but that is so
> often met with annoyance that I rarely bother these days.  


Well, it IS irritating - I want it to work for all users coming to my site, obviously, but however if their browsers are 5 years old, then there's a limit to how far I'm going to go to accomodate them.....?

Same feeling as everyone else, right....? :)


Your post had
> a couple of signs that suggested you wanted to shut down questions and
> just get to "the answer" so I remained silent.
>


Well, that's  primarily because my problem is bigger than what I posted here - the links the menu will have need data from the *server side* - it was so complicated to simply *envision* the whole thing in my head, that I wanted to get client side out of the way first.....


> tl;dr: Be specific about what you know and don't know.  Specify
> constraints.  Signal that you are open to discussion.
> 


As far as my  knowledge is concerned, well I've been reading Definitive  Guide for a long time now, but it's not  really going in without some social interaction with *people* about Javascript- I keep forgetting what the book said in particular situations - the code is in this like , really tiny typeface, and there's lots of it, not a recipe for a good read.... for example, I forgot how to do the "registering listener" part...


Evertjan, brother, please *killfile* me, and let's leave it at that....?

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

#28186

bit-naughty@hotmail.com wrote on 26 Jun 2015 in comp.lang.javascript:

> Evertjan, brother, please *killfile* me, and let's leave it at that....?

Certainly not, my killfile is reserved for anoying pepople.

You however could be an asset on this NG, 
when the raw parts are burned off by some welldosed Usenet flaming.

Could we see some code from you to assess the level of our responses?

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

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

#28251

On Saturday, June 27, 2015 at 1:28:32 AM UTC+5:30, Evertjan. wrote:
> bi wrote on 26 Jun 2015 in comp.lang.javascript:
> 
> > Evertjan, brother, please *killfile* me, and let's leave it at that....?
> 
> Certainly not, my killfile is reserved for anoying pepople.
> 
> You however could be an asset on this NG, 


Wow! That's almost a compliment! :)

Too bad one can't say the same of you!


> when the raw parts are burned off by some welldosed Usenet flaming.


LOL! Some *Usenet* flaming? So you admit that if I ever met you *in person*, I'd knock you the FUCK OUT?? :) Do you have, like a Facebook page somewhere or something, so I can see what your punk ass looks like?

Have you taken it upon yourself to be a *messiah* of this newgroup or something, like, I need YOUR FUCKING PERMISSION to post here....?

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

Page 1 of 2  [1] 2  Next page →

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

csiph-web