Member Avatar for mailtogsuresh

Hi..Im Beginner....

I want change the opacity of background DIV in full screen(when i scrolled the background also increased).But now Visible screen size only opacity changed.I want change the opacity in full screen / scrolled.

  • 4 Contributors
  • 3 Replies
  • 331 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by dondondondon

Recommended Answers

All 3 Replies

Member Avatar for MJ Pieterse

i'm not completely sure what you are saying, but you can add the following script to your css

.transparentdiv {
       filter:alpha(opacity=95);      
       -moz-opacity:0.95;             
       -khtml-opacity: 0.95;          
      opacity: 0.95;
}
Member Avatar for MidiMagic

Scripts can't draw on parts of the page that are not on the screen at the moment. You need a way to run the script again after the screen size is changed.

Partial transparency is a nonstandard extension, and is not supported in the same way by all browsers.

Member Avatar for dondondondon

Hi..Im Beginner....

I want change the opacity of background DIV in full screen(when i scrolled the background also increased).But now Visible screen size only opacity changed.I want change the opacity in full screen / scrolled.

The question is a bit vague, but I think you need a full screen background DIV with opacity in effect so scrolling will not show area with opacity missing.

If you're trying for dynamic changing, you'll find the CSS style properties darn hard to find for a couple of the opacity styles, but easy for the other 2, so, since the cross-browser code needed seems to require all 4, this would be a problem. Note that IE 6, 7 and 8 do NOT use the same opacity styles so you have to cover your bases with these extra codes.

Having the width and height at 100% will cover your background, except you'd use a Top value of 0. My 80px value is to leave room for the demo buttons.

See this method work at http://www.css-resources.com/Using-an-Overlay-Mask-with-Your-Pop-up-Method.html

<HTML>
<HEAD>
<TITLE>Using an Overlay Mask with Your Pop-up Method</TITLE>
<style type="text/css">

#overlay {
     top: 80px;
     left: 0px;
     width: 100%;
     height: 100%;
     background: #000;
     opacity: 0.79;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=79)";
     filter: alpha(opacity=79);
     -moz-opacity: 0.79;
     z-index: 2;
     visibility: hidden;
     position: absolute;}

</style>
<script type="text/javascript">

function show(l){e=document.getElementById('p');e.style.visibility=l;e=document.getElementById('overlay');e.style.visibility=l;}

</script>
</head>

<body>

<div id='overlay'></div>

<table width=200 border=0><tr>
<td align=left>
<button type="button" value="Pop!" onMouseOver="javascript:show('visible');return true">Pop!</button>
</td><td align=right>
<button type="button" value="Unpop!" onMouseOver="javascript:show('hidden');return true">Unpop!</button>
</td></tr></table>

<br><br><a HREF="http://google.com" target='_blank'><b>Link</b></a>

<div id="p" style="position:absolute;text-align:center;background-color:white;left:200px; top:100px; width:400px; height:458px;z-index:99;visibility:hidden"><br>(Note: page content is barely visible under overlay mask,<br>and the link below the buttons won't work when masked.<br> But this <a HREF="http://google.com" target='_blank'><b>Link</b></a> will work since the pop-up is ON the overlay.)</div>

</body>

</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.