brightness control ----->

[acerdude]

Hey, is there any way i could have a large blask transparent box that would completely mask my site, and then have a little slider that could adjust its transparency? i would like to be able to do this so it could serve as a brightness adjuster for my site. or is there a better way? thnx :)

[Quiet Storm]

Ooooo! That would be SO COOL! I'll be watching this thread for an update!

I know it's possible, but I have no idea how to do it in JavaScript... :(

[Borgtex]

That fades to white:

javascript:void(top.document.body.style.filter='Alpha(Opacity:80)')

To fade to black you only need a black layer of 100% x 100% and apply the same effect

[brothercake]

Try this (http://www.brothercake.com/Ref/brightness/brightness.html)


However it has once major disadvantage - the whole window's covered in a layer, so you can't do anything else! Not sure if there's an answer to that offhand ...

[kwhubby]

that does not work with IE or mozilla!

[kwhubby]

oh never mind... You just edited it so it works now!

[acerdude]

Originally posted by brothercake
Try this (http://www.brothercake.com/Ref/brightness/brightness.html)


However it has once major disadvantage - the whole window's covered in a layer, so you can't do anything else! Not sure if there's an answer to that offhand ...

yup, thats what ive just found out. cant click any buttons :(. anyone know a way around this? thnx for the help :)

[krycek]

hehehe I think you guys are missing something ;)

instead of covering your whole site with a layer, approach the problem from the opposite direction: make every single element transparent.

simply do this:

* {
filter: Alpha(Opacity=95);
-moz-opacity:0.6;
}

now, note that in Mozilla, giving a percentage value will make each element a value based on that of its parent, which is not what we want. Setting it to a decimal value such as 0.6 will make them all the same (as far as I know). I am not sure what to do in IE, however I am pretty sure that this is a better track to go down than covering the whole site with a layer, which would be rather restrictive!

Good idea though :)

::] krycek [::

[acerdude]

so how would i use that with a slider? thnx :)

[krycek]

hmm that's a good point actually... I doubt you can reference ALL elements in the same way as one... jkd? help! lol! :D

::] krycek [::

[jkd]

You can modify the rule in the stylesheet. DOM2 CSS for Moz, and some proprietary stuff for IE.

[Borgtex]

As I indicated on my post, you only have to adjust the Opacity of the entire BODY (in IE)

[krycek]

hmmm borgtex, good point...

I think I misread your post first time round: I saw that bit about the black layer 100% x 100% and I didn;t quite read the bit before it... apologies!

::] krycek [::

[brothercake]

So .. it seems fade to white is easy by numerous methods. But fade to black without a layer .... I suppose you could go with reverse chromatics, but then you'd have white text on a black background at hightest brightness, and all black at lowest. I also thought about fade to white with a corresponding darkness of background color, but then you'd lose text visibility at anything darker than mid-gray.

Hmmm ...

[acerdude]

dont supose there is any way to put the mouse under the black layer? hehe

[brothercake]

That would be cute ... if you could apply opacity to a window object then you could do it with createPopup ...

But you can't.

But there may be some equally ridiculous answer :D

[Borgtex]

So the problem is that a black layer over the page blocks all the links?

easy:
black background, with a 100% x 100% layer with the desired background color over it and containing all the web page :)

[acerdude]

huh? lol :)

[krycek]

Originally posted by Borgtex
So the problem is that a black layer over the page blocks all the links?

easy:
black background, with a 100% x 100% layer with the desired background color over it and containing all the web page :)

lol :D now who's not reading posts lol :D

::] krycek [::

[joh6nn]

actually, i'm pretty sure that Borgtex's answer is right.

here's a place where you can get a javascript slider control:
http://www.blueshoes.org/en/javascript/slider/?bcRun=1&bcCd=16&bcW=1024&bcH=768&bcWa=1015&bcHa=582&bcTz=5&bcSl=&bcUl=&bcIsFmd=0&bcDom=dom&bcFl=1&bcJe=0&bcCc=&bcCn=Mozilla&bcCp=&bcCt=

also, no, you couldn't put the mouse under the layer. however, in IE, at least, you could make the current mouse cursor be defined by the current opacity. set up maybe 10 or so different cursors, and change them every 10% ?

[acerdude]

so how would i use this? thnx :)

