Popup Tutorial

Motivation

The Morris worm was a famous computer worm.

How I Wrote this

I found a great example to reference on w3school as a jumping off point. I took the general flow of setting up a popup in primarily CSS, modified it, and then turned it into a Javascript framework instead of using CSS classes. Then I extended the framework by adding more features to it.

Initial Spans

Outer Span

We need to pick a word we want our popup to define. We use a span with an id to refer to this word & dotted lines to illustrate to the user that they can interact with this word.

See the Pen MpNNoe by hayden.french (@haydenfrench) on CodePen.

Inner Span

Next, we need an inner span where we can place our definition.

See the Pen zZggMp by hayden.french (@haydenfrench) on CodePen.

Hidden Inner Span

We hide the definition span & set important properties for it.

See the Pen GWVVPb by hayden.french (@haydenfrench) on CodePen.

Position Popup & Create Arrow for Speech Bubble Effect

Position

We're hard coding this popup to be on the right for our example. In the real framework, we expect the user to pass in a side they want the popup to appear on. We then use a switch to call the correct javascript to setup out positioning. (Note: inner span made visible to show positioning)

See the Pen PpMMMw by hayden.french (@haydenfrench) on CodePen.

Arrow for Speech bubble Effect

This is really silly, and I love that it works. We create a span with empty a single space inside of it. Then we give it a small border width. Next we set the border color ONLY on a single side. Since our span is a rectangle, and made up of 4 sections, each section is a triangle. By setting the border color only on a single side, we get a tiny triangle!

See the Pen OmLLNM by hayden.french (@haydenfrench) on CodePen.

On Hover Event

Now we need to change the visibility of our inner Span based on where the mouse is hovering! We use the mouse over & mouse out event listeners to accomplish this.

See the Pen mmbbpV by hayden.french (@haydenfrench) on CodePen.

Audio Object

We want to add sounds to play when someone hovers over our outer span. We can use the Audio object & the play() function and our previous mouseover event to trigger the sound.

See the Pen VbZZNe by hayden.french (@haydenfrench) on CodePen.

Note: In the framework, the audio handling is slightly more complex to deal with long songs. On mouseover, we first check if the audio is paused. If so, we rewind the audio object back to the beginning and then play it. On mouseout, we pause the song.

Animations

We're going to use CSS keyframes. We'll show a simple example here and then in the real framework we will utilize a premade library that enables us to have many beautiful and complex animations.

Simple Animation

See the Pen wdwwLr by hayden.french (@haydenfrench) on CodePen.

Using animate.css

Instead of declaring our own CSS keyframes, we simply include animate.css as a stylesheet. Then just as before, on the mouseover and mouseout events we set two classnames declared in the CSS. The first classname is always animated and the second is the name of the animation we want. A few of my favorites include: wobble, hinge, slideInDown, slideInDown, lightSpeedIn, lightSpeedOut. For a complete list see the animate.css documentation listed below.

Bringing it all together

So now we know how all the individual parts work. We need to abstract this implementation from the user & make it a simple import & declaration.
Final Framework: popupframework.js

How an HTML developer would utilize this framework

Download link

Framework.zip

Here are the steps to use the framework:

  1. Include animate.css in head tags if you want pre-defined animations.
  2. Surround word you want to define in span and give it an id.
  3. Include framework in script tag.
  4. Inside script tag, create instance of framework.
  5. Call makePopup() & pass parameters you desire.

What parameters this framework can set:

Example:

				var popFW = makePopupFramework();

				popFW.makePopup({id: "worm",
					text: "computer software that attempts to replicate itself and spread across computers",
					side: "right",
					size: "small",
					backgroundColor: "white",
					textColor: "black",
					underlineColor: "cyan",
					width: "200px",
					borderRadius: "20px",
					animationIn: "animated slideInDown",
					animationOut: "animated slideOutDown",
					audio: "secret"
				});
			

Examples

Closing Notes

Thanks to w3schools for giving me a jumping off point: Popup Tutorial
This showed me the basic concepts for creating a popup.
They also have wonderful documentation about all the CSS you could ever want to know: CSS
Big thanks to Daniel Eden @ animate.css
He made beautifully, complex CSS keyframes very easy to use.