SV: [thelist] onScroll event?
Rosalie Sennett
rsennett at brainlink.com
Tue Dec 21 10:06:59 CST 2004
Andreas,
Well... since there is no 'drop-shadow' in css you are kind of stuck with
block positioning the thing that contains your shadow so that it is behind,
below and to the right of your main text.
It is likely... the fact that drop shadow on anything longer than a heading
is hard to read (and also why it is only used on large font) that you'll
never see a drop-shadow added to css!
Basically you must lock down the box that will have the scrollbar.
Then you must lock the text to the shadow...
If you google around, you'll see that most people are going to try to find a
programmatic way to do that... since, as you said, with css it isn't very
clean.
You'll notice that the "divContainer" and the "divOuter" actually share a
most of their attributes, so the stylesheet can be simplified... I just
figured that I'd lay it all out so that you could see what was going on,
rather than having to figure out what was inheriting what...
Best of luck,
rose
-----------------
c:/dos
c:/dos/run
run/dos/run
>>
-----------------
> -----Original Message-----
> From: thelist-bounces at lists.evolt.org [mailto:thelist-
> bounces at lists.evolt.org] On Behalf Of Andreas Wahlin
> Sent: Tuesday, December 21, 2004 10:50 AM
> To: thelist at lists.evolt.org
> Subject: [SPAM] SV: [thelist] onScroll event?
>
> Not the most expandable/fluid of solutions, but thanks, it gave me ideas
> :)
>
> Andreas
>
> -----Ursprungligt meddelande-----
> Från: Rosalie Sennett [mailto:rsennett at brainlink.com]
> Skickat: den 21 december 2004 16:09
> Till: thelist at lists.evolt.org
> Ämne: RE: [thelist] onScroll event?
>
> Not sure why you wanna do this... it is quite hard to read, but this
> example
> will illustrate how you need to do it (if you want pure css.
>
> The example below uses a LOT of text and large size letters, to
> demonstrate
> how much displacement you need to make the effect work.
>
> If you've got an app with a design view... look at the page while you
> move
> around the positioning of the divInner tag.
>
> If I had one or two lines of text... then the displacement would be
> something like -32 but because the position is relative... you're
> effectively displacing the entire block.
>
> The divContainer has the srolling so that the other divs don't move away
> from each other.
>
> Enjoy,
>
> Rose
>
> ......
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
> />
> <title>Untitled Document</title>
> <style>
> #divOuter {
> font-size: x-large;
> font-weight: bold;
> position: absolute;
> left: 1px;
> top: 1px;
> z-index: 2;
> color:#CCCCCC;
> height: 200px;
> width: 400px;
> }
>
> #divInner {
> font-size: x-large;
> font-weight: bold;
> color: #000000;
> position: relative;
> z-index: 1;
> top: -1067px;
> left: -3px;
> }
>
>
>
>
> #divContainer {
> position: absolute;
> left: 1px;
> top: 1px;
> right: 400px;
> bottom: 200px;
> overflow: scroll;
> height: 200px;
> width: 400px;
> }
> </style>
> </head>
>
> <body>
>
> <div id="divContainer">
> <div id="divOuter">
> Inter haec Alexander ad conducendum ex Peloponneso militem
> Cleandro
> cum pecunia misso Lyciae Pamphyliaeque rebus conpositis ad urbem
> Celaenas
> exercitum admovit. Media illa tempestate moenia interfluebat Marsyas
> amnis,
> fabulosis Graecorum carminibus inclitus. Fons eius ex summo montis
> cacumine
> excurrens in subiectam petram magno strepitu aquarum cadit: inde
> diffusus
> circumiectos rigat campos, liquidus et suas dumtaxat undas trahens.
> Itaque
> color eius placido mari similis locum poetarum mendacio fecit: quippe
> traditum est nymphas amore amnis retentas in illa rupe considere.
> Ceterum
> quamdiu intra muros fluit, nomen suum retinet: at cum extra munimenta se
> evolvit, maiore vi ac mole agentem undas Lycum appellant. Alexander
> quidem
> urbem destitutam ab suis intrat, arcem vero, in quam confugerant,
> oppugnare
> adortus caduceatorem praemisit, qui denuntiaret, ni dederent, ipsos
> ultima
> esse passuros. Illi caduceatorem in turrem et situ et opere multum
> editam
> perductum, quanta esset altitudo, intueri iubent ac nuntiare Alexandro,
> non
> eadem ipsum et incolas aestimatione munimenta metiri: se scire
> inexpugnabiles esse, ad ultimum pro fide morituros. Ceterum ut
> circumsideri
> arcem et omnia sibi in dies artiora esse viderunt, sexaginta dierum
> inducias
> pacti, ut, nisi intra eos auxilium Dareus ipsis mississet, dederent
> urbem,
> postquam nihil inde praesidii mittebatur, ad praestitutam diem permisere
> se
> regi.
>
> <div id="divInner">
>
> Inter haec Alexander ad conducendum ex Peloponneso
> militem
> Cleandro cum pecunia misso Lyciae Pamphyliaeque rebus conpositis ad
> urbem
> Celaenas exercitum admovit. Media illa tempestate moenia interfluebat
> Marsyas amnis, fabulosis Graecorum carminibus inclitus. Fons eius ex
> summo
> montis cacumine excurrens in subiectam petram magno strepitu aquarum
> cadit:
> inde diffusus circumiectos rigat campos, liquidus et suas dumtaxat undas
> trahens. Itaque color eius placido mari similis locum poetarum mendacio
> fecit: quippe traditum est nymphas amore amnis retentas in illa rupe
> considere. Ceterum quamdiu intra muros fluit, nomen suum retinet: at cum
> extra munimenta se evolvit, maiore vi ac mole agentem undas Lycum
> appellant.
> Alexander quidem urbem destitutam ab suis intrat, arcem vero, in quam
> confugerant, oppugnare adortus caduceatorem praemisit, qui denuntiaret,
> ni
> dederent, ipsos ultima esse passuros. Illi caduceatorem in turrem et
> situ et
> opere multum editam perductum, quanta esset altitudo, intueri iubent ac
> nuntiare Alexandro, non eadem ipsum et incolas aestimatione munimenta
> metiri: se scire inexpugnabiles esse, ad ultimum pro fide morituros.
> Ceterum
> ut circumsideri arcem et omnia sibi in dies artiora esse viderunt,
> sexaginta
> dierum inducias pacti, ut, nisi intra eos auxilium Dareus ipsis
> mississet,
> dederent urbem, postquam nihil inde praesidii mittebatur, ad
> praestitutam
> diem permisere se regi.
>
>
>
> </div>
>
> </div>
>
> </div>
>
>
> </body>
> </html>
>
> -----------------
> c:/dos
> c:/dos/run
> run/dos/run
> >>
> -----------------
> > -----Original Message-----
> > From: thelist-bounces at lists.evolt.org [mailto:thelist-
> > bounces at lists.evolt.org] On Behalf Of Andreas Wahlin
> > Sent: Tuesday, December 21, 2004 8:43 AM
> > To: thelist at lists.evolt.org
> > Subject: SV: [thelist] onScroll event?
> >
> > Yes, but from what I understand, that's just a dropshadow for images
> (or
> > other block like displays), I want it on text, on each individual
> > letter.
> >
> > Andreas
> >
> > -----Ursprungligt meddelande-----
> > Från: Christian Heilmann [mailto:lists at onlinetools.org]
> > Skickat: den 21 december 2004 14:14
> > Till: thelist at lists.evolt.org
> > Ämne: Re: [thelist] onScroll event?
> >
> > Andreas Wahlin wrote:
> >
> > >Is there some way to detect when you scroll an element?
> > >Scenario is that I want dropshadow on the text of a div, so I just
> put
> > >in another div with a slight offset and ... drop shadow!
> > >Now, if the text in that div is large, there be scrollbars, and if
> > >clicked, the div obviously scrolls the text, leaving the dropshadow
> > >behind.
> > >It could of course be solved by firing a setInterval and checknig the
> > >scrollTop attribute on the text div, and then apply that to the
> > >dropshadow div, but it would be nice to have a onScroll event or
> > >something .
> > >
> > >
> > alistapart.com had some articles about CSS dropshadows. It seems to me
> > that you might be overcomplicating things. I don't really know how
> > scrolling would leave the shadow layer behind.
> >
> > --
> >
> > * * Please support the community that supports you. * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> >
> >
> > --
> >
> > * * Please support the community that supports you. * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
>
>
> --
>
> * * Please support the community that supports you. * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>
>
> --
>
> * * Please support the community that supports you. * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
More information about the thelist
mailing list