471,598 Members | 1,313 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

semi-transparent Background colour screen dimensions

Hey everyone,

My question is related to HTML, Javascript, CSS and ASP.NET but i think it belongs here!

Upon an event i am trying to add a semi-transparent colour across the page so the background is obscurred but i also set a div with a known ID to exist above this.

My current method has been to on the fly create a div which gets the screen height/width with javascript and then sets the image.

However, my div is created but does not cover the whole screen as other divs already exist on the page.

In short, i would like to cover the whole page with a semi transparent colour.

My current CSS has been:

style="background-color: black;filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;position:absolute; z-index:101; width:'+ screen.width + 'px; height:' + screen.height +'px"

This css has been applied to a div on my page.

If anyone could help me it would be appreciated,

Many Thanks,
James
Aug 28 '07 #1
9 3892
phvfl
173 Expert 100+
Hi James,

Have you tried explicitly setting the padding and margins to 0 as if these are being declared in any CSS rules that match the masking div then this may account for the issue.
Aug 28 '07 #2
Hey,

Thanks for your reply.

I tried your suggestion but it did not make a difference. I still have a number of elements above the masked div which are not being covered by the masking div.

Half my screen is masked but the half with html elements is not masked.

Hope i am painting a picture there :)

James
Aug 28 '07 #3
phvfl
173 Expert 100+
Hi,

Could you post either the HTML and javascript that you are using, or even better a link to the page so that I could see the exact problem.

I'll try recreating here in the meanwhile but my attempt may be different from what you have.
Aug 28 '07 #4
drhowarddrfine
7,435 Expert 4TB
I'm waiting for a meeting to start so I may misunderstand the OP but can you just set the body background? Also, 'opacity' works in FF and all modern browsers so you don't need -mox-opacity.
Aug 28 '07 #5
phvfl
173 Expert 100+
James,

The issue is with the div following the content that already exists. This can be fixed in Firefox by using fixed positioning and setting the top and left property to 0. Unfortunately this does not seem to work in IE. What browsers are you aiming this at and what are you using for testing? Have you had success with any browser?

Doc:

Changing the background colour would look the same but the content would be above the change in colour and so would still be usable. This effect is normally done to prevent this from being done while some script executes.
Aug 28 '07 #6
drhowarddrfine
7,435 Expert 4TB
Yeah, I forgot that's why they wanted transperency.
Still in a meeting. ;)
Aug 28 '07 #7
markrawlingson
346 Expert 100+
Use height:100%;width:100%; and set the body { margin:0px )

That will work.

Now the real problem you'll face will be with windowed objects like drop down lists, activex content, flash media, etc. If you run into that issue, let me know :P (I have a solution)
Aug 28 '07 #8
Hey everyone,

Thanks for all your replies.

Sorry i cannot show you a link to the page as i dont have anywhere to host it currently.

The javascript function in my code called buildDimmerDiv() is where i try and create a div to cover the whole page. My reason for building the html like this is because i am calling it upon a server side event.

Thanks for your help
James

P. S Hope the meeting has finished :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Grid_View_Test2.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/AAQIIFCsAAQIJFCsAAQIKFCsAAQILFCsAAQIMFCsAAQINFCsAA QIOFCsAAQIPAgFkuIReO5iEgz/DIJ8m1dOir7Teszk=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>


<div>
<table>
<tr>
<td>
<select size="4" name="ListBox1" id="ListBox1">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
<td>
<select size="4" name="ListBox2" id="ListBox2">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
</tr>
<tr>
<td>
<select size="4" name="ListBox4" id="ListBox4">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
<td>
<select size="4" name="ListBox5" id="ListBox5">
<option value="James">James</option>
<option value="Football">Football</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="v">v</option>
<option value="g">g</option>
<option value="d">d</option>
<option value="s">s</option>
<option value="ah">ah</option>

</select>
</td>
</tr>
<tr>
<td>
<select size="4" name="ListBox6" id="ListBox6">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
<td>
<select size="4" name="ListBox7" id="ListBox7">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
</tr>
<tr>
<td>
<select size="4" name="ListBox8" id="ListBox8">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
<td>
<select size="4" name="ListBox9" id="ListBox9">
<option value="James">James</option>
<option value="Football">Football</option>

</select>
</td>
</tr>
<tr>
<td>
<select size="4" name="ListBox10" id="ListBox10">

</select>
</td>
<td>
<select size="4" name="ListBox11" id="ListBox11">

</select>
</td>
</tr>
</table>




<input name="TextBox2" type="text" id="TextBox2" style="z-index:5" />