edit: btw, i didnt mind if the cursor changed, i just thought maybe the buttons would work then. heh thnx

[joh6nn]

dunno, i've never used it. i just googled for "javascript slider' and came up with that. you'll have to follow whatever instructions they have at the site.

[krycek]

um joh6nn I think you missed the point here slightly.

the idea was to make the brightness of the site changeable with a slider, which would not be possible borgtex's way because if you put a layer over the whole page, you cannot use the page! i.e.g you cannot click on anything under the layer... hence the question about moving the mouse under the layer. I don't think the mouse pointer was ever required to change.

similarly, the slider was never an issue...

it was just how to get the whole page to lighten/darken and still be useable.

::] krycek [::

[joh6nn]

you misunderstood Borgtex, krycek.

he's saying, instead of putting the content of the page inside the <body> tags, put it inside a <div>, that has a greater z-index than the body. then, with the slider, you adjust the transparency of the <div>. the <body>'s background is black, so as the <div> becomes more transparent, it becomes darker, because the black shows through. as the div becomes less transparent, it would become "brighter", as less and less black shows through. because the <div> floats atop the background, then you can still interact with its contents.

hope that was a clearer explanation.

[acerdude]

that sounds good, could you do an example? thnx :)

edit: o yea, is there a way once they have the opacity there could be a "set" button which would create a cookie with their preference?

[Borgtex]

Originally posted by joh6nn
you misunderstood Borgtex, krycek


Seems that despite of my (I admit it) not very good explanation, somebody understood me. Thanks Joh6nn :)

[krycek]

...I bow to your wisdom and insight, and apologise profusely for not understanding what you meant first time round :o

it sounds like an ideal solution :)

::] krycek [::

[Borgtex]

Originally posted by krycek
...I bow to your wisdom and insight, and apologise profusely for not understanding what you meant first time round

lol

Well, if you ask it in that way, I will be magnanimous this time


;)

[brothercake]

Originally posted by Borgtex
black background, with a 100% x 100% layer with the desired background color over it and containing all the web page :)

Brilliant :) That's the answer (http://www.brothercake.com/Ref/brightness/brightness.html)

[krycek]

this gives me an idea...

what about putting three layers like that together, if possible... red, green and blue... you could chnage the colour scheme of the page that way lol :) it may appeal to someone somewhere

::] krycek [::

[brothercake]

Originally posted by krycek
this gives me an idea...

what about putting three layers like that together, if possible... red, green and blue... you could chnage the colour scheme of the page that way lol :) it may appeal to someone somewhere

::] krycek [::

That is a good idea ... but no need for three layers - you can set the background color as an RGB value.

Like this (http://www.brothercake.com/Ref/brightness_color/brightness.html) in fact

[krycek]

that's pretty near to what I was thinking of :) good call with the simple RGB sliders :thumbsup:

::] krycek [::

[acerdude]

can it be where the BG stays black?

[brothercake]

The first one I made (http://www.brothercake.com/Ref/brightness/brightness.html) did that

[acerdude]

on that one the BG fades from white to black (at least for me) so can it just stay black but the other parts fade

[joh6nn]

yes. just don't set a background color for the div that is being faded.

[Mr J]

However it has once major disadvantage - the whole window's covered in a layer, so you can't do anything else! Not sure if there's an answer to that offhand ...



To get to any links, buttons etc give them a higher z-index value?

[acerdude]

Originally posted by Mr J
To get to any links, buttons etc give them a higher z-index value?

ok, ill see what i can figure out :)

[acerdude]

ok thnx :thumbsup: i understand the code now, im gonna go try it on the layout

[Quiet Storm]

Is it possible to have variable brightness control on 3 different DIVs? Instead of the entire window fating, have only the three DIVs fade and everything else left the same... (thinking of how I can use this on my site...)