ShadedborderWithDimming Division

HI, I am trying to round the corners on a Div that only comes up when the user clicks video. It dims the page and the div becomes visible an plays our video. It works but a cannot get shadedborders to round the corners on this div which is invisble until the user clicks "video" The division floats, i.e the user can move the division around on the screen.

#windowcontent { padding:20px; width:30%; margin:200px auto; color:#fffFFF; }
#windowcontent, #windowcontent .sb-inner { background:#444 url(grad.png) repeat-x; }

-->

Content Area

document.write(pageWidth(document.documentElement.clientWidth));

function displayWindow()
{
var w, h, l, t;
w = 640;
h = 430;
t = (pageHeight(document.documentElement.pageHeight)- 430)/2;
l = (pageWidth(document.documentElement.clientWidth)- 640)/2;
// no title
//displayFloatingDiv('windowcontent', '', w, h, l, t);
// with title
displayFloatingDiv('windowcontent', 'Hold mouse down here to move video', w, h, l, t);
}

Click here for video Here

var #windowcontent = RUZEE.ShadedBorder.create({ corner:16, shadow:16 });
#windowcontent.render('headfoot');

/*
//************************************************************************************
// Copyright (C) 2006, Massimo Beatini
//
// This software is provided "as-is", without any express or implied warranty. In
// no event will the authors be held liable for any damages arising from the use
// of this software.
//
// Permission is granted to anyone to use this software for any purpose, including
// commercial applications, and to alter it and redistribute it freely, subject to
// the following restrictions:
//
// 1. The origin of this software must not be misrepresented; you must not claim
// that you wrote the original software. If you use this software in a product,
// an acknowledgment in the product documentation would be appreciated but is
// not required.
//
// 2. Altered source versions must be plainly marked as such, and must not be
// misrepresented as being the original software.
//
// 3. This notice may not be removed or altered from any source distribution.
//
//************************************************************************************
*/

div.dimmer
{
visibility: hidden;
position:absolute;
left:0px;
top:0px;
font-family:verdana;
font-weight:bold;
padding:0px;
background-image:url(black.png);
/* ieWin only stuff */
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='black.png');
}

div.dimming {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-color: #FFFFFF;
background-color: #000000;
foreground-color: #FFFFFF;
position:absolute;
/* set z-index higher than possible */
z-index:10000;
visibility: hidden;
}

table.floatingHeader
{
color: white;
border-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
}

//************************************************************************************
// Copyright (C) 2006, Massimo Beatini
//
// This software is provided "as-is", without any express or implied warranty. In
// no event will the authors be held liable for any damages arising from the use
// of this software.
//
// Permission is granted to anyone to use this software for any purpose, including
// commercial applications, and to alter it and redistribute it freely, subject to
// the following restrictions:
//
// 1. The origin of this software must not be misrepresented; you must not claim
// that you wrote the original software. If you use this software in a product,
// an acknowledgment in the product documentation would be appreciated but is
// not required.
//
// 2. Altered source versions must be plainly marked as such, and must not be
// misrepresented as being the original software.
//
// 3. This notice may not be removed or altered from any source distribution.
//
//************************************************************************************

//
// global variables
//
var isMozilla;
var objDiv = null;
var originalDivHTML = "";
var DivID = "";
var over = false;

//
// dynamically add a div to
// dim all the page
//
function buildDimmerDiv()
{
document.write('');
}

//
//
//
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 = '' +
'' + title + '' +
'' +
'
';
// add to your div the header
document.getElementById(divId).innerHTML = addHeader + originalDivHTML;
document.getElementById(divId).className = 'dimming';
document.getElementById(divId).style.visibility = "visible";

}

//
//
//
function hiddenFloatingDiv(divId)
{
document.getElementById(divId).innerHTML = originalDivHTML;
document.getElementById(divId).style.visibility='hidden';
document.getElementById('dimmer').style.visibility = 'hidden';

DivID = "";
}

//
//
//
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();

}

// call init
init();

Trackback URL for this post:

http://www.ruzee.com/trackback/285