<style type="text/css">
table th
{
border-width: 1px;
border-color: Black;
border-style: solid;
background-color: white;
position: relative;
top :expression(this.parentNode.parentNode.
parentNode.scrollTop-1);
}

.fixedHeader
{
overflow-y:scroll;
height: 100px;
}
</style>


<script type="text/javascript">
/*
//FreezeGridViewHeader('View4_Grid_View1_GridView1', 'WrapperDiv');

function FreezeGridViewHeader(gridID,wrapperDivCssClass)
{
/// <summary>
/// Used to create a fixed GridView header and allow scrolling
/// </summary>
/// <param name="gridID" type="String">
/// Client-side ID of the GridView control
/// </param>
/// <param name="wrapperDivCssClass" type="String">
/// CSS class to be applied to the GridView's wrapper div element.
/// Class MUST specify the CSS height and width properties.
/// Example: width:800px;height:400px;border:1px solid black;
/// </param>
var grid = document.getElementById(gridID);
if (grid != 'undefined')
{
grid.style.visibility = 'hidden';
var div = null;
if (grid.parentNode != 'undefined')
{
//Find wrapper div output by GridView
div = grid.parentNode;
if (div.tagName == "DIV")
{
div.className = wrapperDivCssClass;
div.style.overflow = "auto";
}
}
//Find DOM TBODY element and remove first TR tag from
//it and add to a THEAD element instead so CSS styles
//can be applied properly in both IE and FireFox
var tags = grid.getElementsByTagName('TBODY');
if (tags != 'undefined')
{
var tbody = tags[0];
var trs = tbody.getElementsByTagName('TR');
var headerHeight = 8;
if (trs != 'undefined')
{
headerHeight += trs[0].offsetHeight;
var headTR = tbody.removeChild(trs[0]);
var head = document.createElement('THEAD');
head.appendChild(headTR);
grid.insertBefore(head, grid.firstChild);
}
//Needed for Firefox
tbody.style.height =
(div.offsetHeight - headerHeight) + 'px';
tbody.style.overflowX = "hidden";
tbody.overflow = 'auto';
tbody.overflowX = 'hidden';
}
grid.style.visibility = 'visible';
}
} */
</script>


<script type="text/javascript">

function setDimensions()
{
var h = document.documentElement.clientHeight * 0.25;
var l = document.documentElement.clientWidth * 0.5;
var w = l - 200;

document.getElementById("UpDiv").style.textAlign = "center";
document.getElementById("UpDiv").style.position = "absolute";
document.getElementById("UpDiv").style.left = w+"px";
document.getElementById("UpDiv").style.top = h+"px";
document.getElementById("UpDiv").style.backgroundC olor = "white";
}

window.onresize = setDimensions;

function makeVisible()
{
setDimensions();
document.getElementById("UpDiv").style.visibility = "visible";
document.getElementById("UpDiv").style.borderWidth = "1px";
document.getElementById("UpDiv").style.borderStyle = "solid";
document.getElementById("UpDiv").style.backgroundC olor = "white";
}

function makeHidden()
{
document.getElementById("UpDiv").style.visibility = "hidden";
}

function makeHiddenSave()
{
document.getElementById("UpDiv").style.visibility = "hidden";
alert("Saved");
}

function buildDimmerDiv()
{
document.write('<div id="dimBack" style="padding:0px; margin: 0px 0px 0px 0px; background-color: black;filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;position:absolute; z-index:101; width:'+ screen.width + 'px; height:' + screen.height +'px"></div>');
}

function getconfirm2(DeleteString)
{
if (confirm("Are you sure you wish to delete this item?")==true)
{
__doPostBack('View4_Grid_View1$GridView1',DeleteSt ring);
//return true;
}
else
return false;
}


</script>

<div id="GridDiv" class="fixedHeader">
<div id="View4_Grid_View1_GridView1_Panel1">

