$( document ).ready(function() {
$( "#style-profile-button" ).click(function() {
$( "#style-profile" ).toggle( "slow" );
});
// Checks if the user change the value of an field and show a live preview
// Backgroundcolor
$( ".target" ).change(function() {
$('#profile-container').css("background", '#' + $(this).val());
});
$('#pd-bgcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Backgroundimage
$('#pd-bgimage').change(function() {
$('#profile-container').css("background-image", 'url(' + $(this).val() + ')');
});
// Bordertype
$('#pd-borderstyle').change(function() {
$('#profile-container').css("border-style", $(this).val());
});
// Bordersize
$('#pd-bordersize').change(function() {
$('#profile-container').css("border-width", $(this).val());
});
// Bordercolor
$('#pd-bordercolor').change(function() {
$('#profile-container').css("border-color", $(this).val());
});
$('#pd-bordercolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Fontcolor
$('#pd-fontcolor').change(function() {
$('#profile-container').css("color", $(this).val());
});
$('#pd-fontcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Linkcolor
$('#pd-linkcolor').change(function() {
$('#profile-container a:link, #profile-container a:hover, #profile-container a:active, #profile-container a:visited').css("color", $(this).val());
});
$('#pd-linkcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Tableheadbackground
$('#pd-tableheadbgcolor').change(function() {
$('#profile-container .thead').css("background", $(this).val());
});
$('#pd-tableheadbgcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Tableheadcolor
$('#pd-tableheadfontcolor').change(function() {
$('#profile-container .thead').css("color", $(this).val());
});
$('#pd-tableheadfontcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Row 1 Backgroundcolor
$('#pd-row1bgcolor').change(function() {
$('#profile-container .trow1').css("background", $(this).val());
});
$('#pd-row1bgcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Row 2 Backgroundcolor
$('#pd-row2bgcolor').change(function() {
$('#profile-container .trow2').css("background", $(this).val());
});
$('#pd-row2bgcolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Tablebordertype
$('#pd-tableborderstyle').change(function() {
$('#profile-container .tborder').css("border-style", $(this).val());
});
// Tablebordersize
$('#pd-tablebordersize').change(function() {
$('#profile-container .tborder').css("border-width", $(this).val());
});
// Tablebordercolor
$('#pd-tablebordercolor').change(function() {
$('#profile-container .tborder').css("border-color", $(this).val());
});
$('#pd-tablebordercolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
// Inner tablebordercolor
$('#pd-innertablebordercolor').change(function() {
$('#profile-container .tborder').css("background", $(this).val());
});
$('#pd-innertablebordercolor').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
});
