Click here to Skip to main content
13,086,662 members (56,858 online)
Click here to Skip to main content
Add your own
alternative version

Stats

372.4K views
4.2K downloads
97 bookmarked
Posted 2 Feb 2006

How To Make Floating and Dimming a Div using JavaScript

, 14 Feb 2006
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

You may also be interested in...

Pro

Comments and Discussions

 
GeneralDimmer only the displayed part of page Pin
kenpeck4-Mar-10 6:23
memberkenpeck4-Mar-10 6:23 
GeneralCannot round the corner of the dimming floating division Pin
kenpeck24-Feb-10 6:20
memberkenpeck24-Feb-10 6:20 
GeneralRe: Cannot round the corner of the dimming floating division Pin
Massimo Beatini24-Feb-10 22:15
memberMassimo Beatini24-Feb-10 22:15 
GeneralRe: Cannot round the corner of the dimming floating division Pin
kenpeck4-Mar-10 6:26
memberkenpeck4-Mar-10 6:26 
GeneralRe: Cannot round the corner of the dimming floating division Pin
kenpeck9-Mar-10 7:20
memberkenpeck9-Mar-10 7:20 
GeneralFloating dimmer Pin
kenpeck19-Feb-10 3:52
memberkenpeck19-Feb-10 3:52 
Generalfloating Div dimmer Pin
kenpeck18-Feb-10 6:44
memberkenpeck18-Feb-10 6:44 
GeneralRe: floating Div dimmer Pin
Massimo Beatini18-Feb-10 23:13
memberMassimo Beatini18-Feb-10 23:13 
GeneralRe: floating Div dimmer Pin
yasir7826-Jul-14 21:59
memberyasir7826-Jul-14 21:59 
GeneralInteraction with server Pin
sigurdur einarsson6-Nov-09 4:06
membersigurdur einarsson6-Nov-09 4:06 
Generaldisable controls problem in IE Pin
hans heijstee14-Apr-09 4:20
memberhans heijstee14-Apr-09 4:20 
GeneralFocus doesnt come in firefox Pin
Shweta228122-Nov-07 19:36
memberShweta228122-Nov-07 19:36 
Generalmultiple windows on same page. Pin
Dannau9-Oct-07 11:02
memberDannau9-Oct-07 11:02 
NewsHighly Recomended... Pin
Ramene Anthony17-Apr-07 19:09
memberRamene Anthony17-Apr-07 19:09 
GeneralResize browser window problem Pin
Member #224538021-Mar-07 21:31
memberMember #224538021-Mar-07 21:31 
Generaldisplay div on top only when there is long page Pin
Member #38831916-Mar-07 2:07
memberMember #38831916-Mar-07 2:07 
AnswerRe: display div on top only when there is long page Pin
Massimo Beatini6-Mar-07 2:48
memberMassimo Beatini6-Mar-07 2:48 
GeneralRe: display div on top only when there is long page Pin
mosphp6-Mar-07 5:44
membermosphp6-Mar-07 5:44 
GeneralThanks Pin
HeavySaysHeavyDoes17-Feb-07 15:39
memberHeavySaysHeavyDoes17-Feb-07 15:39 
Generalasp:DropDownList zOrder problem Pin
ksellers20-Jan-07 9:43
memberksellers20-Jan-07 9:43 
AnswerRe: asp:DropDownList zOrder problem Pin
ksellers20-Jan-07 10:53
memberksellers20-Jan-07 10:53 
GeneralRe: asp:DropDownList zOrder problem Pin
ksellers20-Jan-07 11:11
memberksellers20-Jan-07 11:11 
GeneralRe: asp:DropDownList zOrder problem Pin
mcory20-Jun-07 2:57
membermcory20-Jun-07 2:57 
GeneralRe: asp:DropDownList zOrder problem Pin
RichardGrimmer5-Nov-08 6:00
memberRichardGrimmer5-Nov-08 6:00 
GeneralImportant Bug Pin
allex4project11-Jan-07 5:32
memberallex4project11-Jan-07 5:32 
GeneralASP.NET Version Pin
dandon_man20-Nov-06 1:18
memberdandon_man20-Nov-06 1:18 
AnswerRe: ASP.NET Version Pin
Massimo Beatini11-Dec-06 5:40
memberMassimo Beatini11-Dec-06 5:40 
GeneralRe: ASP.NET Version Pin
chookieeee16-Apr-07 22:03
memberchookieeee16-Apr-07 22:03 
QuestionBackground div doesnot cover whole page? Pin
im_simpleboy12-Nov-06 6:11
memberim_simpleboy12-Nov-06 6:11 
AnswerRe: Background div doesnot cover whole page? Pin
Massimo Beatini12-Nov-06 21:33
memberMassimo Beatini12-Nov-06 21:33 
AnswerRe: Background div doesnot cover whole page? Pin
pdangelo6-Feb-07 6:17
memberpdangelo6-Feb-07 6:17 
AnswerRe: Background div doesnot cover whole page? Pin
derekbez14-Mar-07 3:42
memberderekbez14-Mar-07 3:42 
AnswerRe: Background div doesnot cover whole page? Pin
gowthamip23-Sep-07 22:35
membergowthamip23-Sep-07 22:35 
QuestionHow to hide form's select field behind this floating div? Pin
sinanju17-Oct-06 1:52
membersinanju17-Oct-06 1:52 
AnswerRe: How to hide form's select field behind this floating div? Pin
Massimo Beatini17-Oct-06 4:21
memberMassimo Beatini17-Oct-06 4:21 
GeneralDimmer refresh and security problem Pin
MiltonB231-Aug-06 12:27
memberMiltonB231-Aug-06 12:27 
GeneralRe: Dimmer refresh and security problem Pin
Massimo Beatini31-Aug-06 23:56
memberMassimo Beatini31-Aug-06 23:56 
GeneralRe: Dimmer refresh and security problem Pin
GavinMannion3-Oct-06 2:37
memberGavinMannion3-Oct-06 2:37 
GeneralRe: Dimmer refresh and security problem Pin
MiltonB23-Oct-06 3:04
memberMiltonB23-Oct-06 3:04 
GeneralRe: Dimmer refresh and security problem Pin
insektgod18-Jun-08 16:55
memberinsektgod18-Jun-08 16:55 
GeneralGood, simple implementation Pin
Shawn Poulson15-Feb-06 3:47
memberShawn Poulson15-Feb-06 3:47 
GeneralExcellent Pin
Narayan Ambatipudi15-Feb-06 2:14
memberNarayan Ambatipudi15-Feb-06 2:14 
QuestionDoesn't work if DOCTYPE changed Pin
randyc14-Feb-06 16:41
memberrandyc14-Feb-06 16:41 
AnswerRe: Doesn't work if DOCTYPE changed Pin
Massimo Beatini14-Feb-06 22:19
memberMassimo Beatini14-Feb-06 22:19 
NewsTake a look at subModal Pin
nezza6-Feb-06 22:16
membernezza6-Feb-06 22:16 

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

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

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