<div>
<table cellspacing="0" rules="all" border="1" id="View4_Grid_View1_GridView1_GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Test_James_ID')">Test_Jam es_ID</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label1')">Column 1</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label2')">Craig</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label3')">ID 1</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label8')">Id 2</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label9')">Label 9</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label10')">Label 10</a></th><th scope="col"><a href="javascript:__doPostBack('View4_Grid_View1_Gr idView1$GridView1','Sort$Label11')">Label 11</a></th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
</tr><tr>
<td>1</td><td>James</td><td>Andrew</td><td>Freeman</td><td>Thames</td><td>Surrey</td><td>KT12</td><td>Soon to move!</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$0')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$0')" style="border-width:0px;" /></td>
</tr><tr>
<td>2</td><td>Winners!</td><td>Bournemouth</td><td>Walton</td><td>Hove</td><td>Albion</td><td>Football</td><td>Clubs</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$1')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$1')" style="border-width:0px;" /></td>
</tr><tr>
<td>3</td><td>a</td><td>b</td><td>the</td><td>the</td><td>c</td><td>d</td><td>e</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$2')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$2')" style="border-width:0px;" /></td>
</tr><tr>
<td>4</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>test</td><td>test</td><td>r</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$3')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$3')" style="border-width:0px;" /></td>
</tr><tr>
<td>5</td><td>a</td><td>b</td><td>the</td><td>the</td><td>c</td><td>d</td><td>e</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$4')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$4')" style="border-width:0px;" /></td>
</tr><tr>
<td>6</td><td>ab</td><td>b</td><td>c</td><td>h</td><td>i</td><td>j</td><td>k</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$5')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$5')" style="border-width:0px;" /></td>
</tr><tr>
<td>7</td><td>a</td><td>s</td><td>s</td><td>s</td><td>s</td><td>s</td><td>s</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$6')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$6')" style="border-width:0px;" /></td>
</tr><tr>
<td>8</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$7')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$7')" style="border-width:0px;" /></td>
</tr><tr>
<td>9</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$8')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$8')" style="border-width:0px;" /></td>
</tr><tr>
<td>10</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$9')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$9')" style="border-width:0px;" /></td>
</tr><tr>
<td>11</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$10')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$10')" style="border-width:0px;" /></td>
</tr><tr>
<td>12</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$11')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$11')" style="border-width:0px;" /></td>
</tr><tr>
<td>13</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$12')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$12')" style="border-width:0px;" /></td>
</tr><tr>
<td>14</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$13')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$13')" style="border-width:0px;" /></td>
</tr><tr>
<td>15</td><td>d</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><input type="image" src="../Images/ViewHor.jpg" alt="View" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Select$14')" style="border-width:0px;" /></td><td><input type="image" src="../Images/Update.jpg" alt="Update" onclick="javascript:__doPostBack('View4_Grid_View1 _GridView1$GridView1','Edit$14')" style="border-width:0px;" /></td>
</tr>
</table>
</div>

</div>
</div>


<div id="UpDiv" style="visibility:hidden; z-index:102; width:400px; border-width:thick; border-style:ridge; border-color: Red;">
<table>
<tr>
<div id="View4_Grid_View1_GridView1_PanelEdit1">

<table id="View4_Grid_View1_GridView1_TableUpdateFields" border="0" style="height:100%;width:100%;">
<tr>
<td align="left"><span>Column 1</span></td><td><input name="View4_Grid_View1_GridView1$ctl01" type="text" value="James" /></td>
</tr><tr>
<td align="left"><span>Craig</span></td><td><input name="View4_Grid_View1_GridView1$ctl03" type="text" value="Andrew" /></td>
</tr><tr>
<td align="left"><span>Label 9</span></td><td><input name="View4_Grid_View1_GridView1$ctl05" type="text" value="Surrey" /></td>
</tr><tr>
<td align="left"><span>Label 10</span></td><td><input name="View4_Grid_View1_GridView1$ctl07" type="text" value="KT12" /></td>
</tr><tr>
<td align="left"><span>Label 11</span></td><td><input name="View4_Grid_View1_GridView1$ctl09" type="text" value="Soon to move!" /></td>
</tr><tr>
<td align="left"><input type="submit" name="View4_Grid_View1_GridView1$ctl10" value="Save" style="width:150px;" /></td><td><input type="submit" name="View4_Grid_View1_GridView1$ctl11" value="Cancel" style="width:150px;" /></td>
</tr>
</table>

</div>
</tr>
</table>
</div>


</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWRgL1nNWxDwKfjKzoAgLS2fP+BwKfjOifBQLS2bcJAp+M0Po IAtLZj+wNAp+M/MHr5GmlsvkA5G8yeqZwENViKkl2fU=" />
</div>

<script type="text/javascript">
//<![CDATA[
makeVisible(); buildDimmerDiv();//]]>
</script>
</form>
</body>
</html>
Aug 29 '07 #9
Hey All,

Managed to solve this issue by setting the position to fixed and the top and left properties to 0px which then made sure all elements were covered by my semi-transparent div.

many thanks for your help :)
James
Aug 29 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Andrey Krivda 232973226 | last post: by
2 posts views Thread by Dennis M. Marks | last post: by
2 posts views Thread by Klaus Nowikow | last post: by
2 posts views Thread by David Scemama | last post: by
27 posts views Thread by StevePBurgess | last post: by
2 posts views Thread by James Stroud | last post: by
3 posts views Thread by Sylvain | last post: by
2 posts views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.