[thelist] onScroll event?

Tue Dec 21 09:09:29 CST 2004

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 !