Creations Lanka: 2012

The jQuery Random Colors plugin is a cool plugin that generates random colors on elements. The plugin contains three modes that you can apply. They are

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>

Creations Lanka

Tuesday, June 12, 2012

Useful for Web Designers

Saturday, April 21, 2012

First jQuery Plugin Random Colors

Where can I find the plugin

How to use

Command to Check IP's connected in the LAN

Followers