Click here to Skip to main content
Click here to Skip to main content

How To Make Floating and Dimming a Div using JavaScript

, 14 Feb 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
This script allows you to simulate, dimming the page, a pop up window using a div.
Sample Image - js_floating_dimming_div.jpg

Introduction

This script allows you to simulate, dimming the page, a pop up window message using a div. You can also use it to create an input window to ask for additional information.
This script has been tested only with Internet Explorer 6.0, Firefox 1.0.7 and Opera 8.51 on Windows 2003 Server.

How It Works

The first peculiarity of this script is to dim the page and to use any div, identified by an id, you write in your HTML code.
To dim the page, my code uses a dynamically added dimmer div having a semi-transparent PNG image as background. The source file contains a few PNG background images.
The script dynamically sets the dimmer's size equal to the window screen size as shown below:

//
// dynamically add a div to
// dim all the page
//
function buildDimmerDiv()
{
    document.write('<div id="dimmer" class="dimmer" style="width:'+
    window.screen.width + 'px; height:' + window.screen.height +'px"></div>');
}

And this is its CSS style:

div.dimmer
{
    visibility: hidden;
    position:absolute;
    left:0px;
    top:0px;
    font-family:verdana;
    font-weight:bold;
    padding:40px;

    background-image:url(honey.png);
    /* ieWin only stuff */
        /* with this trick only IE
           manage the following 2 attributes */
    _background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true, sizingMethod=scale src='honey.png');
}

The script changes its visibility to visible before showing the floating div.

document.getElementById('dimmer').style.visibility = "visible";

The second script's feature is the chance to move the div. We are able to do it writing handlers for the main mouse events.

//
//
//
function MouseDown(e)
{
    if (over)
    {
        if (isMozilla) {
            objDiv = document.getElementById(DivID);
            X=e.layerX;
            Y=e.layerY;
            return false;
        }
        else {
            objDiv = document.getElementById(DivID);
            objDiv = objDiv.style;
            X=event.offsetX;
            Y=event.offsetY;
        }
    }
}

//
//
//
function MouseMove(e)
{
    if (objDiv) {
        if (isMozilla) {
            objDiv.style.top = (e.pageY-Y) + 'px';
            objDiv.style.left = (e.pageX-X) + 'px';
            return false;
        }
        else
        {
            objDiv.pixelLeft = event.clientX-X + document.body.scrollLeft;
            objDiv.pixelTop = event.clientY-Y + document.body.scrollTop;
            return false;
        }
    }
}

//
//
//
function MouseUp()
{
    objDiv = null;
}

//
//
//
function init()
{
    // check browser
    isMozilla = (document.all) ? 0 : 1;

    if (isMozilla)
    {
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
    }

    document.onmousedown = MouseDown;
    document.onmousemove = MouseMove;
    document.onmouseup = MouseUp;

    // add the div
    // used to dim the page
    buildDimmerDiv();

}

How To Use It

The layout of the dimmer and floating div is customizable using the dimming.css file. To use the script, first you must insert the following HTML code in the head section of your page:

<link REL=StyleSheet HREF="dimming.css" TYPE="text/css">
<script LANGUAGE="JavaScript" SRC="dimmingdiv.js">
</script>

Then define in your HTML code, a div containing the code to display:

<!--<span class="code-comment">  the following hidden div will be used by the script --></span>
<div style="width: 518px; height: 287px;visibility:hidden" id="windowcontent">
            <script language="javascript">
            function Hello()
            {
               alert('Hello '+  document.getElementById('yourname').value + '!');
            }
            </script>
            <table >
            <tr><td colspan="2"></td></tr>
            <tr>
            <td>Your name:</td>
            <td><input type="text" style="width: 292px" id="yourname" /></td>
            </tr>
            <tr>
            <td colspan="2">
            <input type="button" value="Hello button" onclick="Hello();"
                style="width: 119px"/></td>
            </tr>
            <tr><td colspan="2">
Click the left mouse button on the blue header then move the floating div!!!</td></tr>
            </table>
</div>

Call the displayFloatingDiv function to show the div. This function accepts six input parameters:

  • ID of the div to show
  • title
  • width
  • height
  • left position
  • top position

//
//
//
function displayFloatingDiv(divId, title, width, height, left, top)
{
    DivID = divId;

    document.getElementById('dimmer').style.visibility = "visible";

    document.getElementById(divId).style.width = width + 'px';
    document.getElementById(divId).style.height = height + 'px';
    document.getElementById(divId).style.left = left + 'px';
    document.getElementById(divId).style.top = top + 'px';

    var addHeader;

    if (originalDivHTML == "")
        originalDivHTML = document.getElementById(divId).innerHTML;

    addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
                '<tr><td ondblclick="void(0);" onmouseover="over=true;" onmouseout=
                     "over=false;" style="cursor:move;height:18px">' + title + '</td>' +
                '<td style="width:18px" align="right">
                <a href="javascript:hiddenFloatingDiv(\'' + divId + '\');void(0);">' +
                '<img title="Close..." alt="Close..." src="close.jpg" border="0" /</a>
                </td></tr></table>';


    // add to your div an header
    document.getElementById(divId).innerHTML = addHeader + originalDivHTML;


    document.getElementById(divId).className = 'dimming';
    document.getElementById(divId).style.visibility = "visible";
}

A displayFloatingDiv calling example is shown below:

var w, h, l, t;
w = 400;
h = 200;
l = screen.width/4;
t = screen.height/4;

// no title
// displayFloatingDiv('windowcontent', '', w, h, l, t);

// with title
displayFloatingDiv('windowcontent', 'Floating and Dimming Div', w, h, l, t);

Screenshots

Firefox screenshot

An Internet Explorer screenshot.

Firefox screenshot

An Opera screenshot.

Conclusion

The zip source file contains the script, CSS, PNG images and a demo HTML page.
I hope you enjoy this article.

Code4dotnet

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Massimo Beatini
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

 
GeneralDimmer only the displayed part of page Pinmemberkenpeck4-Mar-10 7:23 
GeneralCannot round the corner of the dimming floating division Pinmemberkenpeck24-Feb-10 7:20 
GeneralRe: Cannot round the corner of the dimming floating division PinmemberMassimo Beatini24-Feb-10 23:15 
GeneralRe: Cannot round the corner of the dimming floating division Pinmemberkenpeck4-Mar-10 7:26 
GeneralRe: Cannot round the corner of the dimming floating division Pinmemberkenpeck9-Mar-10 8:20 
GeneralFloating dimmer Pinmemberkenpeck19-Feb-10 4:52 
Generalfloating Div dimmer Pinmemberkenpeck18-Feb-10 7:44 
GeneralRe: floating Div dimmer PinmemberMassimo Beatini19-Feb-10 0:13 
GeneralRe: floating Div dimmer Pinmemberyasir7826-Jul-14 22:59 
GeneralInteraction with server Pinmembersigurdur einarsson6-Nov-09 5:06 
Generaldisable controls problem in IE Pinmemberhans heijstee14-Apr-09 5:20 
GeneralFocus doesnt come in firefox PinmemberShweta228122-Nov-07 20:36 
Generalmultiple windows on same page. PinmemberDannau9-Oct-07 12:02 
NewsHighly Recomended... PinmemberRamene Anthony17-Apr-07 20:09 
GeneralResize browser window problem PinmemberMember #224538021-Mar-07 22:31 
Generaldisplay div on top only when there is long page PinmemberMember #38831916-Mar-07 3:07 
AnswerRe: display div on top only when there is long page PinmemberMassimo Beatini6-Mar-07 3:48 
GeneralRe: display div on top only when there is long page Pinmembermosphp6-Mar-07 6:44 
GeneralThanks PinmemberHeavySaysHeavyDoes17-Feb-07 16:39 
Generalasp:DropDownList zOrder problem Pinmemberksellers20-Jan-07 10:43 
AnswerRe: asp:DropDownList zOrder problem Pinmemberksellers20-Jan-07 11:53 
GeneralRe: asp:DropDownList zOrder problem Pinmemberksellers20-Jan-07 12:11 
GeneralRe: asp:DropDownList zOrder problem Pinmembermcory20-Jun-07 3:57 
GeneralRe: asp:DropDownList zOrder problem PinmemberRichardGrimmer5-Nov-08 7:00 
GeneralImportant Bug Pinmemberallex4project11-Jan-07 6:32 
GeneralASP.NET Version Pinmemberdandon_man20-Nov-06 2:18 
AnswerRe: ASP.NET Version PinmemberMassimo Beatini11-Dec-06 6:40 
GeneralRe: ASP.NET Version Pinmemberchookieeee16-Apr-07 23:03 
QuestionBackground div doesnot cover whole page? Pinmemberim_simpleboy12-Nov-06 7:11 
AnswerRe: Background div doesnot cover whole page? PinmemberMassimo Beatini12-Nov-06 22:33 
AnswerRe: Background div doesnot cover whole page? Pinmemberpdangelo6-Feb-07 7:17 
AnswerRe: Background div doesnot cover whole page? Pinmemberderekbez14-Mar-07 4:42 
AnswerRe: Background div doesnot cover whole page? Pinmembergowthamip23-Sep-07 23:35 
QuestionHow to hide form's select field behind this floating div? Pinmembersinanju17-Oct-06 2:52 
AnswerRe: How to hide form's select field behind this floating div? PinmemberMassimo Beatini17-Oct-06 5:21 
GeneralDimmer refresh and security problem PinmemberMiltonB231-Aug-06 13:27 
GeneralRe: Dimmer refresh and security problem PinmemberMassimo Beatini1-Sep-06 0:56 
GeneralRe: Dimmer refresh and security problem PinmemberGavinMannion3-Oct-06 3:37 
GeneralRe: Dimmer refresh and security problem PinmemberMiltonB23-Oct-06 4:04 
GeneralRe: Dimmer refresh and security problem Pinmemberinsektgod18-Jun-08 17:55 
GeneralGood, simple implementation PinmemberShawn Poulson15-Feb-06 4:47 
GeneralExcellent PinmemberNarayan Ambatipudi15-Feb-06 3:14 
QuestionDoesn't work if DOCTYPE changed Pinmemberrandyc14-Feb-06 17:41 
AnswerRe: Doesn't work if DOCTYPE changed PinmemberMassimo Beatini14-Feb-06 23:19 
NewsTake a look at subModal Pinmembernezza6-Feb-06 23:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 15 Feb 2006
Article Copyright 2006 by Massimo Beatini
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid