admin
Guest
|
 |
« on: November 22, 2006, 09:34: PM » |
|
Paste this code into an external JavaScript file named: floatingLayer.js
-------Code Start-------
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"
------code end-------
-----paste into header of page-------
<script type="text/javascript" src="floatingLayer.js"></script>
--------paste into Body tag area------
<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">X</font>[/url] </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.
[You can close the layer by clicking the <strong>X</strong> at the top right of this layer.] </td> </tr> </table> </font> </div>
<form> <input type="button" value="Open popup" onClick="showIt()"> </form>
Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document. ------CSS Coding------
td.top { background-color: #000080; text-align: right; }
td.bottom { background-color: #ffe38c; padding: 15px; }
|