Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Sřg
 

Home Made Fade :D

Hej Rowl'er.

Jeg har i lang tid nu kæmpet med at lave en lightbox til mit galleri.
Men den fader kun 1 gang og laver værdien om til 1, men den skal forsætte til 9.

Jeg har prøvet at printe værdien og den når kun til 1 også stopper den.
Ved ikke hvad jeg gør galt her er koden:

  1. function Fade()
  2. {
  3.     var ie = document.getElementById('boks_baggrund').style.filter;

  5.     if(ie <= 9)
  6.     {
  7.         ie = ie+1*1;

  9.         document.getElementById('boks_baggrund').style.filter="alpha(opacity="+ie+")";
  10.         
  11.         setTimeout("Fade()",20);
  12.     }
  13. }

Håber at der er en eller anden som kan hjælpe.
OBS! Gider ikke bruge jquery okay lad os vær med at diskutere om det ;-)

Med venlig hilsen
- Lasse.

Pointfordeling

Forfatteren har lukket trĺden og har valgt at fordele de 5 point sĺledes:
Nikolaj 5 point
Oprettet af:
Tudeprinsen

Javascript

Point afsat: 5

Lukket
12:35 05/07/2010
Jeg kan umiddelbart ikke finde mening ved din funktion.

Prøv evt. at kigge koden igennem igen, da jeg godt tror du kan finde ud af det.

Har selv lavet en fader i javascript.
Oprettet af:
Nikolaj

Kommentar
12:39 05/07/2010
Hmm problemet er at jeg kigget på det længe i flere dage.

Her er den med kommentar til:

  1. function Fade() // Laver funktionen fade
  2. {
  3.     var ie = document.getElementById('boks_baggrund').style.filter; // henter fade værdien fra filter og giver variablen ie værdien.
  4.     
  5.     if(ie <= 9) // hvis variablen ie er mindre end 9 gør det som står i if sætningen
  6.     {
  7.         ie = ie+1*1; // ændre ie's værdi til dens nuværende + 1 * 1.
  8.         
  9.         document.getElementById('boks_baggrund').style.filter="alpha(opacity="+ie+")"; // opdatere filters værdi til ie's værdi.
  10.         setTimeout("Fade()",1000); // Refresher funktionen fade efter hvert sek
  11.     }
  12. }
Oprettet af:
Tudeprinsen

Kommentar
12:44 05/07/2010
The source code looks like this:
  1. <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
  2. onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
  3. onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

  5. <img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
  6. onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
  7. onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.
Taget fra:
http://www.w3schools.com/Css/css_image_transparency.asp

Kort sagt betyder det at: Firefox køre med værdier fra [0-100] og IE køre med værdier fra [0-1] og at Firefox smider det på filters hvor IE smider det på style. Derfor skal du lave en IF sætning der tjekker brugerns browser type og derefter køre den korrekte stump kode
Oprettet af:
Bast

Afslĺet svar
13:06 05/07/2010
Bast skrev kl. 13:06 d. 05/07/2010
Kort sagt betyder det at: Firefox køre med værdier fra [0-100] og IE køre med værdier fra [0-1] og at Firefox smider det på filters hvor IE smider det på style. Derfor skal du lave en IF sætning der tjekker brugerns browser type og derefter køre den korrekte stump kode

Undskyld mig men tror du har været lidt for hurtigt, da internet explorer benytter sig af filter og alpha, imens firefox bruger opacity.
Jeg har allerede lavet en anden fade med firefox og opacity istedet for filter og alpha og det virker fint.

Og 0-100 er internet explorer og opacity som bruges til firefox bruger 0-1 ;b
Men jeg får internet explorer til at fade en smule den når til 1 også er baggrunden lidt grå men ikke meget og har valgt en mørke grå.

Så forstår ikke hvorfor den stopper ved 1 da den skulle kunne til 100.
Oprettet af:
Tudeprinsen

Kommentar
13:17 05/07/2010
Var lidt for hurtig.

Som bast siger tager du værdien fra filters, og ikke gennemsigtigheden
Sidst redigeret 13:35 05/07/2010
Oprettet af:
Nikolaj

Accepteret svar

Point modtaget: 5
13:32 05/07/2010
Virker ikke nikolaj.
Sidst redigeret 13:38 05/07/2010
Oprettet af:
Tudeprinsen

Kommentar
13:33 05/07/2010
Jeg tror den stopper ved 1, fordi document.getElementById('boks_baggrund').style.filter er et objekt og ikke en værdi =), prøv med document.getElementById('boks_baggrund').style.filters.alpha.opacity og ja, fik vist byttet rundt på IE og FF =)
Oprettet af:
Bast

