Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Change Div Background Color Randomly or Website

Dec 11, 2012
Introduction

Here I will explain how to change background color of website or div randomly using
jQuery.

Description:
  
In previous articles I explained jQuery Show Subscribe modal popup for website, jQuery Convert uppercase to lowercase,
Get latest or recent tweets using jQuery, jQuery get cursor position and many articles relating to JQuery and asp.net. Now I will explain how to change background color of website or div randomly using jQuery.

To implement this functionality we need to write the following code in your page


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
changecolor();
});
function changecolor() {
var colors = ["#00FF00", "#CCCCCC", "#990099", "#FEA400", "#FF9900", "#6600FF", "#333333", ];
var rand = Math.floor(Math.random() * colors.length);
$('#controls-wrapper').css("background-color", colors[rand]);
setTimeout('changecolor()', 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="controls-wrapper">
<p>
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com
</p>
</div>
</form>
</body>
</html>
Live Demo

Check below div for live demo


Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.comWelcome to Aspdotnet-Suresh.com

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Manohara Ravikumar said...

good article..

Anonymous said...

good article of jquery divisoin..

navya said...

nice code of jquery division...

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.