Live Design Changing with Jquery

In this post I want to explain how to change design colors . I added user control system to manage own template design. It’s useful feature for your web projects to providing option to the end-user can customize his page template. This script divided into four parts Javascript, PHP, CSS and HTML+PHP.

This concept basically say that if we directly change the design template facility live so this Jquery code use is in your system and get rich functionality in your site.

Here we have display example for understand how it works, in this  example a html template we take, and in this html template change the design , we have a take a form for change header, footer, sidebar,background etc.

Main code is Javascript code copy this colorpicker function in your system.

Follow this Steps :

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.color').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$(".colorpicker_submit").click(function()
{
var B = $("#background").val();
var sidebar = $("#sidebarinput").val();
var header = $("#headerinput").val();
var footer = $("#footerinput").val();
var T = $("#textinput").val();
var L = $("#linkinput").val();
$("#header").css("background-color", "#"+header);
$("#main_right").css("background-color", "#"+sidebar);
$("#footer").css("background-color", "#"+footer);
$('body').css("background-color", "#"+B);
$('#container').css("color", "#"+T);
$('#container a').css("color", "#"+L);
});
});
</script>
CSS :
<style>
*{ margin:0px; padding:0px}
body
{
background-color:#<?php echo $background; ?>;
font-family:Arial, Helvetica, sans-serif;
}
#container
{
margin:0 auto;
width:800px;
color:#<?php echo $text; ?>;
}
#container a
{
color:#<?php echo $links; ?>;
}
#header
{
background-color:#<?php echo $header; ?>;
height:100px;
margin-top:15px;
}
#main
{
min-height:600px;
overflow:auto;
margin-top:10px;
}
#main_left
{
background-color:#ffffff;
min-height:600px;
width:590px;
margin-right:10px;
overflow:auto;
float:left;
}
#main_right
{
background-color:#<?php echo $sidebar; ?>;
min-height:600px;
width:200px;
overflow:auto;
float:left;
}
#footer
{
background-color:#<?php echo $footer; ?>;
height:70px;
margin-top:10px;
}
</style>

Html :

 <body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="main_left">
<form method="post" action="" />
Background:
<input type="text" name="background" id="background" class="color" value="<?php echo $background; ?>" readonly="readonly"/>
Header:
<input type="text" name="header" class="color" id="headerinput" value="<?php echo $header; ?>" readonly="readonly" />
Sidebar:
<input type="text" name="sidebar" class="color" id="sidebarinput" value="<?php echo $sidebar; ?>" readonly="readonly"/>
Footer:
<input type="text" name="footer" class="color" id="footerinput" value="<?php echo $footer; ?>" readonly="readonly"/>
Text:

<input type="text" name="text" class="color" id="textinput" value="<?php echo $text; ?>" readonly="readonly"/>
Links:
<input type="text" name="links" class="color" id="linkinput" value="<?php echo $links; ?>" readonly="readonly"/>
<input type="submit" value=" Save Changes " class='savebutton'/>
</form>
</div>
<div id="main_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>

PHP :

<?php
include('db.php');
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$background=$_POST['background'];
$header=$_POST['header'];
$sidebar=$_POST['sidebar'];
$footer=$_POST['footer'];
$links=$_POST['links'];
$text=$_POST['text'];
mysql_query("UPDATE users SET background='$background',header='$header',sidebar='$sidebar',footer='$footer',texts='$text',links='$links' WHERE user_id='$session_id'");
}
$sql=mysql_query("SELECT background,header,sidebar,footer,texts,links FROM users WHERE uid='$session_id'");
$row=mysql_fetch_array($sql);
$background=$row['background'];
$header=$row['header'];
$sidebar=$row['sidebar'];
$footer=$row['footer'];
$text=$row['texts'];
$links=$row['links'];
?>

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *