Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14221 > unrolled thread

Shading a <div>

Back to article view | Back to comp.lang.javascript

Contents

  Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 22:52 +0200
    Re: Shading a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-05-29 23:06 +0200
      Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 23:35 +0200
        Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-29 23:37 +0200
      Re: Shading a <div> "Tom de Neef" <tdeneef@qolor.nl> - 2012-05-30 09:13 +0200
        Re: Shading a <div> Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-05-30 10:14 +0200

#14221 — Shading a <div>

I have a number of <div> elements in a document that I want to mark as 
inaccessible when another element gets modal focus.
I thought about a (semi-transparent) veil. This will serve two purposes: it 
is a visible mark and it can block input.
Shading the whole client area apart from the focal <div> is not an option. 
It should be per <div>.

I know how to make a <div> element semi-transparent. And I know how to add 
such a veil to the document and position it over a target <div>.
But I would like it to be 'attached to' the target <div> so that it stays 
over it even when the target div resizes or moves (e.g. as a result of 
window resizing or server instructions).
Can you think of an elegant way to do this and give suggestions, please.
Thank you in advance,
Tom 

[toc] | [next] | [standalone]

#14223

Tom de Neef wrote:

> […]
> Shading the whole client area apart from the focal <div> is not an option.
> It should be per <div>.
> 
> I know how to make a <div> element semi-transparent. And I know how to add
> such a veil to the document and position it over a target <div>.
> But I would like it to be 'attached to' the target <div> so that it stays
> over it even when the target div resizes or moves (e.g. as a result of
> window resizing or server instructions).
> Can you think of an elegant way to do this and give suggestions, please.

Position the target `div' element relative and the blocking `div' element 
absolute as its child with left: 0, right: 0, top: 0, bottom: 0.

Did I miss anything?


PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#14224

"Thomas 'PointedEars' Lahn" <PointedEars@web.de> schreef in bericht 
news:1750700.sGQGJBOIHu@PointedEars.de...
> Tom de Neef wrote:
>
>> [.]
>> Shading the whole client area apart from the focal <div> is not an 
>> option.
>> It should be per <div>.
>>
>> I know how to make a <div> element semi-transparent. And I know how to 
>> add
>> such a veil to the document and position it over a target <div>.
>> But I would like it to be 'attached to' the target <div> so that it stays
>> over it even when the target div resizes or moves (e.g. as a result of
>> window resizing or server instructions).
>> Can you think of an elegant way to do this and give suggestions, please.
>
> Position the target `div' element relative and the blocking `div' element
> absolute as its child with left: 0, right: 0, top: 0, bottom: 0.
>
> Did I miss anything?

I get the feeling I am missing something instead ;-)
Using this code (fragment):
{code}
<style>
.v {position:absolute; left:0; top:0; width:100px; height:100px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.25); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, 
endColorstr=#40000000);
    -ms-filter: 
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, 
endColorstr=#40000000)"; }
</style>
</head>
<body >
<div style="position: relative; width:300px; height:200px; 
background-color:yellow">
  The target div</div>
  <div class="v" > </div>
</div>
</body>
{/code}

I see a 100x100 shaded area. But when I replace width and height in the 
style def by "top: 0; bottom: 0;" I see nothing.
What is the idea behind an area spec of 0 x 0 ?
(I've tried "width:inherit; height:inherit;" but that doesn't seem to work - 
IE, FF, Chrome).
Tom

[toc] | [prev] | [next] | [standalone]

#14225

