[jQuery] Re: Rotating CSS classes each 5 sec
Hey guys.
Thanks for all your help, i am not very proeficient in Javascript (jQuery)
and i really appreciate you taking your time to explain stuff. I found it
very useful.
Best Regards
AlexD
---
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Mon, Mar 23, 2009 at 2:05 PM, RobG wrote:
>
>
>
> On Mar 23, 2:33 pm, mkmanning wrote:
> > Presumably, which points out a recurring problem: because we don't
> > know the OP's intended use, vis-à-vis actual markup and CSS, etc.
> > everything we suggest is somewhat academic.
>
> Other suggestions proposed iterating over collections of elements, I
> was pointing out an alternative.
>
> > There's a tradeoff with
> > modifying style rules vs. using class names. If you find yourself
> > having to alter too many styles, it can become cumbersome and more
>
> Naturally, the intention is not to iterate over anything and simply
> modify a single rule.
>
>
> > prone to errors
>
> It is no more error prone than any other method.
>
> > (and your presentation layer is now beginning to
> > pollute your behavior layer).
>
> Not necessarily. The values to be altered can themselves be
> encapsulated in css rules accessed by class - instead of iterating
> over some collection of elements with the same class, you swap the
> rules of one class for those of another.
>
> > Class names allow you to roll up several
> > styles into one 'package' as well as take advantage of CSS hierarchy
> > (which you could use e.g. to affect the results of the js modification
> > to the style).
>
> Which is not precluded by altering style rules, it is just a different
> approach.
>
>
> > For the OP's situation, i.e. changing a background image, it might be
> > even more efficient to use a sprite-- a single image (so you'd only
> > have a single http request), and re-position the image on each
> > rotation. That could be done in the JavaScript as you suggest, but I'd
> > still prefer to abstract it to classes rather than have to keep
> > position information in the js:
>
> Moving an image within an element with overflow hidden can be achieved
> either way. The style data does not have to be hard coded in the
> script, it only needs to be passed parameters that tell it which rules
> to replace with which other rules, that can be all the rules of class
> A with all the rules of class B (or similar).
>
>
> > .img1,.img2, .img3,.img4,.img5 {
> >background-image:#fff url(some_image_url) 0 0 no-repeat;}
> >
> > .img2{
> >background-position:0 100px;}
> >
> > .img3{
> >background-image:50px 0;}
> >
> > etc...
>
> .theDisplayedRule {}
>
> now just write the rules in .imgN to .theDisplayedRule and any element
> with class theDisplayedRule will get the changes.
>
>
>
> > Since it's presentational,
>
> That is not precluded by swapping rules, it depends on how it is
> implemented.
>
> [...]
> > I think the fact that everybody has a
> > different approach makes it very interesting though; I hope the OP can
> > see at least that there are many ways to come at the same problem.
>
> Yes.
>
> --
> Rob
[jQuery] Re: Rotating CSS classes each 5 sec
This code should work if you changes the css class in the var mobile =
$() selector:
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 = $('.actualCRotImg').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 22, 5:21 am, Alexandru Dinulescu wrote:
> My html looks like
>
>
>
>
>
>
>
>
> 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 wrote:
>
> > Try something like the following:
>
> >
>
> > 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 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:
>
> > >
>
> > > What does your html and js look like?
>
> > > On Mar 21, 7:21 am, Alexandru Dinulescu 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
> > 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
> > > > > wrote:
> > > > > > Hello.
>
> > > > > > Can i call this function normally like
> > > > > > function imageSwap(){
> > > > > > function code goes in here
>
[jQuery] Re: Rotating CSS classes each 5 sec
On Mar 23, 2:33 pm, mkmanning wrote:
> Presumably, which points out a recurring problem: because we don't
> know the OP's intended use, vis-à-vis actual markup and CSS, etc.
> everything we suggest is somewhat academic.
Other suggestions proposed iterating over collections of elements, I
was pointing out an alternative.
> There's a tradeoff with
> modifying style rules vs. using class names. If you find yourself
> having to alter too many styles, it can become cumbersome and more
Naturally, the intention is not to iterate over anything and simply
modify a single rule.
> prone to errors
It is no more error prone than any other method.
> (and your presentation layer is now beginning to
> pollute your behavior layer).
Not necessarily. The values to be altered can themselves be
encapsulated in css rules accessed by class - instead of iterating
over some collection of elements with the same class, you swap the
rules of one class for those of another.
> Class names allow you to roll up several
> styles into one 'package' as well as take advantage of CSS hierarchy
> (which you could use e.g. to affect the results of the js modification
> to the style).
Which is not precluded by altering style rules, it is just a different
approach.
> For the OP's situation, i.e. changing a background image, it might be
> even more efficient to use a sprite-- a single image (so you'd only
> have a single http request), and re-position the image on each
> rotation. That could be done in the JavaScript as you suggest, but I'd
> still prefer to abstract it to classes rather than have to keep
> position information in the js:
Moving an image within an element with overflow hidden can be achieved
either way. The style data does not have to be hard coded in the
script, it only needs to be passed parameters that tell it which rules
to replace with which other rules, that can be all the rules of class
A with all the rules of class B (or similar).
> .img1,.img2, .img3,.img4,.img5 {
> background-image:#fff url(some_image_url) 0 0 no-repeat;}
>
> .img2{
> background-position:0 100px;}
>
> .img3{
> background-image:50px 0;}
>
> etc...
.theDisplayedRule {}
now just write the rules in .imgN to .theDisplayedRule and any element
with class theDisplayedRule will get the changes.
> Since it's presentational,
That is not precluded by swapping rules, it depends on how it is
implemented.
[...]
> I think the fact that everybody has a
> different approach makes it very interesting though; I hope the OP can
> see at least that there are many ways to come at the same problem.
Yes.
--
Rob
[jQuery] Re: Rotating CSS classes each 5 sec
Presumably, which points out a recurring problem: because we don't
know the OP's intended use, vis-à-vis actual markup and CSS, etc.
everything we suggest is somewhat academic. There's a tradeoff with
modifying style rules vs. using class names. If you find yourself
having to alter too many styles, it can become cumbersome and more
prone to errors (and your presentation layer is now beginning to
pollute your behavior layer). Class names allow you to roll up several
styles into one 'package' as well as take advantage of CSS hierarchy
(which you could use e.g. to affect the results of the js modification
to the style).
For the OP's situation, i.e. changing a background image, it might be
even more efficient to use a sprite-- a single image (so you'd only
have a single http request), and re-position the image on each
rotation. That could be done in the JavaScript as you suggest, but I'd
still prefer to abstract it to classes rather than have to keep
position information in the js:
.img1,.img2, .img3,.img4,.img5 {
background-image:#fff url(some_image_url) 0 0 no-repeat;
}
.img2{
background-position:0 100px;
}
.img3{
background-image:50px 0;
}
etc...
Since it's presentational, it feels better to me to change the image
positions (e.g. if I decided to update the size of the image) in the
CSS, or perhaps add a different background-color to each style in case
the image (if individual ones are used) is missing. Changing the
latter along with the image url in the js is where it would begin to
get cumbersome I think. I think the fact that everybody has a
different approach makes it very interesting though; I hope the OP can
see at least that there are many ways to come at the same problem.
On Mar 22, 7:12 pm, RobG wrote:
> On Mar 20, 10:15 pm, Alexandru Dinulescu
> wrote:
>
> > Hello.
>
> > I have a huge question. I need something that rotates classes each 5 seconds
> > for ex
>
> > I have a . 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.
>
> Presumably there can be any number of div's with a class name of
> "img1", etc. The most efficient method is to modify the style rule
> for the class, not the class name of all the elements that might have
> it. Then changing the style will take the same amount of time
> regardless of how many elements are involved.
>
> --
> Rob
[jQuery] Re: Rotating CSS classes each 5 sec
On Mar 20, 10:15 pm, Alexandru Dinulescu wrote: > Hello. > > I have a huge question. I need something that rotates classes each 5 seconds > for ex > > I have a . 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. Presumably there can be any number of div's with a class name of "img1", etc. The most efficient method is to modify the style rule for the class, not the class name of all the elements that might have it. Then changing the style will take the same amount of time regardless of how many elements are involved. -- Rob
[jQuery] Re: Rotating CSS classes each 5 sec
> 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 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" 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 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 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
> > > > 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() {
> > >
[jQuery] Re: Rotating CSS classes each 5 sec
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" 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 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 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
> > > 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) {
>
[jQuery] Re: Rotating CSS classes each 5 sec
@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 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 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
> > 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 wrote:
> > > > My html looks like
> > > >
> > > >
> > > >
>
> > > >
> > > >
> > > >
>
> > > > 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/Re
[jQuery] Re: Rotating CSS classes each 5 sec
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 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
> 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 wrote:
> > > My html looks like
> > >
> > >
> > >
>
> > >
> > >
> > >
>
> > > 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 wrote:
>
> > > > Try something like the following:
>
> > > >
>
> > > > 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 wrote:
> > > > > NaN is happening because of an error in this line:
>
> >
[jQuery] Re: Rotating CSS classes each 5 sec
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Sun, Mar 22, 2009 at 12:40 PM, T.J. Crowder 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 wrote:
> > My html looks like
> >
> >
> >
> >
> >
> >
> >
> >
> > 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 wrote:
> >
> > > Try something like the following:
> >
> > >
> >
> > > 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 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:
> >
> > > >
> >
> > > > What does your html and js look like?
> >
> > > > On Mar 21, 7:21 am, Alexandru Dinulescu
> 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 w
[jQuery] Re: Rotating CSS classes each 5 sec
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 wrote:
> My html looks like
>
>
>
>
>
>
>
>
> 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 wrote:
>
> > Try something like the following:
>
> >
>
> > 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 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:
>
> > >
>
> > > What does your html and js look like?
>
> > > On Mar 21, 7:21 am, Alexandru Dinulescu 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
> > 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(){
> > > > >
[jQuery] Re: Rotating CSS classes each 5 sec
My html looks like
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Sun, Mar 22, 2009 at 4:56 AM, Eric Garside wrote:
>
> Try something like the following:
>
>
>
> 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 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:
> >
> >
> >
> > What does your html and js look like?
> >
> > On Mar 21, 7:21 am, Alexandru Dinulescu 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
> 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
> > > > 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://
[jQuery] Re: Rotating CSS classes each 5 sec
Try something like the following:
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 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:
>
>
>
> What does your html and js look like?
>
> On Mar 21, 7:21 am, Alexandru Dinulescu 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 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
> > > 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
> > > 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
> > > > > wrote:
> > > > > > Hello.
>
> > > > > > I have a huge question. I need something that rotates classes each 5
> > > > > seconds
> > > > > > for ex
>
> > > > > > I have a . 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 Dinulescu
> > > > > > Web Developer
> > > > > > (X)HTML/CSS
[jQuery] Re: Rotating CSS classes each 5 sec
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:
What does your html and js look like?
On Mar 21, 7:21 am, Alexandru Dinulescu 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 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
> > 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
> > 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
> > > > wrote:
> > > > > Hello.
>
> > > > > I have a huge question. I need something that rotates classes each 5
> > > > seconds
> > > > > for ex
>
> > > > > I have a . 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 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
[jQuery] Re: Rotating CSS classes each 5 sec
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Sat, Mar 21, 2009 at 4:13 AM, mkmanning 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
> 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
> 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
> > > wrote:
> > > > Hello.
> >
> > > > I have a huge question. I need something that rotates classes each 5
> > > seconds
> > > > for ex
> >
> > > > I have a . 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 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
>
[jQuery] Re: Rotating CSS classes each 5 sec
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
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 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
> > wrote:
> > > Hello.
>
> > > I have a huge question. I need something that rotates classes each 5
> > seconds
> > > for ex
>
> > > I have a . 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 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
[jQuery] Re: Rotating CSS classes each 5 sec
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Fri, Mar 20, 2009 at 2:39 PM, jQuery Lover 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
> wrote:
> > Hello.
> >
> > I have a huge question. I need something that rotates classes each 5
> seconds
> > for ex
> >
> > I have a . 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 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/ShowBioInfo.aspx?lngAuthorId=6995323
> >
> > MainWebsite: http://alexd.adore.ro
> >
> >
>
[jQuery] Re: Rotating CSS classes each 5 sec
Thank you.
I will try that tomorrow morning and see if it works
Cheers
---
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/ShowBioInfo.aspx?lngAuthorId=6995323
MainWebsite: http://alexd.adore.ro
On Fri, Mar 20, 2009 at 2:39 PM, jQuery Lover 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
> wrote:
> > Hello.
> >
> > I have a huge question. I need something that rotates classes each 5
> seconds
> > for ex
> >
> > I have a . 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 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/ShowBioInfo.aspx?lngAuthorId=6995323
> >
> > MainWebsite: http://alexd.adore.ro
> >
> >
>
[jQuery] Re: Rotating CSS classes each 5 sec
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
wrote:
> Hello.
>
> I have a huge question. I need something that rotates classes each 5 seconds
> for ex
>
> I have a . 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 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/ShowBioInfo.aspx?lngAuthorId=6995323
>
> MainWebsite: http://alexd.adore.ro
>
>
[jQuery] Re: Rotating CSS classes each 5 sec
if that is all you want to do using jQuery or pure javascript then look at how to use "setInterval" ... that can be defined to run a function at sertain intervals. check this one out also http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/ On 20 Mar, 13:15, Alexandru Dinulescu wrote: > Hello. > > I have a huge question. I need something that rotates classes each 5 seconds > for ex > > I have a . 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 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
