0

Hi,

I m not sure how to start this off. I have a bunch of li and I want to add a class let s say .red to li.target at a random time then after a set time remove it. Then repeat.

I found a few things online ... but nothing really helps me in my situation.

<ul>

<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="target"></li>

</ul>

Thank you

3
Contributors
2
Replies
17
Views
4 Years
Discussion Span
Last Post by veedeoo
0

Hi,

Here is another option with jquery. Credits are due to css-tricks.com.. This script has been inspired by one of their published articles. I modified it to create a blinking effect announcement, but you can always use it to change the color of specific li.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>Random Color list </title>
<head>
<style type="text/css" media="screen">

    #target {
        color:#000;

    }
    #target.color_red {

        color:red;
        font-size:18px;
    }
</style>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

   <script type="text/javascript">
function randRange(data) {
        var newTime = data[Math.floor(data.length * Math.random())];
        return newTime;
    }

function toggleSomething() {
    var timeArray = new Array(100, 500, 250, 650, 2000, 3000, 1000, 1500);

    $("#target").toggleClass("color_red");

    clearInterval(timer);
    timer = setInterval(toggleSomething, randRange(timeArray)); 
}

var timer = setInterval(toggleSomething, 1000);
// 1000 = Initial timer when the page is first loaded
</script>


</head>

<body>

<h1>My list and target</h1>

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li id="target">This is a target li</li>
<ul>

</body>

</html>

You can control the random time in micro-secs by changing values in the array

var timeArray = new Array(100, 500, 250, 650, 2000, 3000, 1000, 1500);

Edited by veedeoo: info added

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.