Avatar billede silmarillion Juniormester
02. juni 2012 - 00:18 Der er 6 kommentarer og
1 løsning

Konflikt mellem scripts

Hej Eksperter

Til en menu skal jeg bruge 3 stk. javascripts, to der skifter baggrundsbillede, og et der laver en dropdown menu.

Hver for sig virker de fint, men hvis de kombineres i en menu, hvor man skal have et baggrundsbillede der skifter og en dropdown,  så vises dropdownmenuen ikke.

Forslag til hvordan jeg får det til at virke?

De første to koder er til at skifte baggrundsbilledet:

-----------------------------------------------------------

$(function(){

    $('#menu span')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(0 -118px)"}, {duration:800})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:800})
        })
});

-----------------------------------------------------------

(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

          function toArray(strg){
              strg = strg.replace(/left|top/g,'0px');
              strg = strg.replace(/right|bottom/g,'100%');
              strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
              var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
              return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
          }
        }
    });
})(jQuery);

-----------------------------------------------------------

$(function () {
   
    $('.dropdown').each(function () {
        $(this).parent().eq(0).hoverIntent({
            timeout: 100,
            over: function () {
                var current = $('.dropdown:eq(0)', this);
                current.slideDown(100);
            },
            out: function () {
                var current = $('.dropdown:eq(0)', this);
                current.fadeOut(200);
            }
        });
    });
   
    $('.dropdown a').hover(function () {
        $(this).stop(true).animate({paddingLeft: '35px'}, {speed: 100, easing: 'easeOutBack'});
    }, function () {
        $(this).stop(true).animate({paddingLeft: '0'}, {speed: 100, easing: 'easeOutBounce'});
    });
   
    pic1 = new Image(310, 672);
    pic1.src = "images/dropdown.png";
   
    pic2 = new Image(4, 40);
    pic2.src = "images/dropselectionleft.png";
   
    pic3 = new Image(394, 40);
    pic3.src = "images/dropselectionright.png";
});
Avatar billede olebole Juniormester
02. juni 2012 - 17:01 #1
<ole>

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede silmarillion Juniormester
02. juni 2012 - 17:59 #2
Her er der et par links

På denne side virker det med at animere baggrundsbilledet, men dropdownmenuen virker ikke:

http://fotohjemmesiden.dk/test/Ny%20mappe/fancy%20-%20Copy/fancydropdown.html

Her virker dropdown menuen, for jeg har slettet

<script type="text/javascript" src="/test/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/test/jquery.bgpos.js"></script>

http://fotohjemmesiden.dk/test/Ny%20mappe/fancy%20-%20Copy/fancydropdown%20-%20Copy.html
Avatar billede olebole Juniormester
02. juni 2012 - 18:12 #3
For det første kan du ikke udvikle webkode uden at have fejlmeldinger i din browser slået til - og holde et godt øje med, om der udløses fejl.

Der udløses en fejl i dokumentet fancydropdown.js i linje 41. Det skyldes formodentlig, du importerer dine JS-filer i forkert rækkefølge.

Begynd med at rette dine mappenavne til noget mere realistisk. Det betyder: Ingen specialtegn - herunder mellemrum. Skriv så noget i stil med:

<link rel="stylesheet" href="/test/Ny_mappe/fancy/fancydropdown.css">
<script type="text/javascript" src="/test/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/test/Ny_mappe/fancy/fancydropdown.js"></script>
<script type="text/javascript" src="/test/jquery.bgpos.js"></script>
Avatar billede silmarillion Juniormester
02. juni 2012 - 21:20 #4
Det virker når jeg importere JS filerne i den rækkefølge du skriver.
Jeg har også rettet mappe og filnavnene, men det var rækkefølgen der fik det til at virke.

Hvis du skriver et svar, får du point.

kan du også forklarer hvorfor rækkefølgen er afgørende for om dette virker?
Avatar billede olebole Juniormester
02. juni 2012 - 21:51 #5
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)

Denne kode udløser en fejl:

<script type="text/javascript">
foo();
</script>

<script type="text/javascript">
function foo() {
    alert("Foo blev kaldt");
}
</script>

- men det gør denne ikke:

<script type="text/javascript">
function foo() {
    alert("Foo blev kaldt");
}
</script>

<script type="text/javascript">
foo();
</script>

JavaScript/browseren læser ligesom os - fra toppen og ned. I første eksempel herover er funktionen foo endnu ikke defineret, når jeg kalder den. Det er den i det andet eksempel.

Filen jquery-1.2.6.min.js definerer en hel masse funktioner, som de andre filer gør brug af. De skal være defineret, før de forsøges anvendt.
Avatar billede silmarillion Juniormester
02. juni 2012 - 21:58 #6
Ok, jeg takker for hjælpen
Avatar billede olebole Juniormester
02. juni 2012 - 22:01 #7
You're welcome  =)
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