[thelist] [javascript] [yui] setAttribute() failing

[Paul Bennett]

Hi all,

 

This one's got me tearing my hair out...

 

I have a script which I'm using to modify some css styles dynamically,
but it's failing in an odd way.

It works on one page, and then fails on another page with almost
identical markup.

 

I've validated and tested / tweaked but I just can't see what is causing
the error.

 

Here's the function code - it fails at the try, catch() routine as for
some reason on some pages the browser can't set an id on the child
element and yui's getRegion() only accepts and element id reference..

 

// get all bookstand images and adjust if necessary

function setUpBookstandImages(){

            els =
YAHOO.util.Dom.getElementsByClassName('bookstandImage');

            if(els){

                        for(i = 0; i < els.length; i++){

                                    centreBookstandImage(els[i], i);

                        }

            }

}

 

/* centre all bookstand images in their container */

function centreBookstandImage(ref, counter){

            

            parentWidth = 203;

            // set an id on the parent container,so we can use
setStyle() later

            ref.setAttribute('id', 'ref-'+counter);

            // get new parent el ref

            newRef = document.getElementById('ref-'+counter); 

            // get child

            imgEl = newRef.firstChild;

            

            if(imgEl){

                        // set id so we can use getRgion() without error

                        imgEl.setAttribute('id', 'img-' + counter);

                        

                        try{

                                    // works fine for the home page

                                    imgDims =
YAHOO.util.Dom.getRegion('img-' + counter);

                        }

                        // if the browser can't set the id

                        // 

                        catch(e){

                                    // this is where it fails - because
it seems getRegion() requires an id ref, not an element reference

                                    imgDims =
YAHOO.util.Dom.getRegion(imgEl);

                        }

                        

                        

                        

                        imgWidth = imgDims.right - imgDims.left;

                        if(imgWidth < parentWidth){

                                    // figure out padding

                                    parentPadding = (parentWidth -
imgWidth) / 2;

                                    // set parent element padding (left)
to centre image

                                    YAHOO.util.Dom.setStyle('ref-' +
counter, 'padding-left', parentPadding + 'px');

                        }

            }

            

}

 

Here's the markup it's working with:

<div class="bookstandImage">
        <a href="page" title="link title">
               <img src="image.jpg" alt="image alt text" >
        </a>
</div>

 

 

Can anyone see anything I'm doing wrong?

I can supply URL's if required.

 

Thanks in advance for any help.

 

Paul


www.mch.govt.nz  -  www.teara.govt.nz  -  www.nzhistory.net.nz  -  www.nzlive.com

The information contained in this email message does not necessarily reflect the views of the Ministry for Culture and Heritage and may contain information that is confidential or subject to legal privilege. If you are not the intended recipient and receive this email in error: please notify the Ministry for Culture and Heritage by return email or telephone (64 4 499 4229) and delete this email; you must not use, disclose, copy or distribute this message or the information in it.

PLEASE CONSIDER THE ENVIRONMENT BEFORE YOU PRINT THIS EMAIL