Making Site Opaque -- This Strategy Feasible?
Prisoner at War
I want to have a link, which when clicked, makes the whole page
"opaque" -- it would look as if the click brought up a veil over the
screen (say, 75% opacity).
I'm thinking it would be possible to somehow use CSS and/or JavaScript
to run different 1KB .png files of varying opacities, stretched to
cover the whole screen, in quick succession in order to produce a
"lightening" or "fade-off to white" (fade-"off" and and not *totally*
fade-out) effect.
Is that technically feasible? Might there be a better way of
achieving the same effect, without calling up different .png files
(even though they'd be really tiny)?
I get the sense that it should be possible...but I'm really not sure
what's "available" vis-a-vis the DOM, much less which "elements" of it
to draw together in what ways!
Again, the strategy is that an onClick would call forth a function
that runs through a series of .png files, as if in an animation, and
these files would be stretched to cover the whole screen, and these
files are such that they make it look like the screen's being veiled.
Possible?? (How???)
Then I would like to write new text on top, somehow...so, it would be
like there are three layers: first the original webpage, then the
"veil" of .png, and finally new text over it all.
Makes sense?
TIA for any advice!!!
Jonathan N. Little
> I want to have a link, which when clicked, makes the whole page
> "opaque" -- it would look as if the click brought up a veil over the
> screen (say, 75% opacity).
>
> I'm thinking it would be possible to somehow use CSS and/or JavaScript
> to run different 1KB .png files of varying opacities, stretched to
> cover the whole screen, in quick succession in order to produce a
> "lightening" or "fade-off to white" (fade-"off" and and not *totally*
> fade-out) effect.
>
> Is that technically feasible? Might there be a better way of
> achieving the same effect, without calling up different .png files
> (even though they'd be really tiny)?
This kind of nonsense is for Flash...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Prisoner at War
Yeah, but that requires installing the Flash plug-in.
If it's otherwise possible -- which it seems to be -- CSS/JavaScript
is more powerful than I'd thought!
Anyway, it's a technical question, not an "artistic" one....
Jonathan N. Little
> Yeah, but that requires installing the Flash plug-in.
>
> If it's otherwise possible -- which it seems to be -- CSS/JavaScript
> is more powerful than I'd thought!
>
>
> Anyway, it's a technical question, not an "artistic" one....
>
DHTML was the current "Web2.0" it was sort of popular. It would require
JavaScript and be very messy to get it to work on more that one browser.
.. More work that I would be willing to invest. Again, this "effect" is
more in Flash's domain.
VK
wrote:
> Yeah, but that requires installing the Flash plug-in.
>
> If it's otherwise possible -- which it seems to be -- CSS/JavaScript
> is more powerful than I'd thought!
>
> Anyway, it's a technical question, not an "artistic" one....
Technically it is perfectly cross-browser possible: but to write a
stay alone working sample would require an hour of coding and cross-
browser testing. I just don't have this spare time in my hand - though
other may do or someone may have a working snippet ready. You may just
take subModal script and re-adjust it for your needs if you can:
http://www.subimage.com/dhtml/subModal/
Ben C
>
> I want to have a link, which when clicked, makes the whole page
> "opaque" -- it would look as if the click brought up a veil over the
> screen (say, 75% opacity).
>
> I'm thinking it would be possible to somehow use CSS and/or JavaScript
> to run different 1KB .png files of varying opacities, stretched to
> cover the whole screen, in quick succession in order to produce a
> "lightening" or "fade-off to white" (fade-"off" and and not *totally*
> fade-out) effect.
>
> Is that technically feasible?
Yes.
> Might there be a better way of
> achieving the same effect, without calling up different .png files
> (even though they'd be really tiny)?
You can also use the CSS 3 opacity property on a div with a background
colour. Although opacity is CSS 3 it's pretty widely supported.
> I get the sense that it should be possible...but I'm really not sure
> what's "available" vis-a-vis the DOM, much less which "elements" of it
> to draw together in what ways!
>
> Again, the strategy is that an onClick would call forth a function
> that runs through a series of .png files, as if in an animation, and
> these files would be stretched to cover the whole screen, and these
> files are such that they make it look like the screen's being veiled.
> Possible?? (How???)
If you do it with opacity, just something like this:
function step()
{
opacity += tick;
if (opacity >= 1.0)
{
opacity = 1.0;
clearInterval(timer);
}
veil.style.opacity = opacity;
}
var veil = document.getElementById("veil");
var opacity = 0.0;
var tick = 32.0 / (2.0 * 1000); // two second fade
var timer = setInterval(step, 32);
I haven't tested this so it's probably full of errors, but you get the
idea.
> Then I would like to write new text on top, somehow...so, it would be
> like there are three layers: first the original webpage, then the
> "veil" of .png, and finally new text over it all.
Just put some text on top of the veil. If you use opacity bear in mind
that it affects an element and all its descendents, so you'll be able to
see through the text as well. If you want the text opaque but on a
semi-opaque background the text will have to be in a non-descendent
element (probably a sibling, and they're probably both absolutely
positioned).
CSS 3 also lets you set rgba background colours which enable you to have
a semi-opaque background (using the "a" or alpha component) with an
opaque foreground without needing to create an extra element, but I'm
not sure that's so widely supported.
Prisoner at War
>
>
> What you want is old MS's proprietary fade transitions filter. When
> DHTML was the current "Web2.0" it was sort of popular. It would require
> JavaScript and be very messy to get it to work on more that one browser.
> .. More work that I would be willing to invest. Again, this "effect" is
> more in Flash's domain.
Yeah, but Flash requires a plug-in...besides, I'm still struggling
with CSS/JavaScript! ^_^
I know these effects sound silly, but I've got a legitimate use for
them. And, mostly, it's an educational thing: even if I didn't have a
good use for them it's nice to know what's possible. Part of my
problem right now is that I don't even know the "scope" and "depth" of
what's possible between CSS and JavaScript...I've come across sites
that demonstrate neat tricks, but none really teach -- at best, they
provide a brief outline for an already knowledgeable reader....
I've bought the book "DOM Scripting"...I hope that will answer many
questions....
Prisoner at War
>
>
> <SNIP>
>
> You can also use the CSS 3 opacity property on a div with a background
> colour. Although opacity is CSS 3 it's pretty widely supported.
>
>
> function step()
> {
> opacity += tick;
> if (opacity >= 1.0)
> {
> opacity = 1.0;
> clearInterval(timer);
> }
> veil.style.opacity = opacity;
>
> }
>
> var veil = document.getElementById("veil");
> var opacity = 0.0;
> var tick = 32.0 / (2.0 * 1000); // two second fade
> var timer = setInterval(step, 32);
>
> I haven't tested this so it's probably full of errors, but you get the
> idea.
>
> that it affects an element and all its descendents, so you'll be able to
> see through the text as well. If you want the text opaque but on a
> semi-opaque background the text will have to be in a non-descendent
> element (probably a sibling, and they're probably both absolutely
> positioned).
>
> CSS 3 also lets you set rgba background colours which enable you to have
> a semi-opaque background (using the "a" or alpha component) with an
> opaque foreground without needing to create an extra element, but I'm
> not sure that's so widely supported.
Super!! It will take me a while to digest your idea, though...and in
the meantime, may I ask: how about utilizing any CSS 2.x methods?
And, first of all, really -- is your script or pseudo-code there
JavaScript or CSS or both?? Sorry, I'm really not sure where one
stops and the other begins...they're so hand-in-hand, after all!
Thanks again!!
Prisoner at War
>
>
> Technically it is perfectly cross-browser possible: but to write a
> stay alone working sample would require an hour of coding and cross-
> browser testing. I just don't have this spare time in my hand - though
> other may do or someone may have a working snippet ready. You may just
> take subModal script and re-adjust it for your needs if you can:http://www.subimage.com/dhtml/subModal/
Hey, cool!! I have **no idea what it is** but it looks fun! 8-)
Thanks, I hope I can understand all this stuff soon...can you tell me,
how did you (how did all of you people) learn this stuff??? I mean,
I'm reading many different books and trying to integrate different
concepts, but so far I've yet to come up with any original scripts of
my own...what I'm somewhat successful at is "hacking" others' scripts
to my own uses...but I'd like to be able to conceive of something and
know how to go about making it so, without having to research others'
similar implementations!
So how did you all learn this stuff?? Is it just a matter of time??
Ack, I'm spending so much time dealing with site "mechanics" I've
stopped creating actual content altogether! =(
But at least this diversion is quite fun! =) Even if often in a very
frustrating way, like a hard-to-get woman! =\
Nik Coughlin
news:cc08e79b-4e1e-4ae5...@p25g2000hsf.googlegroups.com...
That code above is JavaScript but it works by changing the style (CSS)
property of an object representing the HTML element with id="veil".
It doesn't matter that it's CSS 3. All the major browsers support opacity.
IE of course implements it differently, although I think newer versions get
it right, but don't quote me on that. One way of handling both (could be
improved somewhat but works):
function setOpacity( id, opacity ) {
var targetStyle = document.getElementById( id ).style;
targetStyle.opacity = (opacity / 100);
targetStyle.filter = "alpha(opacity=" + opacity + ")";
}
Ben C
> "Prisoner at War" <prisone...@yahoo.com> wrote in message
> It doesn't matter that it's CSS 3. All the major browsers support opacity.
> IE of course implements it differently, although I think newer versions get
> it right, but don't quote me on that.
Opera gets it slightly wrong too, but it doesn't show until you start
nesting opacity contexts.
Here is an obscure example:
http://www.tidraso.co.uk/misc/opacityContexts.html
Firefox gets it right (according to the CSS 3 draft), Opera doesn't.
ddailey
I will confess to not having read all the replies here, and the
example I'll mention is pretty old and probably contains a lot of old-
fashioned stuff, but it (according to my notes) works across browsers:
http://srufaculty.sru.edu/david.dailey/javascript/ani/opacity/opasimple3.html
cheers
David
Holger Jeromin
FF2 does it here exactly the same way like opera 9.2 and 9.5 beta.
--
Mit freundlichen Grüßen
Holger Jeromin
Ben C
Are you sure? I have Opera 9.25 on GNU/Linux and it gets it wrong.
You need to look quite closely. Here is an illustration based on a
screenshot of Opera:
http://www.tidraso.co.uk/misc/opacityContexts.png
I have labelled three of the rectangles F, G and H.
G should not be visible through H although F should be. This is because
CSS 3 says "Conceptually, after the element (including its children) is
rendered into an RGBA offscreen image, the opacity setting specifies how
to blend the offscreen rendering into the current composite rendering".
(http://www.w3.org/TR/css3-color/#transparency)
So it should look as though H were first rendered on top of G in an
offscreen image. In that rendering operation, bits of G will be obscured
completely by H. Then the result is blended on top of F, meaning in the
final result you should be able to see F through H but not G through H.
Opera looks like it's just given each element an alpha value equal to
the product of its ancestors' opacities and blended the whole lot
together.
Holger Jeromin
Sorry, you were right. I did not recognised this little piece :-) :-)
Prisoner at War
>
>
> I will confess to not having read all the replies here, and the
> example I'll mention is pretty old and probably contains a lot of old-
>
> cheers
> David
Wow, thanks, that's a very interesting page! I've just more or less
"digested" some of the other references others have made...time to
start tinkering with this one!
Thanks again!
VK
> On Apr 26, 5:14 pm, VK <schools_r...@yahoo.com> wrote:
>
>
>
> > Technically it is perfectly cross-browser possible: but to write a
> > stay alone working sample would require an hour of coding and cross-
> > browser testing. I just don't have this spare time in my hand - though
> > other may do or someone may have a working snippet ready. You may just
> > take subModal script and re-adjust it for your needs if you can:http://www.subimage.com/dhtml/subModal/
>
> Hey, cool!! I have **no idea what it is** but it looks fun! 8-)
>
> Thanks, I hope I can understand all this stuff soon...can you tell me,
> how did you (how did all of you people) learn this stuff??? I mean,
> I'm reading many different books and trying to integrate different
> concepts, but so far I've yet to come up with any original scripts of
> my own...what I'm somewhat successful at is "hacking" others' scripts
> to my own uses...but I'd like to be able to conceive of something and
> know how to go about making it so, without having to research others'
> similar implementations!
>
> So how did you all learn this stuff?? Is it just a matter of time??
Mostly. Back in 1995 I remember was dying to know how these guys
making an image to act as as a "hypertext" (the term "link" was only
coming into wide use). By twisting my mind around :-) for a while I
tried to place A tags around an IMG and oh miracle! - it worked.
Such a silly simple achievement, really, - but I still remember how
proud I was of myself by discovering it, without any half-descent HTML
manual available.
> Ack, I'm spending so much time dealing with site "mechanics" I've
> stopped creating actual content altogether! =(
Different browsers ob different OS - different quirks and workarounds.
No one theoretic book will teach you all of this right a way.
btw I have made a demo for your question. It is not a ready solution:
it has to be further adjusted or completely rebuild some later when
you feel yourself comfortable. You just may have fun digging the code.
I'll answer the questions if you have them.
The packed page is at
http://www.geocities.com/schools_ring/tmp/Trans.zip
------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="la">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}
body {
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}
form * {
font: 1em Times New Roman, Times, serif;
}
p {
font: 1em Georgia, serif;
line-height: 1.4;
}
div#cover {
visibility: hidden;
position: absolute;
z-index: 1001;
left: 0px;
top: 0px;
}
div#popup {
visibility: hidden;
position: absolute;
z-index: 1002;
left: 0px;
top: 0px;
border: medium double black;
padding: 10px 10px;
background-color: white;
}
div#popup p {
font: normal 0.8em Verdana, Geneva, sans-serif;
text-align: center;
}
</style>
<script type="text/javascript">
function lockScreen(lnk) {
var form = document.forms['config'];
for (var i=0; i<form.elements.length; i++) {
form.elements[i].disabled = true;
}
var popup = document.getElementById('popup');
var cover = document.getElementById('cover');
var color = form.color[form.color.selectedIndex].value;
var opacity = form.opacity[form.opacity.selectedIndex].value;
cover.style.width = document.documentElement.clientWidth + 'px';
cover.style.height = document.documentElement.clientHeight + 'px';
cover.style.backgroundColor = color;
if ('filter' in cover.style) {
cover.style.filter = ''.concat(
'progid:DXImageTransform.Microsoft.Alpha(Opacity=',
Math.floor(opacity * 100),
',Style=0)');
}
else {
cover.style.opacity = opacity;
}
cover.style.visibility = 'visible';
popup.style.left = Math.floor(
(document.documentElement.clientWidth - popup.offsetWidth)/2) +
'px';
popup.style.top = Math.floor(
(document.documentElement.clientHeight - popup.offsetHeight)/2) +
'px';
popup.style.visibility = 'visible';
lnk.blur();
return false;
}
function releaseScreen(lnk) {
var popup = document.getElementById('popup');
var cover = document.getElementById('cover');
popup.style.visibility = 'hidden';
cover.style.visibility = 'hidden';
var form = document.forms['config'];
for (var i=0; i<form.elements.length; i++) {
form.elements[i].disabled = false;
}
lnk.blur();
}
</script>
</head>
<body>
<form name="config" action="" onsubmit="return false;">
<fieldset>
<legend>Demo</legend>
<select name="color">
<optgroup label="Color:">
<option value="#000000" selected>Black</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
</optgroup>
</select>
<select name="opacity">
<optgroup label="Opacity:">
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5" selected>50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</optgroup>
</select>
<a href="noscript.html" onclick="return lockScreen(this)">Apply
settings</a>
</fieldset>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
<p>Integer mi libero, adipiscing at, congue vulputate, dictum et,
lectus. Sed ipsum. Proin scelerisque lacinia lorem. Etiam non mi
ac quam pharetra egestas. Quisque est. Proin venenatis consequat
augue.
Curabitur suscipit, leo quis pretium egestas, lorem tellus imperdiet
mauris, at adipiscing sapien orci at magna. Sed vitae nunc gravida
orci
dictum dapibus. Mauris porttitor viverra orci. Donec volutpat
fringilla
nibh. In nibh arcu, interdum et, tristique quis, semper nec, ante.</
p>
<p>Etiam congue gravida urna. Curabitur quam. Etiam congue commodo
tellus.
Phasellus eget dui quis urna iaculis accumsan. Integer suscipit
sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
gravida, ipsum id molestie molestie, massa urna tempus purus, sit
amet
bibendum metus lacus non quam. Sed nunc. Nam libero arcu, hendrerit
vel,
posuere sed, consectetuer sit amet, diam. Curabitur egestas. Nulla
suscipit
justo nec libero. Quisque suscipit vehicula dolor. Fusce in massa.</
p>
<div id="cover"> </div>
<div id="popup">
<p>Lorem Ipsum rulez!</p>
<p><button type="button" onclick="releaseScreen(this)">Close</button>
</div>
</body>
</html>
Jorge
/*
Playing around : tested in Safari, Opera and FireFox.
Simplified version that behaves better when/if the window is
resized.
*/
<html>
<head>
<title>Demo</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}
body {
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}
p {
font: 1em Georgia, serif;
line-height: 1.4;
}
div#cover {
visibility: hidden;
position: absolute;
background-color: black;
opacity: 0.6;
z-index: 1001;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
div#popup {
visibility: hidden;
position: absolute;
z-index: 1002;
left: 0px;
top: 0px;
border: medium double black;
padding: 10px 10px;
background-color: white;
}
div#popup p {
font: normal 0.8em Verdana, Geneva, sans-serif;
text-align: center;
}
</style>
<script>
function $ (p) {
return document.getElementById(p);
};
function lockScreen() {
$('cover').style.visibility = 'visible';
$('popup').style.visibility = 'visible';
return false;
};
function releaseScreen() {
$('cover').style.visibility = 'hidden';
$('popup').style.visibility = 'hidden';
};
//Center the popup when/if the window is resized.
window.onresize = window.onload = function () {
var e = $('popup'), d = document.documentElement;
e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
e.style.top = ((d.clientHeight - e.offsetHeight)/2) + 'px';
};
</script>
</head>
<body>
<div id="cover"></div>
<div id="popup">
<p>Lorem Ipsum rulez!</p>
<p><button type="button" onclick="releaseScreen()">Close</
button>
</div>
<a href="noscript.html" onclick="return lockScreen()">Click to do
it !
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
</body>
</html>
Jorge
Not for IE. Oh My !
Safari, FireFox & Opera, ok.
@Prisoner at War : a friendly advice :
if you aren't doing so already :
Use FireFox *2* + FireBug for debugging.
It's handy as a learning tool, as well.
<html>
<head>
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Jorge Chamorro Bieling">
<!-- Date: 2008-05-02 -->
<title>Demo</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}
body {
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}
p {
font: 1em Georgia, serif;
line-height: 1.4;
}
div#cover {
visibility: hidden;
position: absolute;
background-color: black;
opacity: 0.6;
z-index: 1001;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
div#popup {
visibility: hidden;
position: absolute;
z-index: 1002;
left: 0px;
top: 0px;
border: medium double black;
padding: 10px 10px;
background-color: white;
}
div#popup p {
font: normal 0.8em Verdana, Geneva, sans-serif;
text-align: center;
}
</style>
<script>
function $ (p) {
return document.getElementById(p);
};
function lockScreen() {
show('cover', true, 0.6);
show('popup', true, 1.0);
return false;
};
function releaseScreen() {
show('cover', false);
show('popup', false);
};
/*
Center the popup when/if the window is resized
*/
window.onresize = window.onload = function () {
var e = $('popup'), d = document.documentElement;
e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
e.style.top = ((d.clientHeight - e.offsetHeight)/2) + 'px';
};
function show (pID, pVisible, pTargetOpacity) {
var kFaderSteps = 20,
kFadermS = 500/kFaderSteps, //Half a second
e = $(pID),
step;
if (pVisible) {
if (e.style.visibility === 'visible') { return; }
e.style.opacity = 0;
e.style.visibility = 'visible';
step = pTargetOpacity/kFaderSteps;
(e.fader=function () {
if (e.fader !== arguments.callee) { return; }
var currentOpacity = +e.style.opacity;
if (( currentOpacity += step ) >= pTargetOpacity ) {
currentOpacity = pTargetOpacity;
e.fader = undefined;
} else { setTimeout(e.fader, kFadermS); }
e.style.opacity = currentOpacity;
})();
} else {
//Will always fade to opacity=0.0;
if (e.style.visibility === 'hidden') { return; }
step = e.style.opacity/kFaderSteps;
(e.fader=function () {
if (e.fader !== arguments.callee) { return; }
var currentOpacity = +e.style.opacity;
if (( currentOpacity -= step ) <= 0.0 ) {
currentOpacity = 0.0;
e.style.visibility = 'hidden';
e.fader = undefined;
} else { setTimeout(e.fader, kFadermS); }
e.style.opacity = currentOpacity;
})();
}
};
</script>
</head>
<body>
<div id="cover"></div>
<div id="popup">
<p>Lorem Ipsum rulez!</p>
<p><button type="button" onclick="releaseScreen()">Close</button>
</div>
<a href="noscript.html" onclick="return lockScreen()">Click to do it !
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
</body>
</html>
VK
> Version 2 fades in/out... :-)
> Not for IE. Oh My !
> Safari, FireFox & Opera, ok.
Cool. I just would like to keep it as a learner's code as well, not
just a library - though it will be fully usable as it is.
This way I'd like to avoid "squeeze-script" to keep the algorithm
steps as obvious as possible. So without (wherever doable) anonymous
function expressions, nested functions, closures and stuff.
The final result - if reached - will also be free under the MIT
Licence.
Are you OK with it? I'll take a look around what can universally do
with the scrolling issues.
Jorge
> Are you OK with it? I'll take a look around what can universally do
> with the scrolling issues.
Oh, my... yes, scrolling happens as well... !
Who writes a handler ? ...and posts it ? :-)
--Jorge.
Jorge
>
> > Version 2 fades in/out... :-)
> > Not for IE. Oh My !
> > Safari, FireFox & Opera, ok.
>
> Cool. I just would like to keep it as a learner's code as well, not
> just a library - though it will be fully usable as it is.
>
There was a bug : it shows up when var kFaderSteps is set to 3, 6,
9... the problem seems to be that when currentOpacity becomes too
small JS switches to scientific notation (x.xxx e-y) and then the
assignment e.style.opacity = currentOpacity misbehaves : this fix
avoids that situation :
//Will always fade to opacity=0.0;
if (e.style.visibility === 'hidden') { return; }
step = e.style.opacity/kFaderSteps;
(e.fader=function () {
if (e.fader !== arguments.callee) { return; }
var currentOpacity = +e.style.opacity-step;
if (currentOpacity <= 0.001 ) {
currentOpacity = 0;
e.style.visibility = 'hidden';
e.fader = undefined;
} else { setTimeout(e.fader, kFadermS); }
e.style.opacity = currentOpacity;
})();
--Jorge.