CODEWITHSUNDEEP
javascripthtml
NewKidOnTheBlock
NewKidOnTheBlock

Reputation: 1511

Changing getElementById to getElementsByClassName

I am sure is a common problem in JS, i have created resizing function using JS, initially this function was only going to be used on one item of my site, however now i have chosen to use it on multiple items. My JS function currently uses document.getElementById(id); however i want to change this so it looks out for the class name .resize. How can this be done? Below is a snippet of my JS 

function ebi(id){
        return document.getElementById(id);
    }
    if(ebi('resize')
        .complete==true){
        iscale(ebi(''));
    } 
    ebi('resize')
    .onload=function(){iscale(this);
    }

    function iscale(o){
        //alert(o.width);
    var sar=o.width/o.height;
    var tar=1,tiw,tih,xoff,yoff;
    if(o.width<=425&&o.height<=467){
        tiw=o.width;
        tih=o.height;
    }else if(tar>sar){
        tiw=425*sar;
        tih=467;
    }
    else{
        tiw=425;
        tih=467/sar;
    }
    xoff=(680-tiw)>>1;
    yoff=(209-tih)>>1;
    //alert(xoff);
    o.width=tiw;o.height=tih;
    o.style.top=yoff+"px";
    o.style.left=xoff+"px";
    }
function $(id){return document.getElementById(id);}

html

 <section id="homeSlide" class="shadow">
    <img id="resize"class='opaque' src="http://www.colette.fr/media/push/pony_01239.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/EGIFT_01234.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/swa_mmm_001255.jpg" />
</section>

At the moment the resize function only works for the first image, however the other images do not resize. Before anyone attacks me about web standards the id's in the img tags were just to test the function.

Upvotes: 0

Views: 310

Answers (3)

Mehran Hatami
Mehran Hatami

Reputation: 12961

the point is id should be unique and to do what you want why don't you use jQuery. using jQuery you can easily do what you want, using this

jQuery("#homeSlide>img")

and you can also add this:

jQuery("#homeSlide>img").each(function(imgNode){
    resize(imgNode);
});

but if you want to do it without jQuery, as far as some functions like getElementsByClassName and getElementsByTagName are not cross browser, you'd better try this:

var homeSlide = document.getElementById('homeSlide');
var myImgNodes = [];
for(var i=0;i<homeSlide.childNodes.length;i++){
    var childNode = homeSlide.childNodes[i];
    if(childNode.nodeType==1 && childNode.tagName.toLowerCase()=="img"){
        myImgNodes.push(childNode);
    }
}

afterwards myImgNodes would be exactly what you want.

I just changed your fiddle example and tried not to change your functionality, you can check this out, it perfectly works. This is your updated jsfiddle DEMO

Upvotes: 0

RobDil
RobDil

Reputation: 4544

First, an ID has to be unique in your HTML document. But in your example code you assign the ID "resize" three times. Just replace the ID from all three elements and add class="resize".

Second, I suggest to use the jQuery.each() method to iterate over the returned collection instead of a loop.

Example:

var elements = document.getElementsByClassName("resize")

jQuery.each(elements, function(element) {
  iscale(element)
})

Upvotes: 0

Asenar
Asenar

Reputation: 7010

id have to be unique, that's why this didn't works.

You can use document.getElementsByClassName() (as you thought) : simply add class="resize" (instead of id="resize") and use that kind of loop:

function callResize()
{ 
  var elements = document.getElementsByClassName("resize");
  for (var i=0;i<elements.length;i++)
  {
    var element = elements[i];
    // do things with element
    iscale(element);
  }
}
document.getElementById('homeSlide').onload = function(){callResize();}

Upvotes: 1

Related Questions