File: dimbox.js

Recommend this page to a friend!
  Classes of Paul Kevin   Dimbox   dimbox.js   Download  
File: dimbox.js
Role: Class source
Content type: text/plain
Description: Dimbox
Class: Dimbox
Display a light box and fade the rest of a page
Author: By
Last change: Modified function loadDimmer(width) that accepts the width in pixels
Added the function loadDimBox(width) that accepts the width as a percentage
Date: 13 years ago
Size: 4,390 bytes
 

Contents

Class file image Download
/** *Script : dimbox.js * *Purpose : Create a div with a lightbox effect * *Date Created : 17-11-2011 *Author : Paul Kevin */ var dimBox = { settings: { //inner div content content: "", header : "<div style='width:100%;'><div style=' float:right; cursor:pointer;' onclick='dimBox.closeDimmer()'>CLOSE</div></div>" }, //Function to load. Should be loaded as page loads loadDimBox: function(width){ var whiteDiv = document.createElement('div'); whiteDiv.id="dark"; whiteDiv.className="white_bg"; document.body.appendChild(whiteDiv); var dimPageDiv = document.createElement('div'); var myHeight = 0; dimPageDiv.id = "light"; dimPageDiv.className = "white_content"; dimPageDiv.style.marginLeft = (((100 - width)/2)-1)+"%"; dimPageDiv.style.marginRight = (((100 - width)/2)-1)+"%"; var browser=navigator.appName; if (browser == "Microsoft Internet Explorer") { dimPageDiv.style.width = width+"%"; }else{ dimPageDiv.style.width = width+"%"; } dimPageDiv.style.display = "none"; dimPageDiv.style.position = "fixed"; dimPageDiv.style.zIndex="999"; document.body.appendChild(dimPageDiv); dimPageDiv.innerHTML = dimBox.settings.header + "<br/>" + dimBox.settings.content; if (typeof(window.innerWidth) == 'number') { //Non-IE myHeight = window.innerHeight; } else { if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible myHeight = document.body.clientHeight; } } whiteDiv.style.height = myHeight; dimPageDiv.style.top = (myHeight/6)+"px"; }, /** * Load Dimmer using width */ loadDimmer: function(width){ var whiteDiv = document.createElement('div'); whiteDiv.id="dark"; whiteDiv.className="white_bg"; document.body.appendChild(whiteDiv); var dimPageDiv = document.createElement('div'); var myHeight = 0; dimPageDiv.id = "light"; dimPageDiv.className = "white_content"; var divwidth = $(document).width() - width; dimPageDiv.style.marginLeft = (divwidth/2)+"px"; dimPageDiv.style.marginRight = (divwidth/2)+"px"; dimPageDiv.style.width = width+"px"; dimPageDiv.style.display = "none"; dimPageDiv.style.position = "fixed"; dimPageDiv.style.zIndex="999"; document.body.appendChild(dimPageDiv); dimPageDiv.innerHTML = dimBox.settings.header + "<br/>" + dimBox.settings.content; if (typeof(window.innerWidth) == 'number') { //Non-IE myHeight = window.innerHeight; } else { if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible myHeight = document.body.clientHeight; } } whiteDiv.style.height = myHeight; dimPageDiv.style.top = (myHeight/6)+"px"; }, showDimmer: function(){ document.getElementById('dark').style.display = 'block'; document.getElementById('light').style.display = 'block'; }, closeDimmer: function(){ var dimPageDiv = document.getElementById('light'); dimPageDiv.style.display = 'none'; document.body.removeChild(dimPageDiv); var whiteDiv = document.getElementById('dark'); whiteDiv.style.display = 'none'; document.body.removeChild(whiteDiv); } };