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); > > > > > > > > > } > > > > > > > > > > // Call the function > > > > > > > > > swap(0); > > > > > > > > > > ---- > > > > > > > > > Read jQuery HowTo Resource - > >http://jquery-howto.blogspot.com > > > > > > > > > > On Fri, Mar 20, 2009 at 5:15 PM, Alexandru Dinulescu > > > > > > > > > <alex.d.a...@gmail.com> wrote: > > > > > > > > > > Hello. > > > > > > > > > > > I have a huge question. I need something that rotates > > classes > > > > each 5 > > > > > > > > > seconds > > > > > > > > > > for ex > > > > > > > > > > > I have a <div class="img1"> </div>. I want each 5 seconds > > the > > > > class > > > > > > > to be > > > > > > > > > > changed from img1 to img2, and so on so at the start an > > array > > > > should > > > > > > > be > > > > > > > > > > placed like > > > > > > > > > > imgArray = [ "img1" , "img2", "img3", etc ] > > > > > > > > > > > I need css classes changed not a plain image since the > > image > > > > is a > > > > > > > > > > background image and i have text on it. > > > > > > > > > > > I did look over google but i couldnt find any help > > regarding > > > > this > > > > > > > matter. > > > > > > > > > > > Thank you > > > > > > > > > > > ------------------- > > > > > > > > > > Alexandru > > ... > > read more »
