Hvorfor funker dette scriptet bare i Opera?

dahwan · 17. juni 2008

Jeg skrev dette scriptet (Dagevis med testing - jeg veit, jeg sux) men det fungerer bare i Opera. I firefox vises ikke bakgrunnen til knappene, og i IE fungerer ikke engang css: inline-block.

javascript.js

function load() {
 var items = getElementsByClass('menuItem');
 
 for(var i = 0; i < items.length; i++) {
     items[i].style.backgroundImage = "url(images/buttons/btn.png)";
     items[i].setAttribute("onmouseover", "hover(" + items[i].getAttribute("id") + ", 'images/buttons/btnHover.png')");
     items[i].setAttribute("onmouseout", "hover(" + items[i].getAttribute("id") + ", 'images/buttons/btn.png')");
     items[i].setAttribute("onmousedown", "hover(" + items[i].getAttribute("id") + ", 'images/buttons/btn.png')");
     items[i].setAttribute("onmouseup", "hover(" + items[i].getAttribute("id") + ", 'images/buttons/btnHover.png')");
 }

 var btn = new Image();
 btnHome.src = "images/buttons/btn.png";

 var btnHover = new Image();
 btnHome_Hover.src = "images/buttons/btnHover.png";
}
      
function hover(btn, newSrc) {
 btn.style.backgroundImage = "url(" + newSrc + ")";
}

function getElementsByClass(class) {
 var allTags = document.all;
 var e = new Array();
 
 for(i = 0, e_num = 0; i < allTags.length; i++)
     if(allTags[i].getAttribute('class'))
         if(allTags[i].getAttribute('class') == class) {
             e[e_num] = allTags[i];
             e_num++;
         }
 
 return e;
}

index.php

<html>
 <head>
 
     <link rel="stylesheet" href="css.css" />
  
     <script src="javascript.js"></script>
 
 </head>
 
 <body onload="load()">
     <div id="page">
         <div id="header"> &nbsp </div>
      
         <div class="menuItem" id="btnHome">
             Home
         </div>
      
         <div class="menuItem" id="btnMyWork">
             My work
         </div>
      
         <div class="menuItem" id="btnAboutMe">
             About me
         </div>
      
         <div id="content">
             <p>
                 I'm content!!!
             </p>
         </div>
     </div>
 </body>
</html>

Prøv siden i Opera og i Firefox, så skjønner dere hva jeg mener

____________________________

og i samme slengen kan jeg vel spørre hvorfor ikke

vertical-align: middle;
text-align: center;

Fungerer. Teksten blir midtstilt horisontalt, men IKKE vertikalt. HJELP

EDIT: Oppdatert adresse i "prøv siden"

Endret 18. juni 2008 av dahwan

magicgunnar · 18. juni 2008

Har nettopp oppdatert til Firefox 3, og siden firebug-extensionen ikke funker for 3'ern ennå, så tør jeg ikke si så mye ennå, men i opera 9.5 får jeg følgende feilmelding:

JavaScript - http://85.167.73.159/index.php
Event thread: load

Error:

name: ReferenceError

message: Statement on line 16: Undefined variable: btnHome_Hover

Backtrace:

Line 16 of linked script http://85.167.73.159/javascript.js: In function load

btnHome_Hover.src = "images/buttons/btnHover.png";

Line 1 of function script

load()

...

stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

og i Firefox3-webdeveloper-extension:

allTags is undefined:
for(i = 0, e_num = 0; i < allTags.length; i++)

så spørsmålet mitt blir da: Finnes document.all ?

dahwan · 18. juni 2008

Seff. Det fungerte jo. Jeg fikk alle tags i dokumentet.

cbastus · 20. juni 2008

så spørsmålet mitt blir da: Finnes document.all ?

Seff. Det fungerte jo. Jeg fikk alle tags i dokumentet.

document.all fungerer ikke likt på alle platformer, bruk heller en DOM standard som getElementsByTagName

Forøvrig kan du spesifisere det ennå mer med document.body.getElementsByTagName('*'); så slipper du få med alle tagger fra <head> i arrayen din, i dette tilfellet <link> og <script>. Du kan også byttes ut * med tagen du ønsker og/eller document.body med et annet element.

Jeg får ikke kontakt med serveren din, så CSS kan jeg ikke kommentere på. Men jeg kan anta at det har noe med hvilke element du bruker atributten på, vertical-align fungerer litt annerledes enn forventet..

Forøvrig ville jeg sjekket ut www.w3schools.com, MS Developer Network og Mozilla Developer Center for mer informasjon.

dahwan · 27. juni 2008

getElementsByTagName('*');

fungerte ikke. Veit ikke hvorfor.

Logg inn

Hvorfor funker dette scriptet bare i Opera?

Anbefalte innlegg

dahwan

Lenke til kommentar

Videoannonse

magicgunnar

Lenke til kommentar

dahwan

Lenke til kommentar

cbastus

Lenke til kommentar

dahwan

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer