@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); > > > > > > > > > > } > > > > > > > > > > $(document).ready(imageSwap); > > > > > > > > > ------------------- > > > > > > > > > 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 Fri, Mar 20, 2009 at 2:39 PM, jQuery Lover < > > > > > ilovejqu...@gmail.com> > > > > > > > > wrote: > > > > > > > > > > > The code is not perfect: > > > > > > > > > > > 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); > > > > > > > > > > } > > ... > > read more »
