Floating Zoomers

2013-04-26 Leave a comment? Go to comments(0)

Introduction

Have you ever wondered how difficult it is to implement from scratch animated floating pop-ups containing whatever web page one may want?

Floating Zoomer

Floating Zoomer

Note that these are not HTML tooltips as those are limited in terms of customization (may not contain links, images etc.). So one could use a considerable amount of Javascript code to work around these limitations or…

The HTML part

This approach is based on a generic and empty HTML object that we hiddenly load as part of our web page. Therefore a single line of HTML code is required.

HTML

<object name="zoom_object" id="zoom_object"
       type="text/html"
       onmouseout="javascript:FadeOutZoom();">
</object>

This is not even HTML 5, so no modern browser should have an issue with it.

The CSS part

The size of the object is defined within the corresponding CSS class. To make it float above “ground level”, a layer index greater than 1 (20 for this example) is set.

CSS

object.float
{
  z-index: 20;
  position: absolute;
  width: 450px;
  height: 200px;
  border-top: 2px solid silver;
  border-bottom: 2px solid silver;
  border-left: 2px solid silver;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 10px 10px 5px #888;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s linear, opacity 0.5s linear;
}

The “radius”, “opacity” and “transition” attributes have been introduced with CSS version 3 which is why legacy browsers may not yet support them. But this is only style, the basic feature will work.

The Javascript part

Now some Javascript code is required to

  • position the floating element at the mouse pointer when the same hovers the underlying HTML element (no CSS “.hover” sub class used as the hovered element is not the same as the one that appears and it’s not an HTML tooltip)
  • change style attributes of the floating element to make it visible and to fade in (opacity)
  • load content into floating element
  • reset style attributes of the floating element when mouse leaves the same

Javascript

var objZoom = document.getElementById( "zoom_object" );
var intPosX = 0;
var intPosY = 0;
 
// Map event handler to function
document.onmousemove = HandleMouseMove;
 
// /////////////////////////////////////////////////////////////////////////////////////
 
function HandleMouseMove( jsEvent )
{
	if ( !jsEvent )
	{
		var jsEvent = window.event;
	}
 
	// The different methods address different browsers
	if ( jsEvent.pageX || jsEvent.pageY )
	{
		intPosX = jsEvent.pageX;
		intPosY = jsEvent.pageY;
	}
	else if ( jsEvent.clientX || jsEvent.clientY )
	{
		intPosX = jsEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		intPosY = jsEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
}
 
// /////////////////////////////////////////////////////////////////////////////////////
 
function FadeInZoom( strURI )
{
	// Cache content until update is requested
	if ( objZoom.getAttribute( 'data') != strURI )
	{
		UpdateZoomObject( strURI );		
	}
 
	objZoom.style.left = intPosX + "px";
	objZoom.style.top = ( intPosY - objZoom.offsetHeight ) + "px";
	objZoom.style.visibility = "visible";
	objZoom.style.opacity = "0.9";
	objZoom.style.transitionDelay = "0.5s";
}
 
// /////////////////////////////////////////////////////////////////////////////////////
 
function FadeOutZoom()
{
	objZoom.style.visibility = "hidden";
	objZoom.style.opacity = "0";
	objZoom.style.transitionDelay = "0.2s";
}
 
// /////////////////////////////////////////////////////////////////////////////////////
 
function UpdateZoomObject( strURI )
{
	objZoom.setAttribute( 'data', strURI );
}

Summary

This is all the code needed to generically load any web page (including images, links, tables etc.) into a floating HTML object that may be bound to any HTML element on the web page, while the floating element is fully styleable and customizable with regards to transition timing using CSS.

Note: For the binding to take place dynamically, some additional code in your preferred back-end language is required.

You can test the result in the Housekeeping demo instance hovering a zoomable element (marked with a magnifying glass).

Leave a comment

0 Comments.

Leave a Reply

( Ctrl + Enter )