{"id":67,"date":"2013-04-26T01:04:00","date_gmt":"2013-04-26T01:04:00","guid":{"rendered":"http:\/\/reichartonline.de\/?page_id=67"},"modified":"2020-05-10T08:20:56","modified_gmt":"2020-05-10T08:20:56","slug":"floating-zoomers","status":"publish","type":"page","link":"https:\/\/reichartonline.de\/?page_id=67","title":{"rendered":"Floating Zoomers"},"content":{"rendered":"

Introduction<\/strong><\/p>\n

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

\"Floating<\/a>

Floating Zoomer<\/p><\/div>\n

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…<\/p>\n

The HTML part<\/strong><\/p>\n

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.<\/p>\n

HTML<\/p>\n

<object name=\"zoom_object\" id=\"zoom_object\"\n       type=\"text\/html\"\n       onmouseout=\"javascript:FadeOutZoom();\">\n<\/object><\/pre>\n
This is not even HTML 5, so no modern browser should have an issue with it.<\/p>\n
The CSS part<\/strong><\/p>\n
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.<\/p>\n
CSS<\/p>\n
object.float\n{\n  z-index: 20;\n  position: absolute;\n  width: 450px;\n  height: 200px;\n  border-top: 2px solid silver;\n  border-bottom: 2px solid silver;\n  border-left: 2px solid silver;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n  box-shadow: 10px 10px 5px #888;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0.5s linear, opacity 0.5s linear;\n}<\/pre>\n
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.<\/p>\n
The Javascript part<\/strong><\/p>\n
Now some Javascript code is required to<\/p>\n