> 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...
Indeed they are, as are rotateClass and stopRotating. Fair littering
up the global namespace. ;-)
No, seriously, as I said to the OP, you'd want to wrap this up into
some kind of module or class...
-- T.J. :-)
On Mar 22, 11:10 pm, mkmanning <michaell...@gmail.com> wrote:
> 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
>
> ...
>
> read more »
