CODEWITHSUNDEEP
javascriptjqueryarrayshtml
Luke C
Luke C

Reputation: 192

Loop an array to replace DIV class

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".

Upvotes: 3

Views: 1005

Answers (3)

user1636522
user1636522

Reputation:

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);

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

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

Upvotes: 1

SarathSprakash
SarathSprakash

Reputation: 4624

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

Upvotes: 3

Related Questions