Really quick and simple code in order to show or hide a layer on your webpage using Javascript. This can be used as the basis for things such image galleries, video popups and if you have no soul then it can be used for web advertising
Effectively what we do is define a layer in CSS and then write a couple of functions, one to set the visibility and position of the layer and the other to find the position on the page that it should appear. You can then add whatever you want inside the layer ready to be shown or hidden when a user clicks a link, or anyother way to activate the function.
Typically when we create a layer in CSS/ HTML it will appear inline in the page much like any other HTML element. We can position layers to be positioned either static, fixed, relative or absolute. This bit is important to know for our popup layer/ overlay and how to position it.
Static is where the layer appears in the page as it normally would where ever it’s placed in the code, much like an image in a page.
Fixed will allow a layer to stay in the same place in the browser window despite scrolling.
Relative is normally done with co-ordinates set from the layer’s original position on the page.
Absolute will mean the layer is positioned in relation to the parent element that it appears in or another given element in our case.
So first we declare our CSS.
We create a layer id using # and assign width, height, position, display and index parameters
<style type="text/css"> #test { position: absolute; /* positions the element from the previous item container */ z-index: 10; /* z-index sets the depth of the item, the higher the number the nearer to the front */ display: none; /* hides the layer when page is loaded */ background-color: #CCC; width: 200px; height: 200px; } </style>
Next we write our Javascript functions
We write a function to hide the layer, a function to show the layer and position it and a function to find the position of a given object to work out where to display the layer.
<script type="text/javascript"> function findPosition(object) { // finds the position of a given object, used as reference point for our layer var positionLeft = positionTop = 0; // declare variables to store co-ordinates if (object.offsetParent) { // offsetParent returns the position from the nearest element in this case our link that was clicked do { positionLeft += object.offsetLeft; // store the position positionTop += object.offsetTop; } while (object = object.offsetParent); } return [positionLeft,positionTop]; // return the co-ordinates of the link } function openLayer(object, myLayer) // shows the layer and changes its position based on the given object { var coords = findPosition(object); // get our co-ordinates from the findPosition function var layer = document.getElementById(myLayer); layer.style.top = 100 + coords[1] + 'px'; // change the 100 to alter co-ordinates of popup layer.style.left = 100 + coords[0] + 'px'; // places it from the top left corner of our object, in this case the link clicked. document.getElementById(myLayer).style.display='inline'; // show the layer } function closeLayer(myLayer) { document.getElementById(myLayer).style.display='none'; } </script>
Finally we create our HTML
Here we create our layer and a couple of links, one to close the layer and one to open the layer, the function to open the layer needs the id of the layer to open and the object from which to position itself, in this case we use the link (this).
<div id="test">
<!-- closes/ hides the layer the function needs the name of the layer to close -->
<a href="#" onclick="closeLayer('test');">Close</a>
</div>
<!-- opens/ shows the layer the function needs the name of the layer to open and the object from which to position it, 'this' refers to the link clicked but can be changed to document.getElementById() etc... -->
<a href="#" onclick="openLayer(this, 'test');">Open</a>And here’s the final code:
<html>
<head>
<title>LUCKYLARRY.CO.UK - basic overlay, show/ hide a layer popup</title>
<style type="text/css">
#test {
position: absolute; /* positions the element from the previous item container */
z-index: 10; /* z-index sets the depth of the item, the higher the number the nearer to the front */
display: none; /* hides the layer when page is loaded */
background-color: #CCC;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function findPosition(object) { // finds the position of a given object, used as reference point for our layer
var positionLeft = positionTop = 0; // declare variables to store co-ordinates
if (object.offsetParent) { // offsetParent returns the position from the nearest element in this case our link that was clicked
do {
positionLeft += object.offsetLeft; // store the position
positionTop += object.offsetTop;
} while (object = object.offsetParent);
}
return [positionLeft,positionTop]; // return the co-ordinates of the link
}
function openLayer(object, myLayer) // shows the layer and changes its position based on the given object
{
var coords = findPosition(object); // get our co-ordinates from the findPosition function
var layer = document.getElementById(myLayer);
layer.style.top = 100 + coords[1] + 'px'; // change the 100 to alter co-ordinates of popup
layer.style.left = 100 + coords[0] + 'px'; // places it from the top left corner of our object, in this case the link clicked.
document.getElementById(myLayer).style.display='inline'; // show the layer
}
function closeLayer(myLayer) {
document.getElementById(myLayer).style.display='none';
}
</script>
</head>
<body>
<div id="test">
<!-- closes/ hides the layer the function needs the name of the layer to close -->
<a href="#" onclick="closeLayer('test');">Close</a>
</div>
<!-- opens/ shows the layer the function needs the name of the layer to open and the object from which to position it, 'this' refers to the link clicked but can be changed to document.getElementById() etc... -->
<a href="#" onclick="openLayer(this, 'test');">Open</a>
</body>
</html>This content is published under the Attribution-Noncommercial-Share Alike 3.0 Unported license.
