Solved

Make <Div> Opaque

Posted on 2003-11-11
8
1,455 Views
Last Modified: 2010-05-18
Hi,

I'm looking (unsuccessfully so far) for a <div> tag property that make that hides other <div>'s beneath it:

My page is a dynamic scrolling (vertical only) table upon which I have a <div> table containing the headers and a <div> table that holds the tabled data. I am using the FlevOOware (shameless plug) Dreamweaver Extension that makes my header element scroll down the screen, maintaining position while the tabulated data scrolls beneath it, but the headers are transparent and the tabulated data is visible through the top layer.

Is there not a property to make my top div opaque??

Thanks in advance

0
Comment
Question by:Harristonian
  • 5
  • 3
8 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9724472
I'm not familiar with the extension, so I don't know how the div is being treated with CSS.
If it's background has been set to transparent, you should be able to override it with an inline style:

<div style="background-color:#cccccc;"></div>
0
 

Author Comment

by:Harristonian
ID: 9724588
The extension deals with repositioning the div in relation to any scroll events, there are no 'transparency' properties being set.  I have tried your suggestion before posting but to no avail.

There are no CSS styles being employed in the page (as yet) as i am testing on a mockup version.

Problem is, that I currently have the page split across a mainpage (that contains the column headers) and an inline frame that contains the results. I want the header to be contained within the same page as the client has insisted that the headers be sticky when scrolling down through multiple records, this is fine if you have opacity, but i cant achieve,. hence the headers in different page (i know this sucks but hey it a solution.....

The problem with the table dimensions on the two pages is that the data table containing form elements (text boxes) that are editable, hence screen res comes into play when sizing the elements. If there was a way of specifying <td> width without being over ridden by the text type size then I'd be laughing. I just can't get the table sizes to match up on various screen res's :(.

Incidentally, this form is for IE6 users only. Dont worry about NS compat.......
0
 

Author Comment

by:Harristonian
ID: 9724625
Maybe it would help to post the code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function flevDivPositionValue(sDiv, sProperty) { // v2.1, Marja Ribbers-de Vroed, FlevOOware
      this.opera = (window.opera); // Opera 5+
      this.ns4 = (document.layers); // Netscape 4.x
      this.ns6 = (document.getElementById && !document.all && !this.opera); // Netscape 6+
      this.ie = (document.all);  // Internet Explorer 4+
    var sValue = ""; docObj = eval("MM_findObj('" + sDiv + "')"); if (docObj == null) {return 0;}
      if ((sProperty == "left") || (sProperty == "top")) {
            if (!this.ns4) {docObj = docObj.style;}
            sValue = eval("docObj." + sProperty);
            if ((this.ie) && (sValue == "")) { // IE (on PC) bug with nested layers
                  if (sProperty == "top") { sValue = eval(sDiv + ".offsetTop"); }
                  else { sValue = eval(sDiv + ".offsetLeft"); }
            };
      }
      else {
            if (this.opera) {
                  docObj = docObj.style;
                  if (sProperty == "height") { sValue = docObj.pixelHeight; }
                  else if (sProperty == "width") { sValue = docObj.pixelWidth; }
            }
            else if (this.ns4) {sValue = eval("docObj.clip." + sProperty);}
            else if (this.ns6) {sValue = document.defaultView.getComputedStyle(docObj, "").getPropertyValue(sProperty); }
          else if (this.ie) {
                  if (sProperty == "width") { sValue = eval(sDiv + ".offsetWidth"); }
                  else if (sProperty == "height") { sValue = eval(sDiv + ".offsetHeight"); }
            }
         }
      sValue = (sValue == "") ? 0 : sValue;
      if (isNaN(sValue)) { if (sValue.indexOf('px') > 0) { sValue = sValue.substring(0,sValue.indexOf('px')); } }
      return parseInt(sValue);
}

function flevPersistentLayer() { // v3.3, Marja Ribbers-de Vroed, FlevOOware
      var sD = arguments[0], oD = eval("MM_findObj('" + sD + "')"), iWW, iWH, iSX, iSY, iT = 10, sS = "";
      if (!document.layers) {oD = oD.style;}
      if (oD.tmpTimeout != null) {clearTimeout(oD.tmpTimeout);}
      var sXL = arguments[1], sXC = arguments[2], sXR = arguments[3], sYT = arguments[4], sYC = arguments[5], sYB = arguments[6];
      var iS = (arguments.length > 7) ? parseInt(arguments[7]) : 0, iPx = (arguments.length > 8) ? parseInt(arguments[8]) : 0;
      if (window.innerWidth) { // NS4, NS6 and Opera
            var oW = window; iWW = oW.innerWidth; iWH = oW.innerHeight; iSX = oW.pageXOffset; iSY = oW.pageYOffset; }
      else if (document.documentElement && document.documentElement.clientWidth) { // IE6 in standards compliant mode
            var oDE = document.documentElement; iWW = oDE.clientWidth; iWH = oDE.clientHeight; iSX = oDE.scrollLeft; iSY = oDE.scrollTop; }
      else if (document.body) { // IE4+
            var oDB = document.body; iWW = oDB.clientWidth; iWH = oDB.clientHeight; iSX = oDB.scrollLeft; iSY = oDB.scrollTop; }
      else {return;}
      var iCX = iNX = flevDivPositionValue(sD, 'left'), iCY = iNY = flevDivPositionValue(sD, 'top');
      if (sXL != "") {iNX = iSX + parseInt(sXL);}
      else if (sXC != "") {iNX = Math.round(iSX + (iWW/2) - (flevDivPositionValue(sD, 'width')/2));}
      else if (sXR != "") {iNX = iSX + iWW - (flevDivPositionValue(sD, 'width') + parseInt(sXR));}
      if (sYT != "") {iNY = iSY + parseInt(sYT);}
      else if (sYC != "") {iNY = Math.round(iSY + (iWH/2) - (flevDivPositionValue(sD, 'height')/2));}
      else if (sYB != "") {iNY = iSY + (iWH - flevDivPositionValue(sD, 'height') - parseInt(sYB));}
      if ((iCX != iNX) || (iCY != iNY)) {
            if (iS > 0) {
                  if (iPx > 0) { iT = iS;
                        var iPxX = iPx, iPxY = iPx, iMX = Math.abs(iCX - iNX), iMY = Math.abs(iCY - iNY);
                        // take care of diagonal movement
                        if (iMX < iMY) {iPxY = (iMX != 0) ? ((iMY/iMX)*iPx) : iPx;}
                        else {iPxX = (iMY != 0) ? ((iMX/iMY)*iPx) : iPx;}
                        if (iPxX >= iMX) {iPxX = Math.min(Math.ceil(iPxX), iPx);}
                        if (iPxY >= iMY) {iPxY = Math.min(Math.ceil(iPxY), iPx);}
                        // temporary X/Y coordinates
                        if ((iCX < iNX) && (iCX + iPxX < iNX)) {iNX = iCX + iPxX;}
                        if ((iCX > iNX) && (iCX - iPxX > iNX)) {iNX = iCX - iPxX;}
                        if ((iCY < iNY) && (iCY + iPxY < iNY)) {iNY = iCY + iPxY;}
                        if ((iCY > iNY) && (iCY - iPxY > iNY)) {iNY = iCY - iPxY;} }
                  else {
                        var iMX = ((iNX - iCX) / iS), iMY = ((iNY - iCY) / iS);
                        iMX = (iMX > 0) ? Math.ceil(iMX) : Math.floor(iMX); iNX = iCX + iMX;
                        iMY = (iMY > 0) ? Math.ceil(iMY) : Math.floor(iMY); iNY = iCY + iMY; } }
            if ((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1) && (!window.opera)) {sS="px";}
            if (iMX != 0) {eval("oD.left = '" + iNX + sS + "'");}
            if (iMY != 0) {eval("oD.top = '" + iNY + sS + "'");} }
      var sF = "flevPersistentLayer('" + sD + "','" + sXL + "','" + sXC + "','" + sXR + "','" + sYT + "','" + sYC + "','" + sYB + "'," + iS + "," + iPx + ")";
      oD.tmpTimeout = setTimeout(sF,10);
}

function flevInitPersistentLayer() { // v3.3, Marja Ribbers-de Vroed, FlevOOware
      if (arguments.length < 8) {return;}
      var sD = arguments[0]; if (sD == "") {return;}
      var      oD = eval("MM_findObj('" + sD + "')"); if (!oD) {return;}
      var iCSS = parseInt(arguments[1]);
      var sXL = arguments[2], sXC = arguments[3], sXR = arguments[4], sYT = arguments[5], sYC = arguments[6], sYB = arguments[7];
      var iS = (arguments.length > 8) ? parseInt(arguments[8]) : 0, iPx = (arguments.length > 9) ? parseInt(arguments[9]) : 0;
      if (iCSS != 0) { if (!document.layers) {oD = oD.style;} sXL = parseInt(oD.left), sYT = parseInt(oD.top);}
      var sF = "flevPersistentLayer('" + sD + "','" + sXL + "','" + sXC + "','" + sXR + "','" + sYT + "','" + sYC + "','" + sYB + "'," + iS + "," + iPx + ")";
      eval(sF);
}
//-->
</script>
</head>

<body onLoad="flevInitPersistentLayer('Layer1',0,'0','','','0','','')">
<div id="Layer1" style="position:absolute; width:95%; height:115px; z-index:1; background-color:#FFFFFF">
<table width=95% align="center">
<tr>
<td>Header 1</td><td bgcolor="#FFFFFF">Header 2</td><td bgcolor="#FFFFFF">Header 3</td><td bgcolor="#FFFFFF">Header 4</td>
</tr>
</table>
</div>

<div id="Layer2" style="position:absolute; width:95%; height:100px; z-index:2;">
<%
Response.Write "<table width=95% align='center'>"
For i=0 to 100
      Response.Write "<tr>"
      For j=0 to 3      
            Response.Write "<td>Value " & j & "</td>"
      Next
      Response.Write "</tr>"
Next
%>
</body>
</html>


Dunno if this helps, but the idea is to hide the layer2 div beneath the scrolling layer1....
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9724645
Do you have a link that you can post to this page?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Expert Comment

by:seanpowell
ID: 9724659
Never mind - let me have a look..
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 100 total points
ID: 9724691
Change the z-index properties:

z-index:1; for the header

z-index:0; for layer2 div
0
 

Author Comment

by:Harristonian
ID: 9724885
Giggle

Obviously - Wood and trees ya know.

Thanks very much. Outside views are invaluable
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9724902
I hear you - and thanks :-)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now