SetTimeout question...

[Thomas Allen]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

(function($) {
$(document).ready(function() {
var sponsors = $('.sponsors');
var sponsor_images = sponsors.find('img').remove();
var sponsor_frame = $('<img>').attr('src',
setTimeout(function() {
for(var i = 0; i < sponsor_images.length; i++) {
return $(sponsor_images).attr('src');
};
}, 3000)
);
sponsors.html(sponsor_frame);
});
}) (jQuery);

If it isn't clear, here's what should happen:

1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object

I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.

In case it's at all useful, here's the accompanying markup:

<div class="sponsors">
<img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
<img src="/handa/images/sponsors/cdm.png" alt="CDM" />
<img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
<img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
<img src="/handa/images/sponsors/figg.png" alt="Figg" />
<img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
<img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
<img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
<img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>

And I greatly appreciate any help!

Thanks,
Thomass

 

[Thomas Allen]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i= 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });

}) (jQuery);

If it isn't clear, here's what should happen:

1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object

I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.

In case it's at all useful, here's the accompanying markup:

<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg"/>
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB"/>
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>

And I greatly appreciate any help!

Thanks,
Thomass

Ah, this script's malfunction may be related to the fact that it's a
logical trainwreck. One second while I rewrite this...

Thomas

 

[Thomas Allen]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i= 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });

}) (jQuery);

If it isn't clear, here's what should happen:

1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object

I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.

In case it's at all useful, here's the accompanying markup:

<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg"/>
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB"/>
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>

And I greatly appreciate any help!

Thanks,
Thomas

Here's a simpler alternative:

(function($) {
$(document).ready(function() {
var sponsors = $('.sponsors');
var sponsor_images = sponsors.find('img').remove();
var sponsor_frame = $('<img>');

for(var i = 0; i < sponsor_images.length; i++) {
setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
};
sponsors.html(sponsor_frame);
});
}) (jQuery);

However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.

Thomas

 

[Erwin Moller]

Thomas Allen schreef:

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

(function($) {
$(document).ready(function() {
var sponsors = $('.sponsors');
var sponsor_images = sponsors.find('img').remove();
var sponsor_frame = $('<img>').attr('src',
setTimeout(function() {
for(var i = 0; i < sponsor_images.length; i++) {
return $(sponsor_images).attr('src');
};
}, 3000)
);
sponsors.html(sponsor_frame);
});

}) (jQuery);

If it isn't clear, here's what should happen:

1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object

I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.

In case it's at all useful, here's the accompanying markup:

<div class="sponsors">
<img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
<img src="/handa/images/sponsors/cdm.png" alt="CDM" />
<img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
<img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
<img src="/handa/images/sponsors/figg.png" alt="Figg" />
<img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
<img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
<img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
<img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>

And I greatly appreciate any help!

Thanks,
Thomas

Here's a simpler alternative:

(function($) {
$(document).ready(function() {
var sponsors = $('.sponsors');
var sponsor_images = sponsors.find('img').remove();
var sponsor_frame = $('<img>');

for(var i = 0; i < sponsor_images.length; i++) {
setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
};
sponsors.html(sponsor_frame);
});
}) (jQuery);

However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.

Thomas

If you can rewrite your script in such a way you don't use $ and JQuery,
maybe it becomes clearer and debugable (for me).
If you MUST use JQuery, why don't you post to their forum?

Regards,
Erwin Moller

--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare

 

[Thomas Allen]

Thomas Allen schreef:

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i = 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas

Here's a simpler alternative:

(function($) {
   $(document).ready(function() {
           var sponsors = $('.sponsors');
           var sponsor_images = sponsors.find('img').remove();
           var sponsor_frame = $('<img>');

           for(var i = 0; i < sponsor_images.length; i++){
                   setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
           };
           sponsors.html(sponsor_frame);
   });
}) (jQuery);

However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.

Thomas

If you can rewrite your script in such a way you don't use $ and JQuery,
maybe it becomes clearer and debugable (for me).
If you MUST use JQuery, why don't you post to their forum?

Regards,
Erwin Moller

--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare

Hi Erwin,

I know, but I felt that this was a more JavaScript-oriented question.
Here's a vastly simplified version of this script:

(function($) {
$(document).ready(function() {
var sponsors = $('.sponsors');
sponsors.images = sponsors.find('img').remove();
sponsors.frame = $('<img>');
sponsors.html(sponsors.frame);

for(var i = 0; i < sponsors.images.length; i++) {
sponsors.frame.attr('src', $(sponsors.images).attr
('src'));
};
});
}) (jQuery);

In this script, everything is working properly, except I need
something like a sleep() function inside of the for loop, or an
equivalent. What would you recommend?

Feel free to hotlink our jQuery for testing (the jQuery-sensitive
parts work fine though).
<script src="http://www.asce.org/lib/javascript/jquery-1.2.6.js"
type="text/javascript"></script>

Thanks,
Thomas

 

[Stevo]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

for(var i = 0; i < sponsor_images.length; i++) {
setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);

You'd probably need to create a closure for that
$(sponsors_images).attr to find the correct image. You're passing
along a string to setTimeout that's going to be eval'ed after 3 seconds
but neither sponsor_images or i will exist at that time.

 

[David Mark]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:

(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(vari = 0; i < sponsor_images.length; i++) {
                                       return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });

}) (jQuery);

If it isn't clear, here's what should happen:

1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object

I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.

In case it's at all useful, here's the accompanying markup:

<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM"/>
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>

And I greatly appreciate any help!

Thanks,
Thomas

Here's a simpler alternative:
Really?


(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');

Bad design to start with. Shouldn't need to query elements by class
name.

                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>');

Is document.createElement too many characters?

                for(var i = 0; i < sponsor_images.length; i++) {
                        setTimeout("sponsor_frame..attr('src', $(sponsor_images).attr
('src'))", 3000);

Presumably something like this would have been less concise?

sponsor_frame.src = sponsor_images.src;

Do you understand what the "attr" method does? Per the wonderful
jQuery documentation, it gets/sets properties or attributes (hardly
interchangeable terms), depending on which paragraph you read. The
underlying code is just as confused. Obviously you are too or you
wouldn't be using it.

Here are some similar examples:

sponsor_frame.attr('onclick', 'alert("test")');
sponsor_frame.attr('onclick', function() { alert('test'); });
sponsor_frame.attr('rowspan', 6);
sponsor_frame.attr('rowSpan', 6);
sponsor_frame.attr('longdesc');
sponsor_frame.attr('longDesc');

Less concise, less efficient, slower, requires 50K of junk code and
there's not a person on earth that could tell you at a glance what
those do. The explanation would be the size of a dissertation anyway
and subject to change in the next jQuery version.

Contrast those to:

sponsor_frame.onclick = function() { alert('test'); };
sponsor_frame.rowSpan = 6;
sponsor_frame.longDesc;

One line each. No dependencies to upgrade. Works in *all* browsers
with *no* browser sniffing, misconceptions or glaring omissions to get
in the way.

Is it the "chaining" that fascinates? That pattern is not unique to
jQuery and isn't advisable anyway (further complicates debugging,
which isn't a strong suit for jQuery developers to begin with.)

                };
                sponsors.html(sponsor_frame);

So now you have an inefficient tangled up mess that will make hundreds
of function calls, executing all sorts of complicated code that
neither you nor John Resig understands.

http://groups.google.com/group/comp.lang.javascript/msg/96c5638a7f955e8f

If you had learned JavaScript rather than jQuery, you could write
legible and efficient code that is consistent across browsers and
won't break the next time jQuery is upgraded. The line above is sure
to work in every browser ever made and is completely transparent to
future developers. On the other hand, if anything goes wrong with
your chained attr calls, you have no recourse but to file a ticket and
pray. Read the other thread to get an idea of how effective that will
be.

        });

}) (jQuery);

However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.

This is what I'm talking about. You don't know Javascript and you are
leaning on similarly challenged individuals. Can any good come from
that at all? Maybe you save a few keystrokes on your way to producing
a monumental disaster of an application? What will you do when it
breaks? See the other thread about upgrades.

These are disruptive "technologies" alright. They are going to
disrupt HTML/Javascript applications right into extinction. It's
always been a shaky idea to use documents to host applications and
after more than a decade, we've got developers who "hate" Javascript,
refusing to learn it at all, and users who disable it whenever
possible as it gets in the way of reading documents. It seems only
incompetence keeps it going (most sites break when Javascript is
disabled.)

 

