Sorry, I should have written:
var div = $('div.img1')[0], //get with whatever selector once
swapDiv = setInterval(function(){ ...
and var n = ....
I'm usually a stickler for not creating globals; not sure where my
head was at...
Btw, for the OP's edification regarding global variables (implicit or
explicit), in your example, since they're outside the jQuery wrapper,
rotateTimer, rotateClassNames, rotateIndex are globals (as are the
functions rotateClass and stopRotating); I'd suggest the OP Google the
associated danger with global variables.
Sorry if my comment seemed dramatic; my impression was that the OP was
going back to the array only because he couldn't get my example to
work, rather than working through why it might be failing for him. I
appreciate that you're creating an instructive example (I kind of
thought we all were :) ). It just seemed to me to be somewhat long
(even with comments removed) in light of it being referred to as a
"dead simple version"; definitely instructive, however.
As you say, my version would 'clobber' any other classes, however I
took this as a special case to code to and so I thought mine was the
dead simple one :), and probably less instructive :P
One thing the OP may not be aware of is that inside the rotateClass
function, divs = $('div.rotates') requires a traversal of the DOM
every interval, which could have performance implications depending
upon the complexity of the markup.
I did indicate, "If you want to stop it later, just call clearInterval
('swapDiv');", which I thought would be an example of how to stop it
(I assumed the OP could wire it up to a click event, but giving a
concrete example is always helpful, especially since the OP's skill
level is unknown). In the case of my example it would be
$('#btnStop').click(function(){clearInterval(swapDiv);});
I think it would be good for the OP to note that part of the
difference in our examples is also stylistic (and that your example
is, as you said, instructional and not how you'd necessarily do it).
Thanks for the comments :-)
On Mar 22, 3:02 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> @mkmanning:
>
> I was intentionally creating something instructive, not dense. What I
> gave him is longer than your approach, but not so dramatically as you
> seem to suggest -- most of the difference is that mine is commented,
> doesn't compound unrelated statements, and has an example of how to
> stop it. It also doesn't create unnecessary closures, clobber any
> other classes that the elements may have on them, or create implicit
> globals (you meant to declare 'div', 'swapDiv', and 'n' as vars,
> right, rather than making them globals?).
>
> FWIW, if I were doing this for myself (which isn't likely), I'd
> probably use numbered styles like you did -- that approach makes more
> sense to me. It's just that after your earlier post, the OP expressly
> asked for an array-based approach...
>
> -- T.J. :-)
>
> On Mar 22, 7:50 pm, mkmanning <michaell...@gmail.com> wrote:
>
> > Alexandru,
> > Not sure what your problem was with my example--'cause the example
> > works!
> > That just seems like a whole lot of code to do what can be done in a
> > few lines; here's a working copy for you to follow:
>
> >http://actingthemaggot.com/test/divclass.html
>
> > On Mar 22, 3:58 am, Alexandru Dinulescu <alex.d.a...@gmail.com> wrote:
>
> > > THANK YOU!!!!!!!!!
> > > This works perfectly, exactly what i needed
>
> > > Best Regards
> > > -------------------
> > > Alexandru Dinulescu
> > > Web Developer
> > > (X)HTML/CSS Specialist
> > > Expert Guarantee Certified Developer
> > > XHTML:http://www.expertrating.com/transcript.asp?transcriptid=1879053
> > > CSS :http://www.expertrating.com/transcript.asp?transcriptid=1870619
> > > RentACoder
> > > Profile:http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInf...
>
> > > MainWebsite:http://alexd.adore.ro
>
> > > On Sun, Mar 22, 2009 at 12:40 PM, T.J. Crowder
> > > <t...@crowdersoftware.com>wrote:
>
> > > > Hi,
>
> > > > If you want the really dead simple version, assign the relevant
> > > > elements a class name you won't be changing (such a "rotates"), then
> > > > use something like this:
>
> > > > * * * * Also on Pastie:http://pastie.org/423361
> > > > var rotateTimer;
> > > > var rotateClassNames = ['img1', 'img2', 'img3', 'img4', 'img5'];
> > > > var rotateIndex = rotateClassNames.length - 1;
>
> > > > $(function() {
> > > > // Do the first one right away
> > > > rotateClass();
>
> > > > // Do the remainder at 5 second intervals
> > > > rotateTimer = setInterval(rotateClass, 5000);
>
> > > > // Offer a way of stopping (optional)
> > > > $('#btnStop').click(stopRotating);
> > > > });
>
> > > > function rotateClass() {
> > > > var divs;
>
> > > > // Get all matching elements
> > > > divs = $('div.rotates');
>
> > > > // Remove the current class
> > > > divs.removeClass(rotateClassNames[rotateIndex]);
>
> > > > // Move to the next
> > > > ++rotateIndex;
> > > > if (rotateIndex >= rotateClassNames.length) {
> > > > rotateIndex = 0;
> > > > }
>
> > > > // Add it
> > > > divs.addClass(rotateClassNames[rotateIndex]);
> > > > }
>
> > > > function stopRotating() {
> > > > if (rotateTimer) {
> > > > clearInterval(rotateTimer);
> > > > rotateTimer = undefined;
> > > > }
> > > > }
> > > > * * * *
>
> > > > You would probably want to generalize that into a reusable module of
> > > > some kind, but the logic is simple enough.
>
> > > > HTH,
> > > > --
> > > > T.J. Crowder
> > > > tj / crowder software / com
> > > > Independent Software Engineer, consulting services available
>
> > > > On Mar 22, 9:21 am, Alexandru Dinulescu <alex.d.a...@gmail.com> wrote:
> > > > > My html looks like
> > > > > <div class="actualC">
> > > > > <div class="actualCa">
> > > > > <div class="actualCRotImg" thru="img1,
> > > > > img2,
> > > > > img3, img4, img5">
>
> > > > > </div>
> > > > > </div>
> > > > > </div>
>
> > > > > my js is the last one
>
> > > > > $(function(){
> > > > > function rotateClass(){
> > > > > var el = $(this), classes = el.data('classes'), cur = el.data
> > > > > ('current-class'), next = cur++;
> > > > > if (next+1 > classes.length) next = 0;
> > > > > el.removeClass(classes[ cur ]).addClass(classes[ next ] ).data
> > > > > ('current-class', next);
> > > > > }
> > > > > var mobile = $('.mobileclass').each(function(){
> > > > > var el = $(this), classes = el.attr('thru').split(',');
> > > > > el.data('classes', classes).data('current-class', 0).bind
> > > > > ('rotate-class', rotateClass).addClass(classes[0]);
> > > > > });
> > > > > setInterval(function(){ mobile.trigger('rotate-class') }, 5000);
>
> > > > > });
>
> > > > > and it doesnt work ... ? nothing is happening when i refresh the page.
>
> > > > > I just need a very easy stuff done, have 5 css classes i want rotated
> > > > > in
> > > > a
> > > > > div each 5 seconds, just an array, the classes can be definied inside
> > > > > the
> > > > js
> > > > > file.
>
> > > > > -------------------
> > > > > Alexandru Dinulescu
> > > > > Web Developer
> > > > > (X)HTML/CSS Specialist
> > > > > Expert Guarantee Certified Developer
> > > > > XHTML:http://www.expertrating.com/transcript.asp?transcriptid=1879053
> > > > > CSS :http://www.expertrating.com/transcript.asp?transcriptid=1870619
> > > > > RentACoder Profile:
> > > >http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInf...
>
> > > > > MainWebsite:http://alexd.adore.ro
>
> > > > > On Sun, Mar 22, 2009 at 4:56 AM, Eric Garside <gars...@gmail.com>
> > > > > wrote:
>
> > > > > > Try something like the following:
>
> > > > > > <div class="mobileclass"
> > > > > > thru="class-state-one,class-state-two,class-
> > > > > > state-three"></div>
>
> > > > > > And the js:
>
> > > > > > $(function(){
> > > > > > function rotateClass(){
> > > > > > var el = $(this), classes = el.data('classes'), cur = el.data
> > > > > > ('current-class'), next = cur++;
> > > > > > if (next+1 > classes.length) next = 0;
> > > > > > el.removeClass(classes[ cur ]).addClass(classes[ next ] ).data
> > > > > > ('current-class', next);
> > > > > > }
> > > > > > var mobile = $('.mobileclass').each(function(){
> > > > > > var el = $(this), classes = el.attr('thru').split(',');
> > > > > > el.data('classes', classes).data('current-class', 0).bind
> > > > > > ('rotate-class', rotateClass).addClass(classes[0]);
> > > > > > });
> > > > > > setInterval(function(){ mobile.trigger('rotate-class') }, 5000);
> > > > > > });
>
> > > > > > On Mar 21, 2:03 pm, mkmanning <michaell...@gmail.com> wrote:
> > > > > > > NaN is happening because of an error in this line:
>
> > > > > > > parseInt(div.className.substring(3));
>
> > > > > > > It most likely means your className is different.
>
> > > > > > > I just tested the code in Firefox on this markup and it works as
> > > > > > > it
> > > > > > > should:
>
> > > > > > > <div class="img1"></div>
>
> > > > > > > What does your html and js look like?
>
> > > > > > > On Mar 21, 7:21 am, Alexandru Dinulescu <alex.d.a...@gmail.com>
> > > > wrote:
>
> > > > > > > > Hello.
>
> > > > > > > > I am getting a imgNaN when using this, can you tell me how i can
> > > > make
> > > > > > the
> > > > > > > > array script work since that doesnt work either.
>
> > > > > > > > -------------------
> > > > > > > > Alexandru Dinulescu
> > > > > > > > Web Developer
> > > > > > > > (X)HTML/CSS Specialist
> > > > > > > > Expert Guarantee Certified Developer
> > > > > > > > XHTML:
> > > >http://www.expertrating.com/transcript.asp?transcriptid=1879053
> > > > > > > > CSS :
> > > >http://www.expertrating.com/transcript.asp?transcriptid=1870619
> > > > > > > > RentACoder Profile:
> > > > > >http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInf.
> > > > ..
>
> > > > > > > > MainWebsite:http://alexd.adore.ro
>
> > > > > > > > On Sat, Mar 21, 2009 at 4:13 AM, mkmanning
> > > > > > > > <michaell...@gmail.com>
> > > > > > wrote:
>
> > > > > > > > > Another alternative (no array needed, goes from img1 to img5
> > > > > > > > > and
> > > > > > > > > starts over):
>
> > > > > > > > > $(document).ready(function(){
> > > > > > > > > div = $('div.img1')[0], //get with whatever selector
> > > > > > > > > once
> > > > > > > > > swapDiv = setInterval(function(){
> > > > > > > > > n = parseInt(div.className.substring(3));
> > > > > > > > > div.className = 'img'+( n>4?1:n+1 );
> > > > > > > > > },5000);
> > > > > > > > > });
>
> > > > > > > > > If you want to stop it later, just call
> > > > > > > > > clearInterval('swapDiv');
> > > > > > > > > It's probably a little more efficient :)
>
> > > > > > > > > On Mar 20, 12:23 pm, Alexandru Dinulescu
> > > > > > > > > <alex.d.a...@gmail.com>
> > > > > > > > > wrote:
> > > > > > > > > > Hello.
>
> > > > > > > > > > Can i call this function normally like
> > > > > > > > > > function imageSwap(){
> > > > > > > > > > function code goes in here
>
> > > > > > > > > > }
>
> > > > > > > > > > $(document).ready(imageSwap);
> > > > > > > > > > ?
>
> > > > > > > > > > And another question
> > > > > > > > > > can i put in the array paramters and have variables
> > > > > > > > > > declared at
> > > > the
> > > > > > top
> > > > > > > > > > for ex is this correct?
>
> > > > > > > > > > function imageSwap() {
> > > > > > > > > > var img1 = classImg1
> > > > > > > > > > var img2 = classImg2
> > > > > > > > > > var img3 = classImg3
>
> > > > > > > > > > var imgArray = [ "img1" , "img2", "img3"];
>
> > > > > > > > > > function swap(i){
> > > > > > > > > > if(imgArray.length > i){
> > > > > > > > > > $('.' + imgArray[i]).removeClass(
>
> > > > > > > > > > > imgArray[i]).addClass(imgArray[i+1]);
> > > > > > > > > > > }else{
> > > > > > > > > > > return;
> > > > > > > > > > > }
> > > > > > > > > > > setTimeout("swap("+(i+1)+")", 5000);
> > > > > > > > > > > }
>
> > > > > > > > > > > // Call the function
> > > > > > > > > > > swap(0);
>
> ...
>
> read more »
