Avatar billede zuiq Nybegynder
21. januar 2003 - 16:53 Der er 23 kommentarer og
1 løsning

Func. kald

Hey,
Jeg har det her script:

    <script>
        var fadeFrame = 0;
        var tFader;
        function fadeIt(obj, steps, delay, delta) {
            if(delta>0) {obj.display = "block";}
            if(delta<0 && obj.filters.alpha.opacity==0) {obj.display="none";}
           
            obj.filters.alpha.opacity = obj.filters.alpha.opacity + delta;

            if(fadeFrame<steps+1) {
                ++fadeFrame;
                var fFadeIt = function a() { fadeIt(obj, steps, delay, delta); };
                tFader = setTimeout(fFadeIt,delay);
            }
        }
        function fadeIn (obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = (((100-(obj.filters.alpha.opacity))/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
        function fadeOut(obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = -((obj.filters.alpha.opacity/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
    </script>

Hvis jeg gerne vil kalde fadeout funktionen, har en streng der hedder "hej" som indeholder "1", pg et div layer det hedder "box1" hvordan gør jeg så?.
Normalt ville jeg gøre sådan her:

fadeOut('box'+1,40,40,0);

Hvorfor virker det ik?

Mvh.
Mads
Avatar billede zuiq Nybegynder
21. januar 2003 - 16:53 #1
ups.. jeg mente :

fadeOut('box'+hej,40,40,0);
Avatar billede Slettet bruger
21. januar 2003 - 16:55 #2
Fordi du skal give et objekt:

fadeOut(document.getElementById("box" + hej), 40, 40, 0);
Avatar billede zuiq Nybegynder
21. januar 2003 - 17:00 #3
Det virker ik
Avatar billede zuiq Nybegynder
21. januar 2003 - 17:01 #4
Hvis jeg ville bruge scriptet uden en streng, så ville jeg gøre sådan her:

<html>
    <head>
    </head>
   
    <script>
        var fadeFrame = 0;
        var tFader;
        function fadeIt(obj, steps, delay, delta) {
            if(delta>0) {obj.style.visibility="visible";}
              if(delta<0 && obj.filters.alpha.opacity==0) {obj.style.visibility="hidden";}
           
            obj.filters.alpha.opacity = obj.filters.alpha.opacity + delta;

            if(fadeFrame<steps+1) {
                ++fadeFrame;
                var fFadeIt = function a() { fadeIt(obj, steps, delay, delta); };
                tFader = setTimeout(fFadeIt,delay);
            }
        }
        function fadeIn (obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = (((100-(obj.filters.alpha.opacity))/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
        function fadeOut(obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = -((obj.filters.alpha.opacity/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
    k = 'x';
    </script>
   
   
    <body onLoad="java script:fadeOut(box, 40, 80, 6000);">
        <div onClick="java script:fadeIn(box, 40, 80, 0);"> IN </div>
        <div onClick="java script:fadeOut('bo'+k, 40, 40, 0);"> OUT </div>
        <div id="box" style="position: absolute; left:100px; top:100px; background-color:#0000ff; filter: alpha(opacity=100); color:#ffffff;">
            Hejsa
        </div>
    </body>
</html>
Avatar billede Slettet bruger
21. januar 2003 - 17:01 #5
Smid et link.

Hvilken browser tester du i (IE formoder jeg).
Avatar billede Slettet bruger
21. januar 2003 - 17:03 #6
Ok, så er det klart:

<div onClick="fadeOut(document.getElementById('box' + hej), 40, 40, 0);"> IN </div>

Der må IKKE stå "java script:" i en event-handler!
Avatar billede bearhugx Nybegynder
21. januar 2003 - 17:13 #7
phoenixv ... hvorfor må der ikke stå java script:... i en event-handler ??? Det virker jo fino hos mig ??

zuiq >> har du læst min kommentar i det andet spm ???
Avatar billede zuiq Nybegynder
21. januar 2003 - 17:21 #8
Ja, men. det der med display det er cool nok. Men du misforstod mit andet spg. Læs det lige.
Avatar billede bearhugx Nybegynder
21. januar 2003 - 17:22 #9
hej ...

Jeg har lavet to wrapper-funktioner, som gør at man også kan bruge strenge ...
  <script>
    function fadeInByName( objName, steps, delay, pause) {
      fadeIn( document.getElementById(objName), steps, delay, pause);
    }
    function fadeOutByName( objName, steps, delay, pause) {
      fadeOut( document.getElementById(objName), steps, delay, pause);
    }
   
    var hej = "1";
   
  </script>
  <body onLoad="java script:fadeOutByName('box'+hej, 10,10,2000);">
    <span onClick="java script:fadeInByName('box'+hej, 50, 20, 0);" style="border:1px #0000ff solid; cursor:hand;">- IN -</span>
    <span onClick="java script:fadeOutByName('box'+hej, 50, 20, 0);" style="border:1px #ff0000 dotted; cursor:hand;">- OUT -</span>
    <div id="box1" style="position: absolute; left:100px; top:100px; background-color:#0000ff; filter: alpha(opacity=100); color:#ffffff;">
      Hejsa
    </div>
  </body>
Avatar billede bearhugx Nybegynder
21. januar 2003 - 17:25 #10
det gør at du f.eks. kan fade 10 bokse med følgende kode (forudsat det hedder box0, box1, box2 .... box9)

for(i=0;i<10;++i) {
  fadeOutByName("box"+i, 40, 40, i*1000); //pause er med for dramatisk effekt ;-)
}
Avatar billede olebole Juniormester
21. januar 2003 - 20:25 #11
<ole>

bearhugx >> Angående 'java script:' i en event-handler, kan du se min kommentar i http://www.eksperten.dk/spm/307912

/mvh
</bole>
Avatar billede bearhugx Nybegynder
21. januar 2003 - 22:07 #12
Ok - læst og taget til efterretning ... Jeg har rettet min kode til, så der i event-handlers ikke bruges javascript-præfix ... (og ja, koden bliver ved med at virke)

Men lige som en sidebemærkning (som dog også er relevant for dette script)... er det kun IE, som understøtter filters.alpha.opacity ? -- jeg kørte det tidligere i dag i Opera6.05 og Netscape7 og der var ingen fading i nogen af dem :-( ....

/Søren
Avatar billede bearhugx Nybegynder
21. januar 2003 - 22:12 #13
En vigtig ting, som der også irriterer mig, da jeg lavede fading-routinen, er, at jeg implicit kun kan fade en ting af gangen.... Min store drøm var at kune tilføje en variablen til det objekt, man fader, så den selv holdte styr på, hvor langt den var nået i fadingen (fadeFrame og tFader variablerne)

/Søren
Avatar billede olebole Juniormester
21. januar 2003 - 22:29 #14
Ja, filtre er JScript og virker derfor kun i IE. Mozilla/NS har noget, der hedder '-moz-opacity', men det er temmelig tungt:
  http://www.javascriptkit.com/dhtmltutors/opacityns6.shtml
/mvh
Avatar billede olebole Juniormester
21. januar 2003 - 22:31 #15
Skal du tildele objektet en metode, der hholder styr på fade-rutinen, skal du bruge objektorienteret programmering (OOP). Prøv en Google-søgning, så kan du sikkert finde en tutorial
/mvh
Avatar billede bearhugx Nybegynder
21. januar 2003 - 23:16 #16
jeg har fundet en hjemmeside, hvor der bliver forklaret at man på et String objekt nemt kan tilføje properties og methods ved at bruge "den indbyggede" prototype-property... - Det er dog kun muligt hvis objektet er  et "JavaScript object that is created using a constructor function"...
(ref : http://www.developingskills.com/ds.php?article=jstrim&page=1 )

Her er det jo nogle HTMLElement-objekter (Div, Span, TD, osv) ... Er det muligt at tilføje henholdsvis "fadeFrame" og "tFader"-property direkte på disse objekter, så fade-routiene evt. kommer til at se ud som følger :
    function fadeIt(obj, steps, delay, delta) {
      if(delta>0) {obj.display = "block";}
      if(delta<0 && obj.filters.alpha.opacity==0) {obj.display="none";}
     
      obj.filters.alpha.opacity = obj.filters.alpha.opacity + delta;
     
      if(obj.fadeFrame<steps+1) {
        ++obj.fadeFrame;
        var fFadeIt = function a() { fadeIt(obj, steps, delay, delta); };
        obj.tFader = setTimeout(fFadeIt,delay);
      }
    }

jeg har forsøgt med :
    function addFadingProperties(obj) {
      obj.prototype.tFader = null;
      obj.prototype.fadeFrame = 0;
    }

men det virker ikke (jeg får at vide at prototype enten er NULL eller ikke er et objekt)

Hvis der er en af jer, som lige har svaret, ville jeg være glad - ellers bliver jeg jo nok nød til at oprette et spm her (med der tilhørende forklaring af området igen)
Avatar billede olebole Juniormester
21. januar 2003 - 23:20 #17
Nej, det er det, jeg skriver ... du må ud og finde en tutorial om OOP. Så vil du forstå, hvad der menes. Det vil føre for vidt at begynde at lære dig det her i forumet  :)
/mvh
Avatar billede olebole Juniormester
21. januar 2003 - 23:22 #18
Der menes ikke objekter i den forstand, du skriver om (div, span, td, osv). Det er ikke HTML-objekter, men HTML-elementer  ;o)
Avatar billede bearhugx Nybegynder
22. januar 2003 - 21:02 #19
zuiq >> virkede mine wrapper-metoder ????
Avatar billede zuiq Nybegynder
23. januar 2003 - 15:13 #20
Ik til mit formål.. Mærkeligt nok..
Avatar billede bearhugx Nybegynder
23. januar 2003 - 23:26 #21
Ok .. så skal jeg lige have gentaget, hvad det et, du har brug for...


Så vidt jeg kan forstå på den kode, du har leveret, sam t dit spørgsmål, så vil du gerne kunne kalde fadeOut-funktionen, hvor du angiver elementet som en streng (evt. gemt som javascript-variabel)

Har jeg ret i dette, eller ???
Avatar billede bearhugx Nybegynder
15. februar 2003 - 05:58 #22
zuig >> du har stadig 120p ude og svømme her.. lidt respons ville være dejligt :-)
Avatar billede Kengun Praktikant
18. april 2003 - 23:05 #23
Det er kanske på tide at lukke??????
Avatar billede zuiq Nybegynder
18. april 2003 - 23:21 #24
Jeg kunne ikke rigtig bruge dit svar til noget.
Men du kan få pointsne somt tak for ulejligheden :), og så kan jeg jo bruge scriptet en anden gang.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester