I have downloaded jQuery Color Picker Plugin and changed few line coding to create this simple script.It is very useful for web developers to change background color.Hope you all like this one.
Live Demo
Download Script
We need jquery libray plugin files and css files to perform this action.I have used the following css and jQuery files.
<link rel="Stylesheet" type="text/css" href="css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="jPicker.css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jpicker-1.1.6.min.js" type="text/javascript"></script>
Please share your comments and feedback.Thanks.Please subscribe my updates via email.
Live DemoDownload ScriptWe need jquery libray plugin files and css files to perform this action.I have used the following css and jQuery files.
<link rel="Stylesheet" type="text/css" href="css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="jPicker.css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jpicker-1.1.6.min.js" type="text/javascript"></script>
Jquery function
<script type="text/javascript">
$(function()
{
$.fn.jPicker.defaults.images.clientPath='images/'; //Images folder path
var LiveCallbackElement = $('#Live'),
LiveCallbackButton = $('#LiveButton');
$('#colorval').jPicker(
{window:{title:'A jQuery Color Picker Plugin'}}, //Jquery color plugin title
function(color, context)
{
var all = color.val('all');
$('body').css({ backgroundColor: all && '#' + all.hex || 'transparent' }); //Apply bgcolor to body
},
function(color, context)
{
var hex = color.val('hex'); //Get Color value
LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });
});
});
</script>
$(function()
{
$.fn.jPicker.defaults.images.clientPath='images/'; //Images folder path
var LiveCallbackElement = $('#Live'),
LiveCallbackButton = $('#LiveButton');
$('#colorval').jPicker(
{window:{title:'A jQuery Color Picker Plugin'}}, //Jquery color plugin title
function(color, context)
{
var all = color.val('all');
$('body').css({ backgroundColor: all && '#' + all.hex || 'transparent' }); //Apply bgcolor to body
},
function(color, context)
{
var hex = color.val('hex'); //Get Color value
LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });
});
});
</script>
HTML
<body id="Live">
<div id="jPicker">
<h2>Live background color change using jQuery Color Picker Plugin</h2>
<input id="colorval" type="text" value="e2ddcf" /><br />
</div>
</body>
<div id="jPicker">
<h2>Live background color change using jQuery Color Picker Plugin</h2>
<input id="colorval" type="text" value="e2ddcf" /><br />
</div>
</body>
No comments:
Post a Comment