Avatar billede guddo Nybegynder
23. april 2002 - 13:00 Der er 22 kommentarer og
1 løsning

Fade menu!

Jeg har et spørgmål her:
Jeg er igang med at lave en menu til min hjemeside.
Den skal fade over i en anden farve, det virker også fint men inde midt i skal jeg have den omvendt (invert).
Dvs. at jeg skal have den til at fade en anden farve, det virker også fint.
Problemet er at jeg ikke kan få dem sammen i samme menu!
Jeg prøver lige at skrive det jeg har skrevet indtil videre:

<script src="fade.js" language="Javascript"></script>
<span class="yx">
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="forsiden.htm">Forsiden</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="butik.htm">Butikken</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="udlej.htm">Udlejning</a><br>
<script src="fade2.js" language="Javascript"></script>
<span class="yx2">
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx" href="udlej_ski.htm">Skibokse</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx" href="udlej_tra.htm">Trailere</a><br>
<script src="fade.js" language="Javascript"></script>
<span class="yx">
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="bilvask.htm">Bilvask</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="kontakt.htm">Kontakt os</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="job.htm">Job</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="benzin.htm">Brændstof</a><br>
</span>

Det skulle jeg gerne have til at virke...
I skal lige sige til hvis i har virkelig har brug for .css'en og fade'en!

http://www.guddo.dk/upload/

Hvis det kan hjælpe!

//Guddo
Avatar billede lyhr007 Nybegynder
23. april 2002 - 13:43 #1
Ej forstået hvad du vil...
Avatar billede guddo Nybegynder
23. april 2002 - 13:50 #2
Du kan godt se at de blå links fader ik?

Men det gør de røde ik!

Hvorfor?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 13:54 #3
Fordi dit javascript går HELE dit document igennem og sætter fader på alle a (links) så de fader farver til rød.

Da dem i midten er røde i forvejen kan du ikke se de fader fra rød til rød.

<script src="fade.js" language="Javascript"></script>

gælder for hele dit document.

prøver lige at se om jeg kan finde hvordan man fader per link.
Avatar billede guddo Nybegynder
23. april 2002 - 14:32 #4
Jamen Jamen....

Hør nu, der er 2 fade.js....
Den ene fader blå, den anden fader rød....
Det er vist noget med at den ikke kan have 2 forskellige i et..
Avatar billede lyhr007 Nybegynder
23. april 2002 - 14:36 #5
Prøv at læse koden i din fade.js fil.

Efter siden er loadet ligger den sig til alle <a .. links.

Det nytter ikke noget at indsætte den 2-3 eller flere gange den gør stadig det samme.

<script src="fade.js" language="Javascript"></script> den der kommer sidst af <script src="fade2.js" language="Javascript"></script> vil vinde og så er det kun dens farve skift PÅ ALLE LINKS der virker.

Det har intet at sige hvornår du indsætter <script src="fade.js" language="Javascript"></script> på siden.
Avatar billede guddo Nybegynder
23. april 2002 - 14:44 #6
Nej men kan jeg få dem til at fade begge?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 14:45 #7
ja, det er det jeg er ved at kigge et script til da jeg ikke ved hvordan man laver sleep i javascript
Avatar billede guddo Nybegynder
23. april 2002 - 14:46 #8
k
Avatar billede lyhr007 Nybegynder
23. april 2002 - 15:21 #9
Ok har fikset din kode så den gør det du vil:

HTML delen:

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body                {scrollbar-face-color: #c0c0c0; scrollbar-track-color: #8A9197; scrollbar-shadow-color: #808080;
                    scrollbar-3dlight-color: #003366; scrollbar-arrow-color: #cc3333;}
</style>
<title>menu</title>
</head>
<body bgcolor="#CCCCCC">
<script src="fade.js" language="Javascript"></script>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="forsiden.htm">Forsiden</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="butik.htm">Butikken</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="udlej.htm">Udlejning</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx" href="udlej_ski.htm">Skibokse</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx" href="udlej_tra.htm">Trailere</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="bilvask.htm">Bilvask</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="kontakt.htm">Kontakt os</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="job.htm">Job</a><br>
&nbsp;&nbsp;&nbsp;&raquo; <a target="load" class="yx2" href="benzin.htm">Brændstof</a><br>

</body>
</html>





JavaScript delen:

/*****************************************\
||      Fade Script Version 3.1        ||
||  http://anarchos.xs.mw/fade.phtml    ||
||            (c) July 2001              ||
|| _____________________________________ ||
|| Created by:                          ||
|| Anarchos    > anarchos.xs.mw          ||
|| _____________________________________ ||
|| auto-startColor by Mike West          ||
|| mike@westman.org                      ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix        ||
|| http://www.princefari.com            ||
|| _____________________________________ ||
|| Color conversion from decimal to      ||
|| hex (dehexize function) by:          ||
|| Litejet > litejet@hotmail.com        ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by:    ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| _____________________________________ ||
|| domouseover/out based on scripts by  ||
|| The Shadow  > www.icon.co.za/~andrewk ||
||                                      ||
\*****************************************/

/*************
**** <config>
**/

fadeColor = "#cc3333";
fadeColor2 = "#FFFFFF"; // color to fade to 2
//fadeColor = "#cc3333";
stepIn = 20; // delay when fading in
stepOut = 30; // delay when fading out

/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = true; 

/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = false;

/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;

/**
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text.  This means
that you can't have <b>'s, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click</b> here</a>

Have fun!
-Anarchos-

**
**** </install>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

fadeColor = dehexize(fadeColor.toLowerCase());
fadeColor2 = dehexize(fadeColor2.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
    var colorArr = new makearray(3);
    for (i=1; i<7; i++){
        for (j=0; j<16; j++){
            if (Color.charAt(i) == hexa[j]){
                if (i%2 !=0)
                    colorArr[Math.floor((i-1)/2)]=eval(j)*16;
                else
                    colorArr[Math.floor((i-1)/2)]+=eval(j);
            }
        }
    }
    return colorArr;
}

function domouseover() {
    if(document.all){
        var srcElement = event.srcElement;
        if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
                if (!srcElement.startColor) {
                    srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
                    srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
                }
                var link = (macCompat? srcElement.name: srcElement.uniqueID);
                if (link && srcElement.className != "yx") fade(srcElement.startColor,fadeColor,link,stepIn);               
                else fade(srcElement.startColor,fadeColor2,link,stepIn);       
        }
    }
}

function domouseout() {
    if (document.all){
        var srcElement = event.srcElement;
        if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
            var link = (macCompat? srcElement.name: srcElement.uniqueID);
            if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
            else fade(fadeColor2,srcElement.startColor,link,stepIn);
        }
    }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
      return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e,element,step) {
    var sr = s[0]; var sg = s[1]; var sb = s[2];
    var er = e[0]; var eg = e[1]; var eb = e[2];
   
    if (fadeId[0] != null && fade[0] != element && eval(fadeId[0])) {
        var orig = eval(fadeId[0]);
        setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
        var i = 1;
        while(i < fadeId.length) {
            clearTimeout(fadeId[i]);
            i++;
        }
    }
       
    for(var i = 0; i <= step; i++) {
        fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
            step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
            ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
    }
    fadeId[0] = element;
}





Som du kan se er der i toppen nu 2 farver, den ene bruges altid pånær hvis linket har class == 'yx' så bruger den den anden farve.

Testet og det virker.
Avatar billede guddo Nybegynder
23. april 2002 - 15:37 #10
prøver lige!
Avatar billede guddo Nybegynder
23. april 2002 - 15:45 #11
Det virker fint men hvis du lige kigger på www.guddo.dk/upload/ og ser at de røde fader meget hurtigere ud!

Hvad kan det være?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 15:53 #12
Scriptet virker sådan:

per 1 tidsenhed kommer den 1 farve trin tættere på.

Dette betyder at der går længere tid hvis der er større forskel imellem farverne.
Avatar billede guddo Nybegynder
23. april 2002 - 16:24 #13
hvad?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 16:27 #14
ex. vi skal fra farve 000000 til 000003 her vil den tage 3 skridt nemlig: 000001->000002->000003 hvert af disse skridt tager det samme tid (f.esk. 1 milisekund).
Hvis vi nu skal fra 000000 til 000009 så er det 9 skridt og vi bruger nu 9 milisekunder.

Det er ikke helt lige så simpelt men princippet er det samme.
Avatar billede guddo Nybegynder
23. april 2002 - 16:28 #15
jamen hvorfor fader den blå så hurtigere end den røde?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 16:33 #16
ahh nu er jeg med :)

Det gør den heller ikke, det er syns-bedrag.

Det er nøjagtigt den samme funktion (og dermed tidsenhed) der bliver brugt og der er vel lige langt fra blå-rød som rød-blå.

Det er sikkert lettere at se forskel på lyse farver end mørke?
Avatar billede guddo Nybegynder
23. april 2002 - 16:37 #17
Ahh... OK..
Kan du ikke tage alt det unødvendige væk i fade.jss, så skal du nok få dine points...

Husk og besvar som svar
Avatar billede lyhr007 Nybegynder
23. april 2002 - 16:39 #18
Hov har da lavet en fejl når man fjerne musen. 2secs.
Avatar billede lyhr007 Nybegynder
23. april 2002 - 16:41 #19
function domouseout() {
    if (document.all){
        var srcElement = event.srcElement;
        if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
            var link = (macCompat? srcElement.name: srcElement.uniqueID);
            if (link && srcElement.className != "yx") fade(fadeColor,srcElement.startColor,link,stepIn);
            else fade(fadeColor2,srcElement.startColor,link,stepIn);
        }
    }
}

sæt den ind i stedet for den der var der.
Avatar billede guddo Nybegynder
23. april 2002 - 16:49 #20
Når du ser på menuen ik?

Så synes jeg at man skal kunne trykke på den så den kommer ned... Det kan også gøres med noget java ik?

Jeg mener jeg har set det!

http://www.slan.dk/aof/    <-- Ovre i menuen!

Kan du hjælpe?
Avatar billede lyhr007 Nybegynder
23. april 2002 - 16:56 #21
1: Det er javascript og ikke java, hvis nogen af dem fra Java gruppen høre du kalder siger det Java får de et føl! :)

Og jo det kan sagtens lade sig gøre, men jeg syntes vi har bevæget os ret langt væk fra det du spg. om hjælp til.

Så søg på nettet www.google.com eller her på eksperten efter "foldout menu" eller noget lign.

Hvis du for problemmer med den må du oprette et spg mere.

Det er ikke for at lyde hård eller være et dumt svin, men jeg syntes faktisk jeg har besvaret dit spg. nu :)
Avatar billede guddo Nybegynder
23. april 2002 - 17:04 #22
Det har du da helt sikkert!
Avatar billede guddo Nybegynder
23. april 2002 - 17:14 #23
http://www.eksperten.dk/spm/202184

Hvis du vil ha' de points om menuen (foldout)...
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
Kurser inden for grundlæggende programmering

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