[JS] Afbeelding verkleinen

[kleautviool]

Ik heb een heel wazig probleem. Ik ben bezig met een functie te maken die door alle afbeeldingen op een pagina heenloopt en controleert of de breedte van de afbeelding niet te groot is. Als de breedte te groot is, moet de afbeelding in de breedte aangepast worden. Het wazige is dat lokaal alles prima werkt, alleen zodra ik het online ga testen werkt het niet. In de javascript-console van Firefox krijg ik dit terug:

Error: iD has no properties

op deze regel:

code:

if(!iD.indexOf("forum"))  {

Ik heb al vanalles geprobeerd om het werkend te krijgen, maar niks lukt. Als ik onder de for loop de variabele i alert, krijg ik lokaal gewoon 3 alerts met 0,1,2 erin terug, maar test ik dit op internet, dan krijg ik in firefox 0 terug (en in IE 0 / aantal afbeeldingen). Dus daar zit al een fout, alleen welke?
Ook krijg ik als ik onder iD = img.getAttribute('id'); de variabele iD alert, lokaal gewoon keurig alle id's van de afbeeldingen terug, maar op internet krijg ik in firefox niks terug, en in IE wel gewoon alle id's.
Dit is nu mijn code:

JavaScript:

<script type="text/javascript">
  function cropImage()  {
    maxWidth = 550;
    for(i=0; i<document.images.length; i++)  {
      img = document.images[i];
      oBreed = img.width;
      iD = img.getAttribute('id');
      nBreed = img.getAttribute('width');
      if(!iD.indexOf("forum"))  {
        if(oBreed > maxWidth)  {
          img.setAttribute('width',maxWidth);
        }
      }
    }
  }
  window.onload = function()  {
    cropImage()
  };
</script>

Wat ik trouwens zelf al vrij vaag aan deze code vind is dit: if(!iD.indexOf("forum")) {. Nu zou je denken (althans ik denk dat ) dat de bewerking onder deze if() alleen uitgevoerd wordt als er geen forum in het id van de afbeelding voorkomt, maar zonder dat uitroepteken werkt de functie helemaal niet.

Maar om een lang verhaal kort te maken, weet iemand nu wat ik fout doe, en waarom het lokaal wél werkt, en op internet niet?

[crisp]

1) check eerst eens of je ueberhaupt wel een id terugkrijgt; oftewel controleer of getAttribute niet toevallig null teruggeeft
2) kijk eens hoe indexOf werkt; een index van 0 betekent dat je string begint met 'forum' maar levert wel false op in je afvraging; ik zou het zo doen:

JavaScript:

if (iD.indexOf('forum') > -1) { // 'forum' komt voor in de string

}

3) je onload kan je ook zo doen:

JavaScript:

window.onload = cropImage;

[TweakBoy]

offtopic:
klein gedachten spinsel van mij, kan fout zijn: Kijk eens in je Beveiligingstab van je browser.. misschien dat er voor Lokaal netwerk locaties wat soepelere settings staan m.b.t. javascript uitvoer

[ Voor 17% gewijzigd door TweakBoy op 29-02-2004 00:46 ]

[kleautviool]

crisp schreef op 29 februari 2004 @ 00:44:
1) check eerst eens of je ueberhaupt wel een id terugkrijgt; oftewel controleer of getAttribute niet toevallig null teruggeeft
[..]

Online geeftie ook null terug (zoals ik zij ) alleen heb ik geen idee wat ik dan precies fout doe

[crisp]

kleautviool schreef op 29 februari 2004 @ 00:47:
[...]


Online geeftie ook null terug (zoals ik zij ) alleen heb ik geen idee wat ik dan precies fout doe

geef eens een link naar je online-versie dan...

[Verwijderd]

Let als eerste op de scope van je 'i' variabele... Gebruik de for constructie als volgt:
for(var i=0; i<document.images.length; i++)

Op deze manier geldt de i variabele alleen voor deze functie en krijg je geen rare dingen als je ook nog eens een i in een andere functie gaat gebruiken.

Verder, vermijd het gebruik van object.setAttrribute en object.getAttribute.. Deze willen nog wel eens incompatible zijn met verschillende browsers. Regel 6 en 8 van je code vragen hetzelfde attribute op en dan is de manier van regel 6 te prefereren. Regel 11 wordt dan bijvoorbeeld ook: 'img.width = maxWidth;'.

[ Voor 34% gewijzigd door Verwijderd op 29-02-2004 00:58 ]

[crisp]

Verwijderd schreef op 29 februari 2004 @ 00:58:
Let als eerste op de scope van je 'i' variabele... Gebruik de for constructie als volgt:
for(var i=0; i<document.images.length; i++)

persoonlijk zou ik helemaal geen for-loop gebruiken, maar een heel andere constructie die geboren is uit persoonlijke voorkeur en omdat het sneller is, ism getElementsByTagName:

JavaScript:

var img = document.getElementsByTagName('IMG'), i = img.length, id, width;
while (i--) {
  id = img.item(i).getAttribute('id');
  if (id != null && id.indexOf('forum') > -1) {
    width = img.width; // hier geen getAttribute omdat de width niet per definitie als attribuut gezet hoeft te zijn
    if (width > maxWidth) {
      // doe iets
    }
  }
}

Op deze manier geldt de i variabele alleen voor deze functie en krijg je geen rare dingen als je ook nog eens een i in een andere functie gaat gebruiken.

inderdaad; netjes declareren vantevoren.

Verder, vermijd het gebruik van object.setAttrribute en object.getAttribute.. Deze willen nog wel eens incompatible zijn met verschillende browsers. Regel 6 en 8 van je code vragen hetzelfde attribute op en dan is de manier van regel 6 te prefereren. Regel 11 wordt dan bijvoorbeeld ook: 'img.width = maxWidth;'.

verschillende browsers is geen probleem, enkel verouderde browsers