FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Page Opacity

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


DanielXP
Im making a script to dim the whole of the screens page.

I have created this code.

Code:
<script type="text/javascript">
function block(){
document.getElementById('BGDIV').style.width = '100%';
document.getElementById('BGDIV').style.height = '100%';
}
function unblock(){
document.getElementById('BGDIV').style.width = '0';
document.getElementById('BGDIV').style.height = '0';
}
</script>
<div id="BGDIV" style="position:absolute; left:0; top:0; width:0; height:0; alpha(opacity=25);-moz-opacity:.6;opacity:.6; background-color:#000000;"></div>
<a href="http://rmb-scripting.com">RMB-Scripting</a>


When you type in javascript:block() into the adress bar in FireFox it works just how I want it!

So I then tryed it in internet explorer. But once I done it I did not get the same results, The whole screen turned black and not the 60% like I want it to do.
jabapyth
to get complete use compatability, use
Code:
filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;
DanielXP
jabapyth wrote:
to get complete use compatability, use
Code:
filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;


Thanks, Your the man/gal!
quotebook
A nice way to do it super-compatibly without all the various browser-specific stuff (which I hate) is to have a div that's tiled in a graphic thats checkered transparent and black (or grey, or whatever). So do like this:
div.transparent {
background: url('images/checker-trans.gif') repeat;
}
It repeats by default, but it's always good to have it specified for safety and clarity.

Here's a 2x2 pixel image for tiling that I used recently. As it's so small, the checkered pattern is undetectable, and it looks really nice, AND it's cross-browser compatible.
sonam
quotebook wrote:
So do like this:
div.transparent {
background: url('images/checker-trans.gif') repeat;
}


Hm, can you little bit explain more? How you can get different 50% or 20% of transparency in each div? Did you need in that case different pixels for each transparency?

Sonam
DanielXP
I have a little problem with mine.

The 100% on height only goes on the screen and not 100% of the page so at the bottom this is what it shows.



Is there any way to fix this?
snowboardalliance
DanielXP wrote:
I have a little problem with mine.

The 100% on height only goes on the screen and not 100% of the page so at the bottom this is what it shows.



Is there any way to fix this?


I would need to see all your html, but it could probably be solved by setting
Code:
html,body
{
   height: 100%;
}


it's tricky to get this to work in all browsers, but that might be your solution.

Last edited by snowboardalliance on Mon Jun 04, 2007 9:28 pm; edited 1 time in total
DanielXP
snowboardalliance wrote:
DanielXP wrote:
I have a little problem with mine.

The 100% on height only goes on the screen and not 100% of the page so at the bottom this is what it shows.



Is there any way to fix this?


I would need to see all your html, but it could probably be solved by setting
Code:
html,body
{
   width: 100%;
}


it's tricky to get this to work in all browsers, but that might be your solution.


My code is in the first post.

Also Its the height what is the problem so I don't get your fix. (Might just be me?)
snowboardalliance
DanielXP wrote:


My code is in the first post.

Also Its the height what is the problem so I don't get your fix. (Might just be me?)


whoops, should have been height

I see your javascript, just not your entire page. Anyway, just try this
Code:
html,body
{
   height: 100%;
}


it could work
Fuzzy-Duck
sonam wrote:
quotebook wrote:
So do like this:
div.transparent {
background: url('images/checker-trans.gif') repeat;
}


Hm, can you little bit explain more? How you can get different 50% or 20% of transparency in each div? Did you need in that case different pixels for each transparency?

Sonam


Hi Sonam,

If you use a semi-transparent png image instead of a gif then you'll be able to set different levels of transparency, rather than using a chequerboard effect. There are many tutorials out there on creating png images in Photoshop and the like, try looking here for a start: http://www.libpng.org/pub/png/

You could even make two or three images, say, 20x20 pixels with transparencies of 90%, 80%, 65% etc, then use javascript to loop through the images in turn with a delay of 200ms or so to create the illusion of a fade!

This would be cross-browser compatible, apart from IE5 for the mac and IE6 win. You could either create a simpler verion for IE6, or use the IE PNG Alpha Fix by Angus Turnbull, found here http://www.twinhelix.com, to get the png graphics to display in IE6. You can use conditional comment to hide the fix from newer browsers of course.

Hope this helps,

Cheers,
fuzzy
sonam
Thanks fuzzy,
I will rebuild my site in september or october and now I am looking for the best design and SEO optimised solutions. Only what I need is fast download because my PHP scripts on pages need time for their stuff. The CSS and DIVs are now in first plan but I don't want to exclude other solutions if they can give me better results.

Sonam
DanielXP
snowboardalliance wrote:
DanielXP wrote:


My code is in the first post.

Also Its the height what is the problem so I don't get your fix. (Might just be me?)


whoops, should have been height

I see your javascript, just not your entire page. Anyway, just try this
Code:
html,body
{
   height: 100%;
}


it could work


Thanks for the reply but the height is already 100%

Code:
document.getElementById('BGDIV').style.height = '100%';


In the JS, The 100% is the screen res 100% and not the page height.
Fuzzy-Duck
sonam wrote:
Thanks fuzzy,
The CSS and DIVs are now in first plan but I don't want to exclude other solutions if they can give me better results.
Sonam


It's ok sonam!

Just to clarify though, I wasn't suggesting an entirely different solution to that offered by quotebook. I just meant you could use a semi-transparent png graphic instead of the 2x2 chequerboard gif, thus giving you control of the transparency at 20%, 50% etc like you said you wanted.

The HTML & CSS would be exactly the same, except that it would be checker-trans.png of course! Oh and you'd still need the IE6 png fix at www.twinhelix.com

Cheers,
fuzzy
sonam
Thanks, my English is not good. Now I understand what do you mean and what do you want to tell me. I must learn more CSS and divs because all my pages are in the tables. But this lesson I will start after summer. Now (in friday) I am going on seaside on holiday and work. Wink

Sonam
DanielXP
Ok... Now how bout my problem? Razz
DanielXP
The 100% height is the height of the window and not the full page.

So how could I make this work to fill the complete page?

(also the pages are ajax so they change heights all the time)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.