"Tom de Neef" <tdeneef@qolor.nl> schreef in bericht 
news:4fc5410c$0$6953$e4fe514c@news2.news.xs4all.nl...
> "Thomas 'PointedEars' Lahn" <PointedEars@web.de> schreef in bericht 
> news:1750700.sGQGJBOIHu@PointedEars.de...
>> Tom de Neef wrote:
>>
>>> [.]
>>> Shading the whole client area apart from the focal <div> is not an 
>>> option.
>>> It should be per <div>.
>>>
>>> I know how to make a <div> element semi-transparent. And I know how to 
>>> add
>>> such a veil to the document and position it over a target <div>.
>>> But I would like it to be 'attached to' the target <div> so that it 
>>> stays
>>> over it even when the target div resizes or moves (e.g. as a result of
>>> window resizing or server instructions).
>>> Can you think of an elegant way to do this and give suggestions, please.
>>
>> Position the target `div' element relative and the blocking `div' element
>> absolute as its child with left: 0, right: 0, top: 0, bottom: 0.
>>
>> Did I miss anything?
>
> I get the feeling I am missing something instead ;-)
> Using this code (fragment):
> {code}
> <style>
> .v {position:absolute; left:0; top:0; width:100px; height:100px;
>    background: rgb(0, 0, 0);
>    background: rgba(0, 0, 0, 0.25); 
> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, 
> endColorstr=#40000000);
>    -ms-filter: 
> "progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, 
> endColorstr=#40000000)"; }
> </style>
> </head>
> <body >
> <div style="position: relative; width:300px; height:200px; 
> background-color:yellow">
>  The target div</div>
>  <div class="v" > </div>
> </div>
> </body>
> {/code}
>

Sorry, sorry. Wait, there is a </div> too many.
Tom 

[toc] | [prev] | [next] | [standalone]

#14230

"Thomas 'PointedEars' Lahn" <PointedEars@web.de> schreef in bericht 
news:1750700.sGQGJBOIHu@PointedEars.de...
> Tom de Neef wrote:
>
>> [.]
>> Shading the whole client area apart from the focal <div> is not an 
>> option.
>> It should be per <div>.
>>
>> I know how to make a <div> element semi-transparent. And I know how to 
>> add
>> such a veil to the document and position it over a target <div>.
>> But I would like it to be 'attached to' the target <div> so that it stays
>> over it even when the target div resizes or moves (e.g. as a result of
>> window resizing or server instructions).
>> Can you think of an elegant way to do this and give suggestions, please.
>
> Position the target `div' element relative and the blocking `div' element
> absolute as its child with left: 0, right: 0, top: 0, bottom: 0.
>
> Did I miss anything?

I have never seen this spec of  (0,0,0,0). In Chrome and FF it does what you 
predicted: the child takes all space offered by the parent.
Not so in IE8: the child uses only what is needed (e.g. for a &nbsp;).

But "top:0;left:0;width:100%;height:100%;" seems to work in all browsers.
(I tried this last night but messed up and came to the wrong conclusion. 
Conclusions drawn in the middle of the night have little value ...).
Thank you.
Tom

[toc] | [prev] | [next] | [standalone]

#14233

Tom de Neef wrote:

> "Thomas 'PointedEars' Lahn" <PointedEars@web.de> schreef in bericht
> news:1750700.sGQGJBOIHu@PointedEars.de...
>> Tom de Neef wrote:
>>
>>> [.]
>>> Shading the whole client area apart from the focal <div> is not an
>>> option.
>>> It should be per <div>.
>>>
>>> I know how to make a <div> element semi-transparent. And I know how to
>>> add
>>> such a veil to the document and position it over a target <div>.
>>> But I would like it to be 'attached to' the target <div> so that it
>>> stays over it even when the target div resizes or moves (e.g. as a
>>> result of window resizing or server instructions).
>>> Can you think of an elegant way to do this and give suggestions, please.
>>
>> Position the target `div' element relative and the blocking `div' element
>> absolute as its child with left: 0, right: 0, top: 0, bottom: 0.
>>
>> Did I miss anything?
> 
> I have never seen this spec of  (0,0,0,0).

Standard CSS.  But a rectangle with coordinates (0, 0, 0, 0) is _not_ what 
it means.  RTFM.

> In Chrome and FF it does what
> you predicted: the child takes all space offered by the parent.
> Not so in IE8: the child uses only what is needed (e.g. for a &nbsp;).

It should work in IE 7 and 8, too (IE/MSHTML 6 supports `right' and `bottom' 
differently; use CCs).  Do not develop in Quirks Mode and remember that you 
must also use the `position' property *twice* (on different elements, with 
different values).

> But "top:0;left:0;width:100%;height:100%;" seems to work in all browsers.

Until you add padding it might.  Usually width:100% and height:100% is a bit 
too large – there are scrollbars.

> Thank you.

You're welcome.  Next time, consider a CSS-only solution first, and post 
where that is on-topic.

F'up2 comp.infosystems.www.authoring.stylesheets

PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
  -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web