|
|
 | Gardin-effekt
Fra : Jesper Stocholm |
Dato : 30-08-01 22:08 |
|
Jeg er blevet bedt om at lave en feature på et website, der er sådan en
slags "B&O"-effekt. Jeg er interesseret i at lave det, så der ved load af
siden "trækkes" et gråt/gennemsigtigt gardin fra midten og ud - det skal
være defineret i et tabel-element (TD). Det skal virke på samme måde som på
nyere B&O-fjernsyn, hvor der når det tændes trækkes to røgfarvede glasplader
væk fra skærmen.
I dk.edb.internet.webdesign.clientside spurgte jeg om det for et par dage
siden, men jeg er ikke interesseret i at lave det med flash ... men jeg
tænkte på, om det ikke kan lade sig gøre med layers ?
--
Jesper Stocholm
http://stocholm.dk
ICQ: 13214885
MSN Messenger: jesperstocholm at hotmail dot com
| |
 Wired Earp (30-08-2001)
| Kommentar
Fra : Wired Earp |
Dato : 30-08-01 22:54 |
|
Jesper Stocholm wrote:
> Jeg er blevet bedt om at lave en feature på et website, der er
> sådan en slags "B&O"-effekt ... jeg tænkte på, om det ikke kan
> lade sig gøre med layers?
Det kan det sagtens; du vil bare ikke. Selvom du bruger nogle af
microsofts fancy transition effekter vil det gå alt for langsomt til
at være rentabelt. Det vil køre sygeligt dårligt i Mozilla og på alle
processorer under 11 gigaherz.
Hvis du virkelig virkelig gerne vil kan vi godt finde ud af noget, men
det er virkelig ikke besværet værd. Ikke engang I Flash; det kører
simpelthen ikke hvis det skal fylde hele skærmen.
Der er en Dreamweaver extension som hedder Layer Animagic som tillader
dig at teste resultatet med et minimum af besvær, den kan downloades
på <URL: http://www.projectseven.com>.
--
Wired Earp
Wunderbyte
| |
Jesper Stocholm (30-08-2001)
| Kommentar
Fra : Jesper Stocholm |
Dato : 30-08-01 23:26 |
|
Wired Earp wrote in news:Xns910DF36813BD2wiredearp@193.88.15.201:
> Jesper Stocholm wrote:
>
>> Jeg er blevet bedt om at lave en feature på et website, der er
>> sådan en slags "B&O"-effekt ... jeg tænkte på, om det ikke kan lade
>> sig gøre med layers?
>
> Det kan det sagtens; du vil bare ikke. Selvom du bruger nogle af
> microsofts fancy transition effekter vil det gå alt for langsomt til
> at være rentabelt. Det vil køre sygeligt dårligt i Mozilla og på alle
> processorer under 11 gigaherz.
>
OK ...
> Hvis du virkelig virkelig gerne vil kan vi godt finde ud af noget, men
> det er virkelig ikke besværet værd. Ikke engang I Flash; det kører
> simpelthen ikke hvis det skal fylde hele skærmen.
>
nu skulle det ikke fylde hele skærmen - men blot i et TD-element.
Siden er bygget sådan nogenlunde op således:
<table>
<tr>
<td colspan="2">Some title</td>
</tr>
<tr>
<td>... navigationsmenu ...</td><td>[curtain slide-effect]</td>
</tr>
</table>
Men det er nu heller ikke fordi det er noget jeg har specielt meget lyst til
at lave ... men når nu svigerfar spørger så pænt, så kan jeg jo ikke andet
end at prøve at finde ud af, hvordan det laves.
> Der er en Dreamweaver extension som hedder Layer Animagic som tillader
> dig at teste resultatet med et minimum af besvær, den kan downloades
> på <URL: http://www.projectseven.com>.
>
Mange tak ... argumentet "det er for svært" holder nu meget godt, så det
tror jeg jeg vil videregive.
:)
--
Jesper Stocholm
http://stocholm.dk
ICQ: 13214885
MSN Messenger: jesperstocholm at hotmail dot com
| |
 Wired Earp (31-08-2001)
| Kommentar
Fra : Wired Earp |
Dato : 31-08-01 08:21 |
|
Jesper Stocholm wrote:
>argumentet "det er for svært" holder nu meget godt
Nej, det duer ikke til noget. Her er et eksempel til morgenkaffen,
hvis det ikke skal fylde hele skærmen er det ikke noget problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>gardin</title>
<script type="text/javascript">
window.onload = function () {
pull = setInterval ("pullCurtains(10)",1);
}
function pullCurtains (distance) {
var currentLeft; var currentRight; var newLeft; var newRight;
currentLeft = parseInt (document.getElementById
('leftCurtain').style.left);
currentRight = parseInt (document.getElementById
('rightCurtain').style.left);
newLeft = currentLeft - distance;
newRight = currentRight + distance;
if ( newLeft < 0 && newRight > 400) clearInterval(pull);
else {
document.getElementById('leftCurtain').style.left =
newLeft + 'px';
document.getElementById('rightCurtain').style.left =
newRight + 'px';
}
}
</script>
</head>
<body>
<div style="position: relative; width: 400px; height: 400px;
background-color: black; color: white; overflow: hidden;">
<div id="leftCurtain" style="position: absolute; top: 0px; left: 0px;
width: 200px; height: 400px; background-color: gray; filter
filter:Alpha(opacity=80); -moz-opacity(80%)"> </div>
<div id="rightCurtain" style="position: absolute; top: 0px; left:
200px; width: 200px; height: 400px; background-color: gray; filter
filter:Alpha(opacity=80); -moz-opacity(80%)"> </div>
<div style="text-align: center; margin-top: 190px">Den fantastiske
gardin effekt.</div>
</div>
</body>
</html>
--
Wired Earp
Wunderbyte
| |
Kim Schulz (31-08-2001)
| Kommentar
Fra : Kim Schulz |
Dato : 31-08-01 08:25 |
|
Wired Earp wrote:
>
> Jesper Stocholm wrote:
>
> >argumentet "det er for svært" holder nu meget godt
>
> Nej, det duer ikke til noget. Her er et eksempel til morgenkaffen,
> hvis det ikke skal fylde hele skærmen er det ikke noget problem.
>
[snip]
document.getElementById is not a function.
JavaScript Error: http://lifesuckz/gardin.html, line 17:
det er hvad jeg får ud af den.
MVH
Kim Schulz
--
Even historians fail to learn from history -- they repeat the same
mistakes.
-- John Gill, "Patterns of Force", stardate 2534.7
| |
Wired Earp (31-08-2001)
| Kommentar
Fra : Wired Earp |
Dato : 31-08-01 08:39 |
|
Kim Schulz wrote:
> document.getElementById is not a function.
Vist er det så. Det er på høje tid at du opdaterer din browser, den
officielle udgivelse af IE6 er et vægtigt argument for samme. Du
erstatter getElementById med getId som fyrer følgende funktion af:
function getId(id) {
return document.all && !document.getElementById ?
document.all[id] : document.getElementById(id);
}
Den checker om getElementById er understøttet og hvis ikke bruger den
gode gamle document.all istedet. Hvis du bruger Netscape4 er det
ligemeget; det kræver en væsentligt stærkere morgenkaffe og er ikke
godt for helbredet.
--
Wired Earp
Wunderbyte
| |
Kim Schulz (31-08-2001)
| Kommentar
Fra : Kim Schulz |
Dato : 31-08-01 08:52 |
|
Wired Earp wrote:
>
> Kim Schulz wrote:
>
> > document.getElementById is not a function.
>
> Vist er det så. Det er på høje tid at du opdaterer din browser, den
> officielle udgivelse af IE6 er et vægtigt argument for samme.
En ting er sikkert! IE bliver det aldrig. Den er jo fandme fyldt op med
mere ragelse en et forkælet barns værelse er. Totalt spild af resourcer.
Opera kan næsten klare sagen, og den har lige det man har behov for for
at finde info på nettet.
> Du
> erstatter getElementById med getId som fyrer følgende funktion af:
>
> function getId(id) {
> return document.all && !document.getElementById ?
> document.all[id] : document.getElementById(id);
> }
>
> Den checker om getElementById er understøttet og hvis ikke bruger den
> gode gamle document.all istedet. Hvis du bruger Netscape4 er det
> ligemeget; det kræver en væsentligt stærkere morgenkaffe og er ikke
> godt for helbredet.
Bruger mange forskellige hver dag. Netscape 4.X (2-3 forskellige),
Netscape 6.1, Mozilla 0.9.3-2, Galeon, Opera 5.05, w3m, lynx.
IE bliver det kun til når jeg har fundet alle fejlene i min side og så
bare vil se hvordan IE har lyst til at fortolke standarderne.
I opera der er der forresten problemer med at dit venstre gardin står og
kører halvt frem så tilbage osv. osv.
MVH
Kim
--
Contemptuous lights flashed flashed across the computer's console.
-- Hitchhiker's Guide to the Galaxy
| |
Jesper Stocholm (02-09-2001)
| Kommentar
Fra : Jesper Stocholm |
Dato : 02-09-01 12:48 |
|
Wired Earp wrote in news:Xns910E5F469B0CDwiredearp@193.88.15.201:
> Jesper Stocholm wrote:
>
>>argumentet "det er for svært" holder nu meget godt
>
> Nej, det duer ikke til noget.
:) ... men det kan jeg godt se, nu jeg igen læser mit indlæg. Jeg havde blot
ledt så mange steder efter noget inf om hvordan man laver det, så jeg var
blevet en smule frustreret.
> Her er et eksempel til morgenkaffen,
> hvis det ikke skal fylde hele skærmen er det ikke noget problem.
>
[snip en masse script]
Tusind tak ... :) Hvor mange browsere skal jeg regne med understøtter det ?
Er det kun IE (5+ med den delkode du sendte til) ?
--
Do you also think surveillance has gone too far ?
http://www.salon.com/comics/tomo/2001/07/09/tomo/index.html
- Jesper Stocholm - http://Stocholm.dk
| |
Wired Earp (02-09-2001)
| Kommentar
Fra : Wired Earp |
Dato : 02-09-01 16:49 |
|
Jesper Stocholm wrote:
>Hvor mange browsere skal jeg regne med understøtter det ?
Det overholder disse nymodens 'standarder' og bør virke i alle
browsere der hævder det samme. IE4+, Mozilla, Netscape6+ og Opera
skulle være understøttet.
--
Wired Earp
Wunderbyte
| |
Jesper Stocholm (04-10-2001)
| Kommentar
Fra : Jesper Stocholm |
Dato : 04-10-01 11:45 |
|
Wired Earp wrote in news:Xns910E5F469B0CDwiredearp@193.88.15.201:
> Jesper Stocholm wrote:
>
>>argumentet "det er for svært" holder nu meget godt
>
> Nej, det duer ikke til noget. Her er et eksempel til morgenkaffen,
> hvis det ikke skal fylde hele skærmen er det ikke noget problem.
>
jeg har nu prøvet at implementere dit script, men det er lissom
gennemsigtigheden er røget sig en tur.
Men det pudsige er, at i det øjeblik jeg tager koden og anvender den uden
formattering, så er den fint gennemsigtig.
Hvor er det min kode fejler ?
Min kode er nu (scriptet er ikke ændret):
<div style="position: relative; width: 660px; height: 450px;
background-color: #444341; color: white; overflow: hidden;">
<div id="leftCurtain" style="position: absolute; top: 0px; left: 0px;
width: 330px; height: 450px; background-color: gray; filter
filter:Alpha(opacity=80); -moz-opacity(80%)">
</div>
<div id="rightCurtain" style="position: absolute; top: 0px; left:
330px; width: 330px; height: 450px; background-color: gray; filter
filter:Alpha(opacity=80); -moz-opacity(80%)">
</div>
<div style="height:450px;">
hej
</div>
</div>
Eksemplerne kan ses på http://stocholm.dk/test/
pft,
--
Do you also think surveillance has gone too far ?
http://www.salon.com/comics/tomo/2001/07/09/tomo/index.html
- Jesper Stocholm - http://Stocholm.dk
| |
Wired Earp (04-10-2001)
| Kommentar
Fra : Wired Earp |
Dato : 04-10-01 20:11 |
|
Jesper Stocholm wrote:
> filter filter: Alpha(opacity=80); -moz-opacity(80%)"
Øeh jeg ved ikke om jeg skrev filter filter, men det hedder det
ihvertfald ikke, det hedder bare filter. Og så hedder det -moz-
opacity: 80%; uden paranteser undskyld [-moz-opacity er til for at
transparere ting i Mozilla og Netscape]. Hvis det stadig ikke virker
når dette er fixet, så prøv at eliminere hårde linebreaks ved at samle
linjerne på een linje. Hvis det så stadig ikke virker skal du bare slå
alarm; så skal jeg nok komme efter det.
--
Wired Earp
Wunderbyte
| |
Jesper Stocholm (05-10-2001)
| Kommentar
Fra : Jesper Stocholm |
Dato : 05-10-01 10:28 |
|
Wired Earp wrote in news:Xns9130D79C615E1wiredearp@193.88.15.201:
> Jesper Stocholm wrote:
>
>> filter filter: Alpha(opacity=80); -moz-opacity(80%)"
>
> Øeh jeg ved ikke om jeg skrev filter filter, men det hedder det
> ihvertfald ikke, det hedder bare filter. Og så hedder det -moz-
> opacity: 80%; uden paranteser undskyld [-moz-opacity er til for at
> transparere ting i Mozilla og Netscape]. Hvis det stadig ikke virker
> når dette er fixet, så prøv at eliminere hårde linebreaks ved at samle
> linjerne på een linje. Hvis det så stadig ikke virker skal du bare slå
> alarm; så skal jeg nok komme efter det.
>
det hjalp ! :)
Jeg har testet det i Opera 5, IE6, NN6.1 ,NN4.7 og Mozilla 0.9.4, og det
ser faktisk kun rigtig godt ud i Opera og IE. I alle NN-varianterne [1]
bliver det højre gardin ikke "usynligt" ved udtræk - det er mere som et
stykke pap, der blot skubbes til side.
Er der noget at gøre ved det ?
[1] I NN4.7 vises det slet ikke, men det gør mig ikke så meget.
--
Jesper Stocholm
http://stocholm.dk
ICQ: 13214885
MSN Messenger: jesperstocholm at hotmail dot com
| |
Allan Vebel (05-10-2001)
| Kommentar
Fra : Allan Vebel |
Dato : 05-10-01 20:31 |
|
Jesper Stocholm <spam@stocholm.dk> skrev
> det hjalp ! :)
> Jeg har testet det i Opera 5, IE6, NN6.1 ,NN4.7 og Mozilla 0.9.4
I IE5.0 ser det skrækkeligt ud - der kommer bare noget flimmer når
gardinere trækkes fra.
Det må kunne laves meget mere elegant med Flash.
--
Allan
| |
Wired Earp (09-10-2001)
| Kommentar
Fra : Wired Earp |
Dato : 09-10-01 10:35 |
|
Jesper Stocholm wrote:
> Er der noget at gøre ved det ?
Undskyld, jeg var lige ude af den et øjeblik. Originalen
<URL: http://stocholm.dk/test/ingen_formattering.html> virker fint i
Mozilla, så jeg kan ikke helt gennemskue det. Prøv at skrive
position:absolute istedet for position:relative på den dér div som de
to gardin-div'er ligger i. Der er vist noget om at man ikke skal
placere pos-absolut div'er inde i tabeller, noget med Netscape4
vistnok, men som du selv siger er vi ligeglade med dem. Det bedste
ville være at droppe tabellerne fuldstændig, så var det ihvertfald
nemmere at regne ud hvor det er Mozilla går galt i byen.
Måske kan Allan Webels 'flimmer' skyldes at han har en langsom
computer? Det var derfor jeg frarådede hele idéen til at starte med;
men på min 700MHz går det lige an sålænge vinduet ikke er væsentligt
større. Flash løser det forøvrigt ikke, gardinerne er for store til at
det vil køre ordentligt [det vil desuden gøre siden uanvendelig i
andet end PC IE4 og opefter fordi det kræver at man piller ved Flash
objektets wmode parameter].
--
Wired Earp
Wunderbyte
| |
Jesper Stocholm (09-10-2001)
| Kommentar
Fra : Jesper Stocholm |
Dato : 09-10-01 11:54 |
|
Wired Earp wrote in news:Xns9135761A35B34wiredearp@193.88.15.201:
> Jesper Stocholm wrote:
>
>> Er der noget at gøre ved det ?
>
> Undskyld, jeg var lige ude af den et øjeblik. Originalen
> <URL: http://stocholm.dk/test/ingen_formattering.html> virker fint i
> Mozilla, så jeg kan ikke helt gennemskue det. Prøv at skrive
> position:absolute istedet for position:relative på den dér div som de
> to gardin-div'er ligger i.
Det virkede ... med det lille spøjse tillæg, at den vandrette scroll-bjælke
i NN-varianterne bliver skudt til venstre i takt med at det højre gardin
skuppes imod højre ...
<URL: http://stocholm.dk/test/nyheder.html>
> Måske kan Allan Webels 'flimmer' skyldes at han har en langsom
> computer? Det var derfor jeg frarådede hele idéen til at starte med;
> men på min 700MHz går det lige an sålænge vinduet ikke er væsentligt
> større.
det lyder rimeligt ... jeg har en 366MHz laptop, og det hakker lidt. Jeg har
da også prøvet at argumentere for, at featuren skulle fjernes ... men har
ikke rigtigt vundet gehør :)
Tak for hjælpen ...
--
Do you also think surveillance has gone too far ?
http://www.salon.com/comics/tomo/2001/07/09/tomo/index.html
- Jesper Stocholm - http://Stocholm.dk
| |
|
|