The JavaScript Source: Miscellaneous : Always on Top Popup

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.

X

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>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

17. From: Kat
A Suggestion
11/05/2007 05:21:48

19. From: Sandeep
Re: A Suggestion
01/04/2008 07:21:17

18. From: Lee (Admin)
11/13/2007 11:29:53

16. From: murali
nice one
07/04/2007 04:27:49

15. From: Lee
01/03/2007 11:52:20

14. From: Carey Lott
12/19/2006 13:24:25

13. From: Ross
12/03/2006 18:29:23

12. From: Ross
12/03/2006 18:25:19

11. From: Richard G
12/03/2006 10:52:53

10. From: Jeroen Haan
12/01/2006 16:31:12

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

17. From: KatA Suggestion11/05/2007 05:21:48

19. From: SandeepRe: A Suggestion01/04/2008 07:21:17

18. From: Lee (Admin)11/13/2007 11:29:53

16. From: muralinice one07/04/2007 04:27:49

15. From: Lee01/03/2007 11:52:20

14. From: Carey Lott12/19/2006 13:24:25

13. From: Ross12/03/2006 18:29:23

12. From: Ross12/03/2006 18:25:19

11. From: Richard G12/03/2006 10:52:53

10. From: Jeroen Haan12/01/2006 16:31:12

17. From: Kat
A Suggestion
11/05/2007 05:21:48

19. From: Sandeep
Re: A Suggestion
01/04/2008 07:21:17

18. From: Lee (Admin)
11/13/2007 11:29:53

16. From: murali
nice one
07/04/2007 04:27:49

15. From: Lee
01/03/2007 11:52:20

14. From: Carey Lott
12/19/2006 13:24:25

13. From: Ross
12/03/2006 18:29:23

12. From: Ross
12/03/2006 18:25:19

11. From: Richard G
12/03/2006 10:52:53

10. From: Jeroen Haan
12/01/2006 16:31:12