Kommentar
13:34 05/07/2010
Skal lige have noget morgenmad, så skal jeg nok hurtigt kode det, så det også er pæn kodet.
Oprettet af:
Nikolaj

Kommentar
13:36 05/07/2010
Bast skrev kl. 13:34 d. 05/07/2010
Jeg tror den stopper ved 1, fordi document.getElementById('boks_baggrund').style.filter er et objekt og ikke en værdi =), prøv med document.getElementById('boks_baggrund').style.filters.alpha.opacity og ja, fik vist byttet rundt på IE og FF =)

Øhm der er intet galt med min document.getElementById('boks_baggrund').style.filter den giver faktisk værdien 0.
Og det er den faktisk i mine css fil, så det virker altså fint med filter der er intet galt med det.

Derimod virker din altså ikke ;-)
Sidst redigeret 13:40 05/07/2010
Oprettet af:
Tudeprinsen

Kommentar
13:39 05/07/2010
Nikolaj skrev kl. 13:36 d. 05/07/2010
Skal lige have noget morgenmad, så skal jeg nok hurtigt kode det, så det også er pæn kodet.

Morgenmad klokken halv to, man kan vist se der er nogle der har ferie xD

Ej undskyld Offtopic :-D
Oprettet af:
Mads

Kommentar
13:50 05/07/2010
Det er mærkeligt at min kode ikke virker :-S
Oprettet af:
Tudeprinsen

Kommentar
14:26 05/07/2010
Mads skrev kl. 13:50 d. 05/07/2010
Nikolaj skrev kl. 13:36 d. 05/07/2010
Skal lige have noget morgenmad, så skal jeg nok hurtigt kode det, så det også er pæn kodet.

Morgenmad klokken halv to, man kan vist se der er nogle der har ferie xD

Ej undskyld Offtopic :-D
Roskildefestival gør folk onde ting..

Tudeprinsen skrev kl. 14:26 d. 05/07/2010
Det er mærkeligt at min kode ikke virker :-S
Du kan jo ikke finde gennemsigtigheden ved kun at hente fra filters?

  1. function Fade (ie)
  2. {
  3.     if( ie == "" )
  4.     {
  5.         ie    = 0;
  6.     }

  8.     if( ie <= 9 )
  9.     {
  10.         ie    = (ie*1) + 1;
  11.         
  12.         document.getElementById('boks_baggrund').style.filter    = "alpha(opacity=" + ie + ")";

  14.         setTimeout("Fade(" + ie + ")", 1000);
  15.     }
  16. }
Oprettet af:
Nikolaj

Kommentar
14:36 05/07/2010
Og hvorfor så ikke det?
Det er ligesom den som gør at noget bliver gennemsigtigt?
Oprettet af:
Tudeprinsen

Kommentar
14:38 05/07/2010
Fordi filters ikke kun er til opacity.
Det er jo logik at du ikke bare kun kan tage fra filter
Oprettet af:
Nikolaj

Kommentar
14:45 05/07/2010
Nikolaj skrev kl. 14:45 d. 05/07/2010
Fordi filters ikke kun er til opacity.
Det er jo logik at du ikke bare kun kan tage fra filter

øh o.o
Oprettet af:
Tudeprinsen

Kommentar
15:07 05/07/2010
Jeg har altså stadig ikke fået den til at virke, er der ingen som kan se eller ved hvad fejlen er ...?
Oprettet af:
Tudeprinsen

Kommentar
15:08 10/07/2010
du kan faktiskogså bare bruge:
  1. <div onlick="javascript:('#lolwutthefuk').toggle('blind');">LOL</div>
  2. <div id="lolwutthefuk" style="display: none;">
  3. HEJ
  4. </div>
Oprettet af:
Perfektion

Kommentar
16:11 10/08/2010
Perfektion skrev kl. 16:11 d. 10/08/2010
du kan faktiskogså bare bruge:
  1. <div onlick="javascript:('#lolwutthefuk').toggle('blind');">LOL</div>
  2. <div id="lolwutthefuk" style="display: none;">
  3. HEJ
  4. </div>

Nej jeg har fået lavet min egen fade i javascript, og gider ikke bruge jquery.
Oprettet af:
Tudeprinsen

Kommentar
19:32 10/08/2010
Du skal vćre oprettet og logget ind for at svare pĺ en trĺd
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes