Avatar billede martins Nybegynder
19. marts 2005 - 19:56 Der er 14 kommentarer og
1 løsning

Tekstskift + fade ind og ud

Hej eksperter.

Jeg har brug for en, der har forstand på javascript. Det jeg vil opnå er følgende: En funktion der skifter mellem 2 tekster (er lavet og fungerer). Problemer er så, at jeg gerne vil have teksterne til at fade ind og ud når de skifter.

Jeg har lavet følgende: (Håber i kan tyde det, det er skrevet ind i en Literal, da jeg skal udskrive det codebehind i en ASP.Net fil).

Literal js = new Literal();
js.Text += "<script type='text/javascript'>\n";

js.Text += "var arrText = new Array();\n";
js.Text += "arrText[0] = 'Tekst1';\n";
js.Text += "arrText[1] = 'Tekst2';\n";
js.Text += "var textToShow = 0;\n";

js.Text += "function fadeOut()\n";
js.Text += "{\n";
js.Text += "var thDiv = document.getElementById('text_holder_div');\n";
js.Text += "if(thDiv.filters.alpha.opacity <= 100)\n";
js.Text += "{\n";
js.Text += "thDiv.filters.alpha.opacity += 5;\n";
js.Text += "setTimeout('fadeOut()',100);\n";
js.Text += "}\n";       
js.Text += "};\n";

js.Text += "function fadeIn()\n";
js.Text += "{\n";
js.Text += "var thDiv = document.getElementById('text_holder_div');\n";
js.Text += "if(thDiv.filters.alpha.opacity >= 0)\n";
js.Text += "{\n";
js.Text += "thDiv.filters.alpha.opacity -= 5;\n";
js.Text += "setTimeout('fadeIn()',100);\n";   
js.Text += "}\n";   
js.Text += "};\n";

js.Text += "function showText()\n";
js.Text += "{\n";
js.Text += "var thDiv = document.getElementById('text_holder_div');\n";
js.Text += "fadeOut(thDiv);\n";
js.Text += "thDiv.innerHTML = arrText[textToShow];\n";
js.Text += "fadeIn(thDiv);\n";
js.Text += "textToShow = (++textToShow) % arrText.length;\n";
js.Text += "t = window.setTimeout('showText()', 10*1000);\n";
js.Text += "};\n";

js.Text += "</script>\n";
Avatar billede martins Nybegynder
19. marts 2005 - 19:57 #1
Glemte måske at nævne, at der slet ikke sker en fading. Teksterne skifter helt fint som de skal.
Avatar billede martins Nybegynder
19. marts 2005 - 20:02 #2
Ja ok.. så kan jeg se, at jeg kalder mine funktioner (fadeOut og fadeIn) med min div som parameter - men det er bare fordi jeg har testet med lidt af hvert. Se venligst bort fra parametret.
Avatar billede roenving Novice
19. marts 2005 - 20:04 #3
Prøv at kigge på den, jeg har her: http://roenving.users.whitehat.dk/WD5Opacity.html, den dur også på andre browsere end M$IE !-)

-- eller kig i http://www.eksperten.dk/spm/481785, hvor der også var noget fade-noget ...

I begge tilfælde er det billeder, som fader, men de kan umiddelbart udskiftes med et andet element !o]
Avatar billede martins Nybegynder
19. marts 2005 - 20:36 #4
Jeg kigger... :-)
Avatar billede martins Nybegynder
19. marts 2005 - 21:03 #5
Dit script ser ud til at gøre nøjagtigt hvad jeg vil, jeg kan bare ikke få det til at fungere, når jeg sætter det ind i mit dokument :-) Gider du prøve at se om du kan finde fejlen? Fejlen jeg får er: "OpC[...] er null eller ikke et objekt."

js.Text += "var OpC = new Array();\n";
js.Text += "var endOpC = new Object();\n";
js.Text += "var ie = (document.all)?true:false;\n";
js.Text += "var moz = (navigator.userAgent.indexOf('Gecko')>-1);\n";

js.Text += "function startOpChange(elm,end,tim){\n";
    js.Text += "if(!ie && !moz){\n";
        js.Text += "return;\n";
    js.Text += "}\n";

    js.Text += "var idx = OpC.length;\n";
    js.Text += "for(var i=0;idx>i;i++){\n";
        js.Text += "if(OpC[i][0]==elm){\n";
            js.Text += "clearInterval(OpC[i][4]);\n";
            js.Text += "idx = i;\n";
            js.Text += "break;\n";
        js.Text += "};\n";
        js.Text += "OpC[idx] = new Array();\n";
    js.Text += "};\n";
    js.Text += "if(idx==0){\n";
    js.Text += "OpC[idx] = new Array();\n";
    js.Text += "};\n";

    js.Text += "if(ie){\n";
        js.Text += "actOp=elm.filters.alpha.opacity;\n";
    js.Text += "}else{\n";
        js.Text += "actOp=(elm.style.MozOpacity*100);\n";
    js.Text += "}\n";

    js.Text += "if(actOp!=end)\n";
    js.Text += "{\n";
        js.Text += "OpC[idx][0]=elm;\n";
        js.Text += "OpC[idx][1]=actOp;\n";
        js.Text += "OpC[idx][2]=end;\n";
        js.Text += "OpC[idx][3]=(end>actOp)?1:-1;\n";
        js.Text += "var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));\n";
        js.Text += "OpC[idx][4]=setInterval(\"opChange(idx)\",delayTime);\n";
    js.Text += "};\n";
js.Text += "};\n";

js.Text += "function opChange(idx){\n";
    js.Text += "OpC[idx][1]+=OpC[idx][3];\n";
    js.Text += "if(ie){\n";
        js.Text += "OpC[idx][0].filters.alpha.opacity=OpC[idx][1];\n";
    js.Text += "}else{\n";
        js.Text += "OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);\n";
    js.Text += "}\n";
   
    js.Text += "if(OpC[idx][1]==OpC[idx][2]){\n";
        js.Text += "clearInterval(OpC[idx][4]);\n";
        js.Text += "return;\n";
    js.Text += "};\n";
js.Text += "};\n";
Avatar billede roenving Novice
19. marts 2005 - 21:12 #6
Det er nok fordi du har fkernet en ganske lille detalje, som er _meget_ vigtig:

    js.Text += "if(actOp!=end)\n";
    js.Text += "{\n";
        js.Text += "OpC[idx][0]=elm;\n";
        js.Text += "OpC[idx][1]=actOp;\n";
        js.Text += "OpC[idx][2]=end;\n";
        js.Text += "OpC[idx][3]=(end>actOp)?1:-1;\n";
        js.Text += "var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));\n";
        js.Text += "OpC[idx][4]=setInterval('opChange('+idx+')',delayTime);\n";
    js.Text += "};\n";
js.Text += "};\n";
Avatar billede martins Nybegynder
19. marts 2005 - 21:36 #7
Det var bestemt ikke min mening at ændre i dit script, så det har været et uheld. Men med din rettelse får jeg nu ingen fejl, dog bliver opacity stadig ikke ændret :/
Avatar billede roenving Novice
19. marts 2005 - 21:37 #8
Kan du prøve at linke til en udgave ?-)
Avatar billede martins Nybegynder
19. marts 2005 - 21:39 #9
Ja, hvis du har en mail eller en messenger adresse :-) Det er ikke lige en opgave alle skal kunne se ind til videre.
Avatar billede roenving Novice
19. marts 2005 - 21:41 #10
-- min mail-adresse er ikke svær at finde, men ellers er det mit brugernavn på gmail ...
Avatar billede martins Nybegynder
19. marts 2005 - 21:44 #11
Mail sendt
Avatar billede roenving Novice
19. marts 2005 - 21:59 #12
Det er fordi, du skal have forskellige elementer, for det er hele elementet, som udfører ind- og udfadingen !-)

Så showtext således:

var textToShow = 0;
var numDiv = 1;
function showText()
{
var thDiv = document.getElementById('text_holder_div'+numDiv);
startOpChange(thDiv,0,1);
numDiv = numDiv==0?1:0;
var thDiv = document.getElementById('text_holder_div'+numDiv);
textToShow = (++textToShow) % arrText.length;
thDiv.innerHTML = arrText[textToShow];
startOpChange(thDiv,100,1);
t = window.setTimeout('showText()', 2000);
};

-- og så dine divs således:

<div id='text_holder_div' style="position:relative">
  <div id='text_holder_div0' style='position:absolute;filter:alpha(opacity=0);-moz-opacity:0;'></div>
  <div id='text_holder_div1' style='position:absolute;filter:alpha(opacity=0);-moz-opacity:0;'></div>
</div></td>
Avatar billede martins Nybegynder
20. marts 2005 - 21:25 #13
Mange tak for din hjælp. Det virker perfekt. Lig et svar, så skal du få point :-)
Avatar billede roenving Novice
20. marts 2005 - 21:26 #14
Velbekomme '-)
Avatar billede roenving Novice
20. marts 2005 - 21:34 #15
-- og tak for point ;~}
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