Issue with function in Firefox 3

[Tony]

All,
Perhaps one of you can assist me with this issue. I have the following
function which changes the font size of several page elements when a
user clicks on an image on the page.

function setFontFromCookie(){
var tmpfontSize = readCookie('fontSizeCookie');
var classes = ['searchresult', 'heading', 'resulttext'];
for(var x=0; x < classes.length; x++){
$('allresults').getElementsByClassName(classes[x]).each( function(s)
{ $(s).setStyle({ fontSize: tmpfontSize +'px' }) })
}
}


The function works fine in FF2, and IE6/7 but breaks in FF3 with
Firebug reporting the following error:
'$('allresults').getElementsByClassName(classes[x]).each is not a
function'

I've tried changing getElementsByClassName to $$, to no avail. I've
tried using invoke() as opposed to each(). I've tried all the
solutions I can think of, to no avail.

Can any of you provide an idea of what's going in in FF3?

Thanks in advance!
Tony

[Justin Perkins]

You should be using .select() instead of getElementsByClassName.

getElementsByClassName has been deprecated due to conflicting with
modern browser's which support this method natively.

http://prototypejs.org/api/element/getElementsByClassName

-justin

[kangax]

`getElementsByClassName` returns NodeList (which doesn't have `each`).

Try this:
$A($('allresults').getElementsByClassName(classes[x]));

or something like:

function setFontFromCookie() {
$$('#allresults .searchresult, #allresults .heading,
#allresults .resulttext')
.invoke('setStyle', { fontSize: readCookie('fontSizeCookie') +
'px' });
}

--
kangax

[Tony]

Kangax,
Looks like the "$A($('allresults')...." solution does the trick!

Thanks to you and all that responded (or even thought about my issue)!

T>

[Josh Carroll]

I'm trying to use AJAX to randomly shuffle through a set of photos.
My back-end PHP works, fine, but I'm having a timing issue with the
effects. Here's my code as it is at present:

function swap_rand_image() {
var url = '/path/to/random_image_ajax.php';
new PeriodicalExecuter(function() {
new Ajax.Request(url, {
method: 'get',
onSuccess: function(transport) {
Effect.Fade('random_image');
Effect.Appear.delay(2,'random_image');
$('random_image').writeAttribute('src',transport.responseText);
},
onFailure: function(transport) {
alert('This did not work');
}
});
}, 5);
}

Technically, this works, but it's changing the src of $
('random_image') before Effect.Fade is finished. So the logical
change (to me anyway) would be something like:

... onSuccess: function(transport) {
Effect.Fade('random_image');
$
('random_image').writeAttribute.delay(2,'src',transport.responseText);
Effect.Appear.('random_image').defer();
},...

Or possibly:

... onSuccess: function(transport) {
Effect.Fade('random_image');
Effect.Appear.delay(2,'random_image');
$
('random_image').writeAttribute('src',transport.responseText).defer();
},...

But neither of those works. The first throws a "element.setAttribute
is not a function" error, ref. line 1803 in prototype.js. The second
doesn't seem to make any difference on anything at all.

Any thoughts / ideas?

--Josh

[Diodeus]

Maybe this will work:

Effect.Appear('random_image',{afterFinish:function(){$
('random_image').src=transport.responseText}});

[Justin Perkins]

> $
> ('random_image').writeAttribute.delay(2,'src',transport.responseText);
> Effect.Appear.('random_image').defer();

Try:

Element.writeAttribute.delay(2, 'random_image', 'src', transport.responseText);

-justin

[Josh Carroll]

Thanks! Here's what finally worked, based on your suggestion:

Effect.Fade('random_image',{afterFinish:function(){$
('random_image').src=transport.responseText}});
Effect.Appear.delay(2,'random_image');

--Josh

On Aug 14, 2008, at 12:27 PM, Diodeus wrote:

>
> Maybe this will work:
>
> Effect.Appear('random_image',{afterFinish:function(){$
> ('random_image').src=transport.responseText}});
>
>
> On Aug 14, 1:17 pm, Josh Carroll <j...@infinivert.com> wrote:
>> I'm trying to use AJAX to randomly shuffle through a set of photos.
>> My back-end PHP works, fine, but I'm having a timing issue with the
>> effects. Here's my code as it is at present:
>>
>> function swap_rand_image() {
>> var url = '/path/to/random_image_ajax.php';
>> new PeriodicalExecuter(function() {
>> new Ajax.Request(url, {
>> method: 'get',
>> onSuccess: function(transport) {
>> Effect.Fade('random_image');
>> Effect.Appear.delay(2,'random_image');