www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Trying to make a layer with transparent border but opaque inner layer

Hybrid View

  1. #1
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582

    resolved [RESOLVED] Trying to make a layer with transparent border but opaque inner layer

    Hello, all.

    I'm trying to create a "facebook-like" layer that is invisible when the page first loads but opens "above" the main page content when a link is clicked; something that has a dark 5px border with 75% opacity, but has an opaque white content area.

    I think my issue is due to the content area being nested inside the div that I'm using to create the transparent border (it's slightly larger than the content area, and "below" it) because the content area has the same opacity as the border area.

    Maybe I'm approaching this from the wrong direction. Any advice? Here's my code, thus far.

    CSS:
    Code:
    #inner_vi {
    	height:200px; width:600px; background-color:#FFF; z-index:10001;
    	padding:0px; margin:0px; border:0px;
    	opacity:1.0; filter: alpha(opacity=100); zoom:1;
    	}
    #visible_invisible.hidden {
    	height:0px; width:0px; display:none; visibility:hidden; background-color:#999;
    	padding:5px; margin:0px; border:0px; z-index:-10; position:absolute; top:0px; left:0px;
    	}
    #visible_invisible.shown {
    	height:200px; width:600px; display:block; visibility:visible; background-color:#999;
    	padding:5px; margin:0px; border:0px; z-index:10000;  position:absolute;
    	opacity: 0.75; filter: alpha(opacity=75); zoom:1;
    	}
    JavaScript:
    Code:
    				function showHide(divName) {
    					var body = document.getElementsByTagName("body")[0];
    					var winWidth, winHeight;
    					winWidth = getWidth(); winHeight = getHeight();
    
    					thisDiv = document.getElementById(divName);
    					if(thisDiv.className == 'hidden') {
    							thisDiv.className = "shown";
    
    							w = thisDiv.offsetWidth; h = thisDiv.offsetHeight;
    
    							l = (winWidth-w)/2; t = (winHeight-h)/2;
    
    							thisDiv.style.left = l + "px"; thisDiv.style.top = t + "px";
    						}
    					else {
    							thisDiv.className = "hidden";
    						}
    					}
    				function getWidth() {
    					if (typeof window.innerWidth != 'undefined') {
    					      return window.innerWidth;
    					 	}
    					else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    					       return document.documentElement.clientWidth;
    					 	}
    					else {
    					       return document.getElementsByTagName('body')[0].clientWidth;
    					 	}
    					}
    				function getHeight() {
    					if (typeof window.innerWidth != 'undefined')
    					 {
    					      return window.innerHeight;
    					 }
    					else if (typeof document.documentElement != 'undefined'
    					     && typeof document.documentElement.clientWidth !=
    					     'undefined' && document.documentElement.clientWidth != 0) {
    					       return document.documentElement.clientHeight;
    					 }
    					else {
    					      return document.getElementsByTagName('body')[0].clientHeight;
    					 }
    					}
    HTML:
    Code:
    			<div id="visible_invisible" class="hidden">
    				<div id="inner_vi">
    					<a href="javascript:void(0);" onClick="showHide('visible_invisible');">Hide Layered Div</a>
    				</div>
    			</div>
    			<a href="javascript:void(0);" onClick="showHide('visible_invisible');">Open Layered Div</a>
    ^_^

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    nevermind.. got it.. open two layers (not nested).. start them both out hidden.. open a layer with opacity to what you want and a zindex of 1000.. open a second (slightly smaller) layer with no opacity and a zindex of 1010 after the first one is open.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles