1

I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).

Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.

.cssX9482Overlay
{
    position: fixed;
    width: 100%;
    Height: 100%;
    vertical-align: middle;
    background: #000000;
    opacity: 0.97;
    filter: alpha(opacity=97);
    text-align: center;
    top: 0;
    left: 0;
}

The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div

Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.

user900375
  • 33
  • 4

2 Answers2

0
<style type="text/css">
iframe, div {
    position:absolute;
    top:20px;
    left:20px;
    width:200px;
    height:25px
}

iframe { z-index:1 }

div {
    z-index:2;
    background:#000;
    border:solid 1px red;
    color:#fff;
}
</style>

<applet code="myApp.class" width="700" height="700"></applet>

<iframe></iframe>

<div>EXAMPLE TEXT</div>

TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6 Also you had height capitalized

rickyduck
  • 4,030
  • 14
  • 58
  • 93
  • thanks for pointing out the H, was working fine though. The problem with z-index is that I still have no guarantee that somebody hasn't one upped me. The extension becomes useless unless it is on top. – user900375 Aug 18 '11 at 10:59
  • That's true. The max value of z-index is 32bit, so see this: http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index - 2147483647 is the max value. Set it to that and place it at the bottom of the page, you should be fine. – rickyduck Aug 18 '11 at 11:02
  • 32 bit seems excessive for what it is but whatever. This will work for now but wouldn't mind a better solution. I'm not used to developing for the web so what happens when 2 things have the same z index? – user900375 Aug 18 '11 at 11:06
  • oh and this still doesn't get things above a java applet. Fortunately you don't see many of them but is still an issue – user900375 Aug 18 '11 at 11:12
  • That did the trick, just went through a bunch of site I had trouble with and it was above everything. I also tested the max limit of z-index, it didn't loop back after going above the maximum value, I'm on a 64 bit system so it's probably using a 64bit z-index. Not going to test that as no web developer should ever assume a user has a 64 bit system.Thanks a lot for your help. – user900375 Aug 18 '11 at 11:58
0

You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:

#gbz, #gbg {
  ...
  z-index: 1000;
}

Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.

alexmuller
  • 2,207
  • 3
  • 23
  • 36
  • Yeah flash and java have been the big issues. Hence why I was trying to find a way without using z-index (other than the fact somebody can always one up it). I need it on top guaranteed, how that is achieved I don't really care. Doesn't even need to be something native to a webpage, could be in the chrome API for all I care. – user900375 Aug 18 '11 at 11:03