Seniors helping seniors use computers and the internet


Javascript Popup Design

Introduction - Programme Page Design

 The SeniorNet programme page lists our training activities; each session has a brief title, but we need to give easy access to a more detailed description of the activity within the page, and without extending the page further. This requires some form of pop-up associated with each title.

A simple approach is to use a pure HTML ‘title’ attribute; this is in effect a tool tip which pops up when a mouse is hovered over the text – see https://www.w3schools.com/tags/att_title.asp. However, with the growing use of tablets and smart phones to access the page the ‘title’ technique fails because you cannot ‘hover’ on a touch screen – you can only click/touch it.

This requires the joint use of two processes – creating a window to display the descriptive text and placing it where the screen has been clicked.

Responding to a Click/Tap

Within the tag of any container you can place an ‘onclick’ handler which calls a Javascript function to activate the popup. The syntax is onclick=”MyFunction(args)”. For this purpose the arguments should include the reserved word event, which will allow MyFunction to locate the click position on the viewport, and of course the text of the tip (in our case the description).

Pop-up Window

The window cannot be a real window (using for example openWindow()) because all windows come with overheads of controls (at the least the Title bar) which does not suit the Tooltip concept. The answer is to create a paragraph which is not seen until it is called by the onclick process. (it need not be a paragraph; any block item would do; but a paragraph is best for this requirement).

<p>id="MyPopup" style="position:absolute; font-size:small; text-align:center; width:200px; height:20px; background-color:white; border:thin black solid; visibility:hidden;">&nbsp;</p> 

The id= allows the onclick function to manipulate the paragraph. It needs absolute positioning because otherwise it will make the HTML of the page jump when it is made visible. The font size etc is at the user’s discretion but of course visibility:hidden is required prior to its use.

Pop-up Placement

In order to know the location of the title to which the ‘tool tip’ refers and hence the place where it should be displayed we need the mouse click event position WITH RESPECT TO THE PAGE (but simple searches will only give you the call with respect to the viewport whereas the positioning of an absolutely placed element is with reference to the origin of the HTML body element, which may have been scrolled out of view).  So 

To obtain the mouse coordinates in pixels within the onclick handler the two statements

x1=event.pageX; //mouse x-offset from viewport left edge
y1=event.pageY; // mouse y-offset from viewport top edge

return the answer (whereas event.clientX/Y only works if the whole webpage is visible on screen)

See http://www.quirksmode.org/mobile/tableViewport_desktop.html for more detail and compatibility.

Displaying the Pop-up

It It remains only to tell the pop-up what to display, where to place it, and to bring it into view. These statements do the trick, by editing the style listing of the pop-up from its initial condition (note that the style listing is a text string so the edits also have to be strings):


where strx and stry are the required coordinates in pixels and should be generated as follows:


Clearing the Pop-up

The pop-up needs to be timed out; this is done with a standard delay command:

setTimeout(Hide,3000); (this calls a function Hide() and in this example after 3 seconds)

There is a potential problem; if the user invokes multiple pop-ups the FIRST call will set the time-out for the LAST pop-up, meaning it is ‘burned before reading’. I choose to add a global ipop variable which is incremented from an initial zero value by each call, decremented in the Hide() function, and the function returns without action if the count has not returned to zero. Hide(), of course, just contains a command as in the Display section which sets … visibility="hidden";

Website supported by f="http://www.ingenuity.net.au/">Ipswich Web Hosting  (Ingenuity Hosting Pty Ltd)
Copyright © Ken Curwen 2012, 2013, 2014, 2015