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
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);
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.