Blue Discus Systems - In-Page Pop-Up and Expansion Samples

In-Page Pop-Ups and Expansions


	In-Page Pop-Ups are different from both Pop-Up Pages and Windows in that the Pop-Up feature is contained within the current page rather than being external to it.


	"Alternate Text" features can create tooltip-like effects for some elements within a web page, such as images. Alt Text however is limited in style and behavior, and it can only be used with a limited set of web page elements. Enhanced Tool Tips can be used with any web page element that can have "events" and the Tool Tips can be more flexibly defined.


	In-Page Pop-Ups and Expansions Examples of interactive techniques for displaying additional page content. Links to Page Sections Enhanced Tool Tips Pop-Up Context Menus Selectable Images In-Page Pop-Up with Transition Effects Expand/Collapse Region Collapsing Containers

	Enhanced Tool Tips

	Tool tips provide short context-sensitive textual information that appears when you point to an applicable area of interest. While standard "vanilla" HTML has very limited capabilities for this, the following examples utilize DHTML (Dynamic HTML - with Java Scripts) to provide more robust features - coloring and sizing variations, the ability to attach tool tips to a wider range of web page elements, and more. Hover over (point to) the links below for same variations: Regular Sample Different Colors Narrow and Deep Resized Width Red Warning Hover over the below picture for another example: Hover over the below paragraph for another example: This last example shows how a tooltip can be attached to an entire paragraph (without a link) rather than just hightlighted text, etc. < Back to Top >

Pop-Up Context Menus

Hover over (point to) the image
on the left for a Pop-Up Menu.

< Back to Top >

	Selectable Images (or Any Other Content)

	Click on the links in the following paragraph to pop-up different images below. The cosmos is beautiful and fascinating. Filled with comets, galaxies, dark globules, the images are astounding. Supernovas leave remains that are spectacular. Nubulas - where stars are being born - have names such as Crab, Cat's Eye , Crescent, Jelly Fish, Veil and more... < Back to Top >

	In-Page Pop-Up (with Transition Effects - IE)

	Click on the link below to display an In-Page Pop-Up advertising display with Transition Effects for both its appearance and disappearance. (Many different transition effects are available.) Transition In-Page Pop-Up < Back to Top >

Expand/Collapse Region

This first three 'tabbed' examples allows users to view various topics. Each topic can contain any web content and can be as large as required. Tabs can be positioned on the top, bottom, right or left and can be variously styled.

Left Tab Style

Click on the headings below to change content.

Overview

Features

Support

< Back to Top >

Top Tab Style

Click on the tabs below to change content.

Ancient Sites Choice Locations Vacation Spots

< Back to Top >

In-Line Tab Style

Click on the tabs below to change content.

Interesting Shots

Fractal Designs

The Fog of War

< Back to Top >

The following example - applicable for help, instructions, tips, etc. - allows the user to expand and collapse additional context-specific information.

< Back to Top >

Another common use for the Expand/Collapse feature is for Frequently Asked Questions (FAQ),
as in the following example:

Click on a FAQ question below to show or hide the corresponding answer.

What's a FAQ?

Is this FAQ answer visible?

< Back to Top >

Collapsing Containers

Collapsing and Expanding Containers can also be very effective in freeing up space on a page when a visitor no longer wishes to view some content.

Both the container appearance as well as the collapse/expand link can be flexibly styled. In this sample, the collapse/expand link image is on the right of the title bar.

Click

to Collapse
Click

to Expand.

< Back to Top >