Always on Top Popup

Sandeep Gangadharan Nov 20, 2006

General

This script opens a floating layer popup. This technique allows the user to work in the main window while still being able to view the popup. The popup window will hover at the same spot where it opens, even if the user scrolls down the page.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.

[You can close the layer by clicking the X at the top right of this layer.]

Notes

Created by: Sandeep Gangadharan
Web Site: http://www.sivamdesign.com/home/
Posted: November 20, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: floatingLayer.js

var y1 = 20;   // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
  if (dom) {document.getElementById("layer1").style.visibility='hidden';}
  if (document.layers) {document.layers["layer1"].visibility='hide';} }

function showIt() {
  if (dom) {document.getElementById("layer1").style.visibility='visible';}
  if (document.layers) {document.layers["layer1"].visibility='show';} }

function placeIt() {
  if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.layers) {document.layers["layer1"].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
  if (document.all) {document.all["layer1"].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
  window.setTimeout("placeIt()", 10); }

window.onload=placeIt();
onResize="window.location.href = window.location.href"

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

td.top {
  background-color: #000080;
  text-align: right;
}

td.bottom {
  background-color: #ffe38c;
  padding: 15px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="floatingLayer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="layer1" style="position:absolute; left:20px; width:410px; height:10px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
 <tr>
  <td class="top">
       <a href="javascript:hideIt()" style="text-decoration: none"><font color="#ffffff"><b>X</b></font></a>
  </td>
 </tr>
 <tr>
  <td class="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.
    <br><br>
    [<em>You can close the layer by clicking the <strong>X</strong> at the top right of this layer.</em>]
  </td>
 </tr>
</table>
</font>
</div>

<form>
  <input type="button" value="Open popup" onClick="showIt()">
</form>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details