[Thomas Allen]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function(){
                                for(var i = 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas

Here's a simpler alternative:
Really?



(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');

Bad design to start with.  Shouldn't need to query elements by class
name.

                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>');

Is document.createElement too many characters?

                for(var i = 0; i < sponsor_images.length; i++) {
                        setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);

Presumably something like this would have been less concise?

sponsor_frame.src = sponsor_images.src;

Do you understand what the "attr" method does?  Per the wonderful
jQuery documentation, it gets/sets properties or attributes (hardly
interchangeable terms), depending on which paragraph you read.  The
underlying code is just as confused.  Obviously you are too or you
wouldn't be using it.

Here are some similar examples:

sponsor_frame.attr('onclick', 'alert("test")');
sponsor_frame.attr('onclick', function() { alert('test'); });
sponsor_frame.attr('rowspan', 6);
sponsor_frame.attr('rowSpan', 6);
sponsor_frame.attr('longdesc');
sponsor_frame.attr('longDesc');

Less concise, less efficient, slower, requires 50K of junk code and
there's not a person on earth that could tell you at a glance what
those do.  The explanation would be the size of a dissertation anyway
and subject to change in the next jQuery version.  

Contrast those to:

sponsor_frame.onclick = function() { alert('test'); };
sponsor_frame.rowSpan = 6;
sponsor_frame.longDesc;

One line each.  No dependencies to upgrade.  Works in *all* browsers
with *no* browser sniffing, misconceptions or glaring omissions to get
in the way.  

Is it the "chaining" that fascinates?  That pattern is not unique to
jQuery and isn't advisable anyway (further complicates debugging,
which isn't a strong suit for jQuery developers to begin with.)

                };
                sponsors.html(sponsor_frame);

So now you have an inefficient tangled up mess that will make hundreds
of function calls, executing all sorts of complicated code that
neither you nor John Resig understands.

http://groups.google.com/group/comp.lang.javascript/msg/96c5638a7f955e8f

If you had learned JavaScript rather than jQuery, you could write
legible and efficient code that is consistent across browsers and
won't break the next time jQuery is upgraded.  The line above is sure
to work in every browser ever made and is completely transparent to
future developers.  On the other hand, if anything goes wrong with
your chained attr calls, you have no recourse but to file a ticket and
pray.  Read the other thread to get an idea of how effective that will
be.

        });

}) (jQuery);

However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.

This is what I'm talking about.  You don't know Javascript and you are
leaning on similarly challenged individuals.  Can any good come from
that at all?  Maybe you save a few keystrokes on your way to producing
a monumental disaster of an application?  What will you do when it
breaks?  See the other thread about upgrades.

These are disruptive "technologies" alright.  They are going to
disrupt HTML/Javascript applications right into extinction.  It's
always been a shaky idea to use documents to host applications and
after more than a decade, we've got developers who "hate" Javascript,
refusing to learn it at all, and users who disable it whenever
possible as it gets in the way of reading documents.  It seems only
incompetence keeps it going (most sites break when Javascript is
disabled.)

Dude, I was just asking for help with a specific JavaScript problem,
not a rant filled with douchebaggery. You'll notice that never once
did I ask anybody to approve of my library choice. I actually do know
my way around JavaScript fairly well, and the main reason that I use
jQuery is for its selectors. My specialty is front-end code,
specifically cross-browser compatible, semantic CSS, and I'm a
perfectionist when it comes to my markup.

