Loop an array to replace DIV class

Question

I have a landing page with a full page banner and an enter button central. My problem is, to maintain visibility of the button. I need to change it's class from .dark to .light depending on if the background is a dark one or a light one.

I have looked into changing the DIV for a set time that matches my slider and make an array that matches the colour of the background image so the button will change colour according to my array. I also want the transition from changing each DIV to 'if possible' be a fade transition.

I know I am at risk of a duplicate post here but I want to stress this question is unique to stack overflow and I cannot find my answers elsewhere.

There seems to be plenty of solutions for cycling DIVs but I need to find the one right for my problem.

Okay, so from what I have read I have tried this with jQuery:

$(window).load(function(){
 setTimeout(
  function(){

      $('#one').replaceWith($('#two'));
      $('#two').show();

   },
   10000
);
  });

I do not know how to move this into an array or add the transition, AND.. I believe this may just replace with a separate DIV, rather than just replacing the class in my DIV.

I have also looked at this:

$(document).ready(function(){
    window.setTimeout(function(){
        $(".one").replaceClass(".two");
    },100);
});

However, this doesn't seem to operate and I am unsure as to how to fix? Can someone offer me a hand to solve this puzzle I am having.

EDIT:

<div class="door">
    <img src="img/logo-inv.png">
    <br>
    <a href="#" class="btn btn-dark">ENTER</a>
</div>

I've simplified the code to avoid confusion. The tag I would like to change is "btn-dark".

How can you tell if the background is light or dark? Is there a class or ID you can reference on the background? Also some HTML would be nice to see. — AfromanJ
– AfromanJ, Commented Feb 11, 2014 at 13:45
I'll add to html now. I was going to manually set the classes in the array considering the array looped. This eliminates the need to complicate my script.. the slider isn't massive so manually setting array classes isn't a huge job for me! — Luke C
– Luke C, Commented Feb 11, 2014 at 13:48
So, your banner is actually a slider containing several images right? Does the image change automatically according to a timer? Are "DIV" and "button" the same thing? Is the button's colour the only parameter that changes (what about href, text, ...)? — user1636522
– user1636522, Commented Feb 11, 2014 at 13:50
Yes, I have a timer that I can match up with changing my div classes. This time is set at '4000' — Luke C
– Luke C, Commented Feb 11, 2014 at 13:53

SarathSprakash · Accepted Answer · 2014-02-11 14:09:52Z

3

Try this

DEMO

If you need to loop with toggling classes you should use setInterval().

code

$(document).ready(function () {
    setInterval(function () {
        $(".one").toggleClass("main");
    }, 1000);
});

Note: you can have only two possibilities using toggleClass

Hope this helps, Thank you

edited Feb 11, 2014 at 14:09

answered Feb 11, 2014 at 13:51

SarathSprakash

4,6142 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Luke C Over a year ago

That helps yes! How can I toggle the class for an array. So maybe my array wants to be 'light', 'light', 'dark', 'light'?

SarathSprakash Over a year ago

Toggle means there are only two possibilities. "Toggle the class for an array"what you mean by that?

Luke C Over a year ago

Sorry I am not too familiar with JS and jQuery. I want to replace the class in an array. So it may be an array of 'removeClass' and 'addClass'. I am not sure, I just don't know how to construct it.

SarathSprakash Over a year ago

you cant replace the class in an array using removeClass and addClass, for an array its just a string , you can match the string that you want to remove and remove that it from an array

Luke C Over a year ago

Okay I see, so can you add a div id and match this in the script; for example <div id="button">. Then add a class and replace this same class with a time delay in an array and loop this array?

|

AfromanJ · Accepted Answer · 2014-02-11 14:19:33Z

1

You can use an array to replace the classes like so:

$(document).ready(function () {
    var myClasses = ["light", "light", "dark", "light"];
    var count = 0;

    setInterval(function () {
        $(".one").removeClass("light dark").addClass(myClasses[count]);
        count >= 3 ? count = 0 : count += 1;
    }, 1000);

});

I am using setInterval() to execute the function every 1 second (1000).

Demo

With fade effect

We just have to add the below CSS.

.one {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

Demo

edited Feb 11, 2014 at 14:19

answered Feb 11, 2014 at 14:02

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

4 Comments

Luke C Over a year ago

This works!! :) I have altered this to work with my code. Is it possible to transition the change with a fade or would this not working without changing to a different div?

AfromanJ Over a year ago

You can add CSS ease to your .one class. e.g .one { transition: all 1s ease-in-out; }

Luke C Over a year ago

Thank you @AfromanJ! I notice that this is changing a DIV. It is my mistake with miscommunication. I want to replace the class of an a link. Can I change the 'var $div' to 'var $a' for same effect on <a class=""> link?

AfromanJ Over a year ago

Yep you can. That's just a variable name it can be what ever you like.

score 1 · Accepted Answer · 2014-02-11 15:08:36Z

Both examples use the same tag :

<a style="display:block;width:200px;height:200px;"></a>

Without fading : http://jsfiddle.net/wared/G68ww/. The map array is intended to ease maintenance in case you need to change class names later.

var classes = ['dark', 'light'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').addClass(
    classes[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').removeClass(classes.join(' ')).addClass(
        classes[map[i++ % map.length]]
    );
}, 1000);

Including fading using the jQuery Color plugin : http://jsfiddle.net/wared/Npj5e/. Notice that lightgray is not supported (replaced with rgb(211, 211, 211) for the demo).

var colors = ['gray', 'rgb(211, 211, 211)'];
var map = [1, 0, 0, 1, 0, 1, 0];
var i = 0;

// initializes to the first color

$('a').css(
    'backgroundColor', colors[map[i++]]
);

// starts the timer

setInterval(function () {
    $('a').animate({
        backgroundColor: $.Color(
            colors[map[i++ % map.length]]
        )
    });
}, 1000);

Collectives™ on Stack Overflow

Loop an array to replace DIV class

3 Answers 3

DEMO

code

6 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

code

6 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related