K02 DHTML Popup

Definition

A pop up element, controlled by css and javascript, used to display additional content on a page.

Usage

While the K2 Pop-up components can be used anywhere, they should be used prudently. Since these objects are controlled by javascript, not all users will be able to access the pop-up items. The following tips will enable you to correctly use the K2 component while still making your site accessible.

• The pop-up should only include content that is not essential to the user.
• Use the link that triggers the pop up as a link to content contained in the pop up, but on another page. Users will not see the pop up, but will be directed to the same content on another page.
• Insert pop-up K2 code close to the triggering link code. When inserting the code for the pop-up content, imagine a user reading that page with no CSS. Think of the K2 as a static piece of HTML that precedes or follows the other content of the page.

How it works

The K2 pop-ups are controlled solely by javascript contained in the global sniff.js file. They use unobtrusive javascript to add the mouse events to both the triggering object and the pop up object. This works by using multiple class names in your objects to tell the sniff.js file what you want to do.

In a K2 pop up there are 2-3 objects to consider. The simplest construct contains two objects; a triggering object (e.g. a link) and the pop-up object (a K2 component).

This link is an example of the simplest possible K2 pop-up. The triggering object used here is a link, it contains a blank href set to "#," however it could link to another page. The important part of the link is the class values. With CSS it is possible to list several space delineated class names for any given object. For this link we are using class="k2over unique_id_0". The class name "k2over" is a key word that tells the sniff.js file that we want to add the onmouseover event to this link. Then we add a space, then another class. This class is the same name as the ID of our pop up object. In this example, it is "unique_id_0." This tells the sniff.js that onmouseover we want to open the pop up component containing the ID unique_id_0. The link code looks like...

<a href="{placeholder}" class="k2over unique_id_0">This link</a>

<!-- BEGIN K2 COMPONENT V.0 -->
<div class="k2 k2v0" id="unique_id_0">
<div class="k2w1"><div class="k2w2">

<p>
this has a border and no margins to show the
pop up object's real dimesions and x/y origin.
</p>

</div></div>
</div>
<!-- END K2 COMPONENT V.0 -->

You may notice that on the first link, the pop up appears in a weird position. To fix this, we add additional class names to our triggering object to tell the sniff.js where we want the pop up object to be positioned. By default, pop ups are placed with their top/left origin at the same top/left origin of the triggering object. We can offset that position manually using the extra classes' x# or y#, where # is a whole number (negative or positive). Here is an example of that link

<a href="{placeholder}" class="k2over unique_id_0 x100 y-50">that link</a>

To improve this, we've moved the pop up over using x100 and up using y-50, but there is even a better way. (Note that in this example we are still refering to the K2 with the "unique_id_0" ID. This shows how you can call the same pop up object with several different triggering objects.

To get the position we really want, there are some other class names we can add to our trigger. The first is horizontal keywords "hLeft", "hMiddleLeft", "hMiddle", "hMiddleRight", and "hRight". These position the pop up object in various places along the X axis relative to the triggering object. Below is an example of "hRight" in use, see the list further down for a sample of all the keywords.

<a href="{placeholder}" class="k2over unique_id_0 hRight">This is a link with hRight</a> 

The other set of keywords are for vertical positioning. These keywords are "vTop", "vMiddle", and "vBottom". These position the pop up object in various places along the Y axis relative to the triggering object. Below is an example of "vMiddle" in use, see the list further down for a sample of all the keywords.

<a href="{placeholder}" class="k2over unique_id_0 vMiddle">This is a link with vMiddle</a>

Now we use both keywords to get the position we want.

<a href="{placeholder}" class="k2over unique_id_0 vMiddle hRight">in a link</a>

Here's a sample of all the positioning keywords available...

Of course, in addition to using keywords, exact placement can be achieved by using x# or y# in addtion to keywords.

<a href="{placeholder}" class="k2over unique_id_0 vBottom hLeft y-90 x80">
This is a link with vBottom hLeft y-90 x80
</a>

As mentioned above there is a 3rd object than can be considered with this javascript, which we'll call the positioning object. When this object is used, the pop up object is positioned using the x/y origin of this object instead of the triggering object. To use a positioning object you must add the ID of that object to the list of classes in your triggering object. Instead of that ID being it's own class name it is hyphenated with the pop up objects ID name, like this:

<a href="{placeholder}" class="k2over someID-unique_id_0">This will open</a>...

but wait, there's more!

One nice thing is that we can apply these classes to just about any HTML tag. For example...

some bold text

<b class="k2over unique_id_0 vMiddle hRight">some bold text</b>

text w/ span tag

<span style="color:#f00" class="k2over unique_id_0 vMiddle hRight">text w/ span tag</span>