Jump to content

Issue with transparent covering div.


Kingy
 Share

Recommended Posts

Hey everyone, I wanted to make a simple covering div with a another div inside that's basically a legend for access keys. Reason I want to do this is because there's a bit of interference with my scripts, which is to do with focus issues when interacting with the page.So I thought easiest way is to disable operas access key shortcut and create my own so I can direct this cover to where I want regardless of where elements are focused.My problem is when I add this opacity:.25; in everything is affected and I can't seem to find a way around this, which includes the other div which I want blocked on top.Thought it would be a piece of cake, but is there a way around this transparency issue? Oh yeah also I got a basic script so if you press shift+escape it toggles the whole thing.The CSS:

<style type="text/css"><!--.normal {position:relative;text-align:center;-moz-opacity:1;}body, .transparent { filter: alpha(opacity=50); /* ie */ -moz-opacity: .50; /* mozilla */ background:#ccc;color: #000;width:100%;  height:100%;text-align:center;position:absolute; top:0; left:0; right:0; bottom:0;} #block {	position:absolute;	top:50%;	right:50%;	border:1px solid #000;}.bgc {	background-color:#EFFBE1;	color: #003300;}--></style>

The java script:

document.onkeydown = keydown; function keydown(evt){ 	if (!evt) 	evt = event;        var divstyle = new String();        divstyle = document.getElementById("coverdiv").style.visibility;        if((divstyle.toLowerCase()=="visible" || divstyle == "")&&(evt.shiftKey && evt.keyCode == 27))        {            document.getElementById("coverdiv").style.visibility = "hidden";        }        else if (evt.shiftKey && evt.keyCode == 27)        {            document.getElementById("coverdiv").style.visibility = "visible";			}} 

BODY stuff:

<body>HELLO!<div id="coverdiv"><div class="transparent" >Hopefully a transparent background with a blocked div on top.</div><div class="normal" id="block">Press a number to jump to page  <div class="bgc">1. Home<br />2. Accounts<br />3. Devices<br />4. Services<br />5. Information<br />6. Help</div></div></div></body>

[EDIT] Nevermind I managed to fix it, in the end instead of adding the opacity thing up there I just went and added it straight onto the div like this. <div class="transparent" style="opacity:.25;">I tried that earlier but the transparency problem I described came up so I thought it can't work that way. So I'm not sure why it's working now...this is thread is a good waste of space now. =_=

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...