Kingy Posted August 22, 2008 Share Posted August 22, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.