I disagree with you that selecting elements by class name is a bad
idea, rather, I think that using IDs makes no sense when they are
pretty much a crippled version of the "class" attribute. IDs make a
false pretense of uniqueness and can't be grouped (i.e. class="slow
slideshow"). Classes are a much better source of metadata about the
element(s). Using only classes (obviously, using only IDs would be a
terrible ID) also eliminates a horde of silly CSS bugs involving the
wrong CSS selector (# vs .).

I don't understand why people have to drag their opinions in when
someone's just looking for some technical help...and your
unfamiliarity with a library's API is no reason to ditch the library.
$.fn.attr is very easy to understand.

So, all that being said, I much prefer $('.sponsors') to a complicated
series of for loops that aggregate an element collection. Sure, I
could write my own getElementsByClassName (or wait for its full
adoption in browsers), but that's the point of using a library. And
even that method wouldn't support the rich set of selectors that the
major JavaScript libraries do.

Your comment about performance is a red herring: I'm not too worried
about performance in a tiny script that rotates the sources of nine
images into a target image.

Thomas

 

[David Mark]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i = 0; i < sponsor_images.length; i++) {
                                       return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong..
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas
Here's a simpler alternative:

Really?

(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');

Bad design to start with.  Shouldn't need to query elements by class
name.

Is document.createElement too many characters?

                for(var i = 0; i < sponsor_images.length; i++) {
                        setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);

Presumably something like this would have been less concise?

sponsor_frame.src = sponsor_images.src;

Do you understand what the "attr" method does?  Per the wonderful
jQuery documentation, it gets/sets properties or attributes (hardly
interchangeable terms), depending on which paragraph you read.  The
underlying code is just as confused.  Obviously you are too or you
wouldn't be using it.

Here are some similar examples:

sponsor_frame.attr('onclick', 'alert("test")');
sponsor_frame.attr('onclick', function() { alert('test'); });
sponsor_frame.attr('rowspan', 6);
sponsor_frame.attr('rowSpan', 6);
sponsor_frame.attr('longdesc');
sponsor_frame.attr('longDesc');

Less concise, less efficient, slower, requires 50K of junk code and
there's not a person on earth that could tell you at a glance what
those do.  The explanation would be the size of a dissertation anyway
and subject to change in the next jQuery version.  

Contrast those to:

sponsor_frame.onclick = function() { alert('test'); };
sponsor_frame.rowSpan = 6;
sponsor_frame.longDesc;

One line each.  No dependencies to upgrade.  Works in *all* browsers
with *no* browser sniffing, misconceptions or glaring omissions to get
in the way.  

Is it the "chaining" that fascinates?  That pattern is not unique to
jQuery and isn't advisable anyway (further complicates debugging,
which isn't a strong suit for jQuery developers to begin with.)

So now you have an inefficient tangled up mess that will make hundreds
of function calls, executing all sorts of complicated code that
neither you nor John Resig understands.

If you had learned JavaScript rather than jQuery, you could write
legible and efficient code that is consistent across browsers and
won't break the next time jQuery is upgraded.  The line above is sure
to work in every browser ever made and is completely transparent to
future developers.  On the other hand, if anything goes wrong with
your chained attr calls, you have no recourse but to file a ticket and
pray.  Read the other thread to get an idea of how effective that will
be.

This is what I'm talking about.  You don't know Javascript and you are
leaning on similarly challenged individuals.  Can any good come from
that at all?  Maybe you save a few keystrokes on your way to producing
a monumental disaster of an application?  What will you do when it
breaks?  See the other thread about upgrades.

These are disruptive "technologies" alright.  They are going to
disrupt HTML/Javascript applications right into extinction.  It's
always been a shaky idea to use documents to host applications and
after more than a decade, we've got developers who "hate" Javascript,
refusing to learn it at all, and users who disable it whenever
possible as it gets in the way of reading documents.  It seems only
incompetence keeps it going (most sites break when Javascript is
disabled.)

Dude, I was just asking for help with a specific JavaScript problem,

Never mind what you were doing, dude.

not a rant filled with douchebaggery. You'll notice that never once

Are you such a douche-bag that you refuse to stop using the attr
method (or jQuery as a whole), despite the myriad downsides and no
upside? Was my explanation of the Broken as Designed code lacking?
The fact that John Resig himself *still* can't understand the
difference between attributes and DOM properties (MS is in the same
club), after three years of patching, doesn't give you pause? Go
through your app and count how many times you are calling this
obviously botched function. You are likely tangling it up with - each
- calls as well (see another recent thread.)

did I ask anybody to approve of my library choice. I actually do know

What led you to choose it? Are you now married to it?

my way around JavaScript fairly well, and the main reason that I use

The f--- you do (and therein lies the root of the problem.)

jQuery is for its selectors.

jQuery doesn't have any selectors.

My specialty is front-end code,

Your specialty is writing bullshit code (and whining apparently.)

specifically cross-browser compatible, semantic CSS, and I'm a
perfectionist when it comes to my markup.

Howls of derision, you then slather 50K of junk code (plus your own
junk) on top it? In other words, you paint a masterpiece and then
take crayons to it?

And do you have any finished products to back up your assertions of
competence?

[snip confused nonsense about CSS]

I don't understand why people have to drag their opinions in when someone's just looking for some technical help...and your

You could have stopped with "I don't understand." And you do need
help. My help wasn't good enough?

unfamiliarity with a library's API is no reason to ditch the library.
$.fn.attr is very easy to understand.

You just don't get it. *You* do not understand the API. I've already
explained what it does (and it ain't pretty.) Can you? If not, what
gives you confidence in it?

So, all that being said, I much prefer $('.sponsors') to a complicated
series of for loops that aggregate an element collection.

I already told you that your design started on the wrong page.

Sure, I
could write my own getElementsByClassName (or wait for its full
adoption in browsers), but that's the point of using a library.

You don't need it. See above.

And even that method wouldn't support the rich set of selectors that the
major JavaScript libraries do.

You don't need a "rich set of selectors" and there is no such thing as
a "major library." If you refer to Resig's botched attempts at
generalized Javascript, what do you do with these elements once you
have queried them? "Chain" them to attr calls? See the other thread.

Your comment about performance is a red herring: I'm not too worried

None of this is the slightest bit mysterious (unless you are
completely clueless about browser scripting.)

about performance in a tiny script that rotates the sources of nine
images into a target image.

But your tiny script requires a huge script to "work." The huge
script adds nothing but complications and mistakes and changes over
time as well. (!) Did you explain this to your client or did you
promise to "write less code, save more money, etc."

A slide show is a very simple script to write and will work in
anything (and last forever) if done properly. It's been done to
death, so you should be able to find lots of examples. Of course, you
will need to learn browser scripting to weed out the bad ones. A good
indicator of a bad one is jQuery, Mootools, etc. (what you refer to as
"major libraries.")

 

[Thomas Allen]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i = 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas
Here's a simpler alternative:
Really?
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
Bad design to start with.  Shouldn't need to query elements by class
name.
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>');
Is document.createElement too many characters?
                for(var i = 0; i < sponsor_images..length; i++) {
                        setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
Presumably something like this would have been less concise?
sponsor_frame.src = sponsor_images.src;
Do you understand what the "attr" method does?  Per the wonderful
jQuery documentation, it gets/sets properties or attributes (hardly
interchangeable terms), depending on which paragraph you read.  The
underlying code is just as confused.  Obviously you are too or you
wouldn't be using it.
Here are some similar examples:
sponsor_frame.attr('onclick', 'alert("test")');
sponsor_frame.attr('onclick', function() { alert('test'); });
sponsor_frame.attr('rowspan', 6);
sponsor_frame.attr('rowSpan', 6);
sponsor_frame.attr('longdesc');
sponsor_frame.attr('longDesc');
Less concise, less efficient, slower, requires 50K of junk code and
there's not a person on earth that could tell you at a glance what
those do.  The explanation would be the size of a dissertation anyway
and subject to change in the next jQuery version.  
Contrast those to:
sponsor_frame.onclick = function() { alert('test'); };
sponsor_frame.rowSpan = 6;
sponsor_frame.longDesc;
One line each.  No dependencies to upgrade.  Works in *all* browsers
with *no* browser sniffing, misconceptions or glaring omissions to get
in the way.  
Is it the "chaining" that fascinates?  That pattern is not unique to
jQuery and isn't advisable anyway (further complicates debugging,
which isn't a strong suit for jQuery developers to begin with.)
                };
                sponsors.html(sponsor_frame);
So now you have an inefficient tangled up mess that will make hundreds
of function calls, executing all sorts of complicated code that
neither you nor John Resig understands.
http://groups.google.com/group/comp.lang.javascript/msg/96c5638a7f955e8f
If you had learned JavaScript rather than jQuery, you could write
legible and efficient code that is consistent across browsers and
won't break the next time jQuery is upgraded.  The line above is sure
to work in every browser ever made and is completely transparent to
future developers.  On the other hand, if anything goes wrong with
your chained attr calls, you have no recourse but to file a ticket and
pray.  Read the other thread to get an idea of how effective that will
be.
        });
}) (jQuery);
However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.
This is what I'm talking about.  You don't know Javascript and you are
leaning on similarly challenged individuals.  Can any good come from
that at all?  Maybe you save a few keystrokes on your way to producing
a monumental disaster of an application?  What will you do when it
breaks?  See the other thread about upgrades.
These are disruptive "technologies" alright.  They are going to
disrupt HTML/Javascript applications right into extinction.  It's
always been a shaky idea to use documents to host applications and
after more than a decade, we've got developers who "hate" Javascript,
refusing to learn it at all, and users who disable it whenever
possible as it gets in the way of reading documents.  It seems only
incompetence keeps it going (most sites break when Javascript is
disabled.)

Dude, I was just asking for help with a specific JavaScript problem,

Never mind what you were doing, dude.

not a rant filled with douchebaggery. You'll notice that never once

Are you such a douche-bag that you refuse to stop using the attr
method (or jQuery as a whole), despite the myriad downsides and no
upside?  Was my explanation of the Broken as Designed code lacking?
The fact that John Resig himself *still* can't understand the
difference between attributes and DOM properties (MS is in the same
club), after three years of patching, doesn't give you pause?  Go
through your app and count how many times you are calling this
obviously botched function.  You are likely tangling it up with - each
- calls as well (see another recent thread.)

did I ask anybody to approve of my library choice. I actually do know

What led you to choose it?  Are you now married to it?

my way around JavaScript fairly well, and the main reason that I use

The f--- you do (and therein lies the root of the problem.)

jQuery is for its selectors.

jQuery doesn't have any selectors.

My specialty is front-end code,

Your specialty is writing bullshit code (and whining apparently.)

specifically cross-browser compatible, semantic CSS, and I'm a
perfectionist when it comes to my markup.

Howls of derision, you then slather 50K of junk code (plus your own
junk) on top it?  In other words, you paint a masterpiece and then
take crayons to it?

And do you have any finished products to back up your assertions of
competence?

[snip confused nonsense about CSS]

I don't understand why people have to drag their opinions in when someone's just looking for some technical help...and your

You could have stopped with "I don't understand."  And you do need
help.  My help wasn't good enough?

unfamiliarity with a library's API is no reason to ditch the library.
$.fn.attr is very easy to understand.

You just don't get it.  *You* do not understand the API.  I've already
explained what it does (and it ain't pretty.)  Can you?  If not, what
gives you confidence in it?

So, all that being said, I much prefer $('.sponsors') to a complicated
series of for loops that aggregate an element collection.

I already told you that your design started on the wrong page.

Sure, I
could write my own getElementsByClassName (or wait for its full
adoption in browsers), but that's the point of using a library.

You don't need it.  See above.

And even that method wouldn't support the rich set of selectors that the
major JavaScript libraries do.

You don't need a "rich set of selectors" and there is no such thing as
a "major library."  If you refer to Resig's botched attempts at
generalized Javascript, what do you do with these elements once you
have queried them?  "Chain" them to attr calls?  See the other thread..

Your comment about performance is a red herring: I'm not too worried

...

read more »

I really shouldn't continue, because you clearly prefer to insult
rather than teach, but I'm dying to hear your explanation for classes
as an identifier being poor design.

Also, cutting quotes short is a show of _extremely_ poor manners. I'll
paste it here in case your browser has an 80-char width limit with
nowrap or something:

 

[David Mark]

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors..find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                               for(var i = 0; i < sponsor_images.length; i++) {
                                       return $(sponsor_images).attr('src');
                               };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to thenext
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas
Here's a simpler alternative:
Really?
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
Bad design to start with.  Shouldn't need to query elements by class
name.
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>');
Is document.createElement too many characters?
                for(var i = 0; i < sponsor_images.length; i++) {
                        setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
Presumably something like this would have been less concise?
sponsor_frame.src = sponsor_images.src;
Do you understand what the "attr" method does?  Per the wonderful
jQuery documentation, it gets/sets properties or attributes (hardly
interchangeable terms), depending on which paragraph you read.  The
underlying code is just as confused.  Obviously you are too or you
wouldn't be using it.
Here are some similar examples:
sponsor_frame.attr('onclick', 'alert("test")');
sponsor_frame.attr('onclick', function() { alert('test'); });
sponsor_frame.attr('rowspan', 6);
sponsor_frame.attr('rowSpan', 6);
sponsor_frame.attr('longdesc');
sponsor_frame.attr('longDesc');
Less concise, less efficient, slower, requires 50K of junk code and
there's not a person on earth that could tell you at a glance what
those do.  The explanation would be the size of a dissertation anyway
and subject to change in the next jQuery version.  
Contrast those to:
sponsor_frame.onclick = function() { alert('test'); };
sponsor_frame.rowSpan = 6;
sponsor_frame.longDesc;
One line each.  No dependencies to upgrade.  Works in *all* browsers
with *no* browser sniffing, misconceptions or glaring omissions to get
in the way.  
Is it the "chaining" that fascinates?  That pattern is not uniqueto
jQuery and isn't advisable anyway (further complicates debugging,
which isn't a strong suit for jQuery developers to begin with.)
                };
                sponsors.html(sponsor_frame);
So now you have an inefficient tangled up mess that will make hundreds
of function calls, executing all sorts of complicated code that
neither you nor John Resig understands.
http://groups.google.com/group/comp.lang.javascript/msg/96c5638a7f955e8f
If you had learned JavaScript rather than jQuery, you could write
legible and efficient code that is consistent across browsers and
won't break the next time jQuery is upgraded.  The line above is sure
to work in every browser ever made and is completely transparent to
future developers.  On the other hand, if anything goes wrong with
your chained attr calls, you have no recourse but to file a ticket and
pray.  Read the other thread to get an idea of how effective thatwill
be.
        });
}) (jQuery);
However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.
This is what I'm talking about.  You don't know Javascript and you are
leaning on similarly challenged individuals.  Can any good come from
that at all?  Maybe you save a few keystrokes on your way to producing
a monumental disaster of an application?  What will you do when it
breaks?  See the other thread about upgrades.
These are disruptive "technologies" alright.  They are going to
disrupt HTML/Javascript applications right into extinction.  It's
always been a shaky idea to use documents to host applications and
after more than a decade, we've got developers who "hate" Javascript,
refusing to learn it at all, and users who disable it whenever
possible as it gets in the way of reading documents.  It seems only
incompetence keeps it going (most sites break when Javascript is
disabled.)
Dude, I was just asking for help with a specific JavaScript problem,

Never mind what you were doing, dude.

Are you such a douche-bag that you refuse to stop using the attr
method (or jQuery as a whole), despite the myriad downsides and no
upside?  Was my explanation of the Broken as Designed code lacking?
The fact that John Resig himself *still* can't understand the
difference between attributes and DOM properties (MS is in the same
club), after three years of patching, doesn't give you pause?  Go
through your app and count how many times you are calling this
obviously botched function.  You are likely tangling it up with - each
- calls as well (see another recent thread.)

What led you to choose it?  Are you now married to it?

The f--- you do (and therein lies the root of the problem.)

jQuery doesn't have any selectors.

Your specialty is writing bullshit code (and whining apparently.)

Howls of derision, you then slather 50K of junk code (plus your own
junk) on top it?  In other words, you paint a masterpiece and then
take crayons to it?

And do you have any finished products to back up your assertions of
competence?

[snip confused nonsense about CSS]

I don't understand why people have to drag their opinions in when someone's just looking for some technical help...and your

You could have stopped with "I don't understand."  And you do need
help.  My help wasn't good enough?

You just don't get it.  *You* do not understand the API.  I've already
explained what it does (and it ain't pretty.)  Can you?  If not, what
gives you confidence in it?

I already told you that your design started on the wrong page.

You don't need it.  See above.

You don't need a "rich set of selectors" and there is no such thing as
a "major library."  If you refer to Resig's botched attempts at
generalized Javascript, what do you do with these elements once you
have queried them?  "Chain" them to attr calls?  See the other thread.

read more »

I really shouldn't continue, because you clearly prefer to insult
rather than teach, but I'm dying to hear your explanation for classes
as an identifier being poor design.

Interesting take, CSS is OT here and your assertions about classes and
identifiers make no sense anyway.

Also, cutting quotes short is a show of _extremely_ poor manners. I'll

[snip]

 

[David Mark]

Thomas Allen schreef:

I'm trying to use SetTimeout to rotate some image sources, and I can't
get it to work. I know that there are other ways to pull this off, but
I'm curious as to what I need to change to get this script to work:
(function($) {
        $(document).ready(function() {
                var sponsors = $('.sponsors');
                var sponsor_images = sponsors.find('img').remove();
                var sponsor_frame = $('<img>').attr('src',
                        setTimeout(function() {
                                for(var i = 0; i < sponsor_images.length; i++) {
                                        return $(sponsor_images).attr('src');
                                };
                        }, 3000)
                );
                sponsors.html(sponsor_frame);
        });
}) (jQuery);
If it isn't clear, here's what should happen:
1. Find the sponsor block
2. Extract the images as a jQuery object, removing them
3. Create a new image node
4. Set this image's source to change every three seconds to the next
one from the extracted images object
I've verified that the only part of the script that isn't working
properly is the setTimeout call, so I must be doing something wrong.
In case it's at all useful, here's the accompanying markup:
<div class="sponsors">
        <img src="/handa/images/sponsors/aecom.png" alt="AECOM" />
        <img src="/handa/images/sponsors/cdm.png" alt="CDM" />
        <img src="/handa/images/sponsors/pankow.png" alt="Charles Pankow
Foundation" />
        <img src="/handa/images/sponsors/moretrench.png" alt="Moretrench" />
        <img src="/handa/images/sponsors/figg.png" alt="Figg" />
        <img src="/handa/images/sponsors/hntb.png" alt="HNTB" />
        <img src="/handa/images/sponsors/kiewit.png" alt="Kiewit" />
        <img src="/handa/images/sponsors/mcgraw.png" alt="McGraw Hill
Construction - ENR" />
        <img src="/handa/images/sponsors/weidlinger.png" alt="Weidlinger
Associates Inc. - Consulting Engineers" />
</div>
And I greatly appreciate any help!
Thanks,
Thomas
Here's a simpler alternative:
(function($) {
   $(document).ready(function() {
           var sponsors = $('.sponsors');
           var sponsor_images = sponsors.find('img').remove();
           var sponsor_frame = $('<img>');
           for(var i = 0; i < sponsor_images.length; i++) {
                   setTimeout("sponsor_frame.attr('src', $(sponsor_images).attr
('src'))", 3000);
           };
           sponsors.html(sponsor_frame);
   });
}) (jQuery);
However, I don't understand scope inside of setTimeout: I get
"undefined" errors for all of the variables in the setTimeout command,
and I'm not too keen on making each one global.
Thomas

If you can rewrite your script in such a way you don't use $ and JQuery,
maybe it becomes clearer and debugable (for me).
If you MUST use JQuery, why don't you post to their forum?

Regards,
Erwin Moller

--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare

Hi Erwin,

I know, but I felt that this was a more JavaScript-oriented question.
Here's a vastly simplified version of this script:

(function($) {
    $(document).ready(function() {
        var sponsors = $('.sponsors');
        sponsors.images = sponsors.find('img').remove();
        sponsors.frame = $('<img>');
        sponsors.html(sponsors.frame);

        for(var i = 0; i < sponsors.images.length; i++) {
            sponsors.frame.attr('src', $(sponsors.images).attr
('src'));
        };
    });

}) (jQuery);

In this script, everything is working properly, except I need
something like a sleep() function inside of the for loop, or an
equivalent. What would you recommend?

Feel free to hotlink our jQuery for testing (the jQuery-sensitive
parts work fine though).
<script src="http://www.asce.org/lib/javascript/jquery-1.2.6.js"
type="text/javascript"></script>

That's one of the browser sniffing versions, which has been abandoned
as even John Resig knows it is junk at this point. He took yet
another Mulligan with 1.3 (and two more since.)

The ignorant can roll their eyes all they want. Their heads will
follow.

 

[Thomas Allen]

And still no answer as to why using classes instead of IDs is poor
design. I'm genuinely interested, and if anybody else here has an
answer, please offer it, as I'd prefer the non-abusive version.

Thanks,
Thomas

 

[David Mark]

And still no answer as to why using classes instead of IDs is poor
design.

Should be quite obvious in this case. This is the design decision
that sent you running for jQuery in the first place.

I'm genuinely interested, and if anybody else here has an
answer, please offer it, as I'd prefer the non-abusive version.

If you dislike abuse, don't crack out of turn. You don't know what
you are doing, refuse to listen to those who do and use words like
"douchebaggery." What did you think that would buy you here?
Furthermore, what do you think it will buy you in the long run?

 

[Thomas Allen]

Should be quite obvious in this case.  This is the design decision
that sent you running for jQuery in the first place.


If you dislike abuse, don't crack out of turn.  You don't know what
you are doing, refuse to listen to those who do and use words like
"douchebaggery."  What did you think that would buy you here?
Furthermore, what do you think it will buy you in the long run?

Dude, you let off a lengthy, insulting rant to some very benign posts
of mine because you got in a tissy because someone might want to
leverage a JavaScript library. It was an unmitigated act of
douchebaggery, and I identified it as such. I may be no expert at
JavaScript, but I do have a pretty good idea of what I'm doing; my
lack of expertise is a good reason to lean on well-tested code written
by others.

And still no explanation for preferring IDs over classes. Do you have
one?

 

[David Mark]

Dude, you let off a lengthy, insulting rant to some very benign posts

Stop calling me "dude."

of mine because you got in a tissy because someone might want to

A what?

leverage a JavaScript library. It was an unmitigated act of
douchebaggery, and I identified it as such. I may be no expert at

So "douchebaggery" is any point or points that makes you feel less
confident about your skills as a programmer. Get used to it. And pay
attention unless you want to end up on the wrong side of a cash
register at Radio Shack.

JavaScript, but I do have a pretty good idea of what I'm doing; my
lack of expertise is a good reason to lean on well-tested code written
by others.

What a basket-case. Well-tested? Others? You didn't read anything I
posted, did you? Still waiting on your attr dissertation as well.

And still no explanation for preferring IDs over classes. Do you have
one?

Unlike the other hints I gave you, you'll have to read between the
lines on that one.

 

[Thomas Allen]

Unlike the other hints I gave you, you'll have to read between the
lines on that one.

Perhaps because you don't have an answer.

 

[David Mark]

Perhaps because you don't have an answer.

Hmmm. Maybe if you dared me to tell you.

 

[Tim Streater]

IDs make a false pretense of uniqueness and can't be grouped
(i.e. class="slow slideshow").

I think you mean:

(e.g. class= ...

 

[Tim Streater]

[loadsa stuff snipped]

I would appreciate it if you guys could:

1) top post when you only have one line to add to billyuns of others.
2) learn to snip.

Your choice.

A slide show is a very simple script to write and will work in
anything (and last forever) if done properly. It's been done to
death, so you should be able to find lots of examples. Of course, you
will need to learn browser scripting to weed out the bad ones. A good
indicator of a bad one is jQuery, Mootools, etc. (what you refer to as
"major libraries.")

I've never bothered with any of these libraries. And it's true that that
most issues can be researched with a little googling. For today's issue
I had to google for over an hour before finding an example I could hack
about, but this was largely a question of suitable search terms. A
couple of hours later and I have some code I can slot into my app to fix
today's problem.

I suspect the OP needs to understand what setTimeout actually does.