- onlyBackground - which will only colorize the back color of the element
- onlyText - which will only colorize the text of the element
- both - which will color both the text and back color of the element.
Where can I find the plugin
The plugin can be downloaded here . Also, make sure you refer the jQuery library itself for this to work.How to use
First, reference the jQuery library javascript file in your html page. Next, reference the jquery random colors javascript file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="jquery-randomcolor-plugin.js" type="text/javascript"></script>
Next, apply the function in the element that you wish to apply. In the example below I have used the effect to happen once the element is clicked. The first element applies random colors to the text in the element. The second element applies random colors to the element's back color. The third element applies random colors to both the element's text and background.
randomColor('onlyText');
randomColor('onlyBackground');
randomColor('both');
HTML Page
<script type="text/javascript">
$('p').click(function () {
$(this).randomColor('onlyText');
});
$('div#header').click(function () {
$(this).randomColor('onlyBackground');
});
$('div#footer').click(function () {
$(this).randomColor('both');
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.sizeBox, #header, #footer{width:100%; height:200px; border:1px solid #000000; cursor:pointer; font-family:Calibri; font-size:40px; text-align:center}
</style>
</head>
<body style="background-color:#cccccc">
<form id="form1" runat="server">
<div id="header">click here to display <em>Only Background</em></div>
<p class="sizeBox"> click here to display <em>"Only Text"</em>
</p>
<div id="footer">click here to display <em>Both Text and Background</em></div>
</form>
</body>
</html>
No comments:
Post a Comment