How to change the background, text or a div color on real time with php, mysql, ajax and jQuery ?

Description:- Hello! In this lesson I’ll show you guys the logic with little example to how to change the background, text or a div color on real time with php, mysql, ajax and jQuery.
Maybe you guys have better logics to shorten my code. If you have then please comment below.

So for this lesson make the following files step by step:-
1. create database and name it “color”
2. create row in database(color) and name it colorname
3. Create 2 columns 
    (i) id
    (ii) colorcode
4. Download jQuery file
5. Create changebg.php
6. Create config.php
7. Create insertcolor.php

1. config.php

pdf of config file

2. changebg.php

pdf of changebg file

3. insertcolor.php

pdf of insertcolor file

*NOTE :- I’m providing you pdf files as my wordpress text editor is not working well copy and paste code and make the php files with the same name of files and then goto your browser after making database and then run the changebg.php file.
Live demo is available here

How to upload an image and generate thumbnail without refreshing the page using jQuery, ajax and php ?

Description:- After this example you can easily upload the image file in a new and beautiful manner. Say good bye to that old annoying browse button which doesn’t looks cool.

So, for this example follow the instructions carefully and don’t skip any step. But if you do skip then don’t throw shit on me.

Make four folders :-
1. css (in which create a css file and save in it by the name of style.css)
2. img ( Create a folder and name it img and save the two images given below.)
(i)    overlay

(ii)   default

3. Create a folder and name it as ‘js’ Save two js files in it:-
(i) jquery.form   and
(ii) jquery-1.11.2.min

4. create another folder and name it uploades and inside that folder create two more folders:-
(i) medium and
(ii) small

Now you are good to go. Now make three php files and one css file:-
1. functions.php
2. image_upload_demo.php
3. image_upload_demo_submit.php
4. style.css

 

Now copy the code step by step…

Step1.   functions.php

<?php
function createDir($path){
if (!file_exists($path)) {
$old_mask = umask(0);
mkdir($path, 0777, TRUE);
umask($old_mask);
}
}

function createThumb($path1, $path2, $file_type, $new_w, $new_h, $squareSize = ''){
/* read the source image */
$source_image = FALSE;

if (preg_match("/jpg|JPG|jpeg|JPEG/", $file_type)) {
$source_image = imagecreatefromjpeg($path1);
}
elseif (preg_match("/png|PNG/", $file_type)) {

if (!$source_image = @imagecreatefrompng($path1)) {
$source_image = imagecreatefromjpeg($path1);
}
}
elseif (preg_match("/gif|GIF/", $file_type)) {
$source_image = imagecreatefromgif($path1);
}
if ($source_image == FALSE) {
$source_image = imagecreatefromjpeg($path1);
}

$orig_w = imageSX($source_image);
$orig_h = imageSY($source_image);

if ($orig_w < $new_w && $orig_h < $new_h) {
$desired_width = $orig_w;
$desired_height = $orig_h;
} else {
$scale = min($new_w / $orig_w, $new_h / $orig_h);
$desired_width = ceil($scale * $orig_w);
$desired_height = ceil($scale * $orig_h);
}

if ($squareSize != '') {
$desired_width = $desired_height = $squareSize;
}

/* create a new, "virtual" image */
$virtual_image = imagecreatetruecolor($desired_width, $desired_height);
// for PNG background white----------->
$kek = imagecolorallocate($virtual_image, 255, 255, 255);
imagefill($virtual_image, 0, 0, $kek);

if ($squareSize == '') {
/* copy source image at a resized size */
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $orig_w, $orig_h);
} else {
$wm = $orig_w / $squareSize;
$hm = $orig_h / $squareSize;
$h_height = $squareSize / 2;
$w_height = $squareSize / 2;

if ($orig_w > $orig_h) {
$adjusted_width = $orig_w / $hm;
$half_width = $adjusted_width / 2;
$int_width = $half_width - $w_height;
imagecopyresampled($virtual_image, $source_image, -$int_width, 0, 0, 0, $adjusted_width, $squareSize, $orig_w, $orig_h);
}

elseif (($orig_w <= $orig_h)) {
$adjusted_height = $orig_h / $wm;
$half_height = $adjusted_height / 2;
imagecopyresampled($virtual_image, $source_image, 0,0, 0, 0, $squareSize, $adjusted_height, $orig_w, $orig_h);
} else {
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $squareSize, $squareSize, $orig_w, $orig_h);
}
}

if (@imagejpeg($virtual_image, $path2, 90)) {
imagedestroy($virtual_image);
imagedestroy($source_image);
return TRUE;
} else {
return FALSE;
}
}
?>

Step2. image_upload_demo.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.form.js"></script>
<script>
$(document).on('change', '#image_upload_file', function () {
var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percent = $('.progressBar .percent');

$('#image_upload_form').ajaxForm({
beforeSend: function() {
progressBar.fadeIn();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function(html, statusText, xhr, $form) {
obj = $.parseJSON(html);
if(obj.status){
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
$("#imgArea>img").prop('src',obj.image_medium);
}else{
alert(obj.error);
}
},
complete: function(xhr) {
progressBar.fadeOut();
}
}).submit();

});
</script>
</head>

<body>

<div id="imgContainer">
<form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
<div id="imgArea"><img src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Change Photo</span>
<input type="file" accept="image/*" name="image_upload_file" id="image_upload_file">
</div>
</div>
</form>
</div>
</body>
</html>

Step3. image_upload_demo_submit.php

<?php
include('./functions.php');
/*defined settings - start by webtechball*/
ini_set("memory_limit", "99M");
ini_set('post_max_size', '20M');
ini_set('max_execution_time', 600);
define('IMAGE_SMALL_DIR', './uploades/small/');
define('IMAGE_SMALL_SIZE', 50);
define('IMAGE_MEDIUM_DIR', './uploades/medium/');
define('IMAGE_MEDIUM_SIZE', 250);
/*defined settings - end by webtechball*/

if(isset($_FILES['image_upload_file'])){
$output['status']=FALSE;
set_time_limit(0);
$allowedImageType = array("image/gif",   "image/jpeg",   "image/pjpeg",   "image/png",   "image/x-png"  );

if ($_FILES['image_upload_file']["error"] > 0) {
$output['error']= "Error in File";
}
elseif (!in_array($_FILES['image_upload_file']["type"], $allowedImageType)) {
$output['error']= "You can only upload JPG, PNG and GIF file";
}
elseif (round($_FILES['image_upload_file']["size"] / 1024) > 4096) {
$output['error']= "You can upload file size up to 4 MB";
} else {
/*create directory with 777 permission if not exist - start by webtechball*/
createDir(IMAGE_SMALL_DIR);
createDir(IMAGE_MEDIUM_DIR);
/*create directory with 777 permission if not exist - end by webtechball*/
$path[0] = $_FILES['image_upload_file']['tmp_name'];
$file = pathinfo($_FILES['image_upload_file']['name']);
$fileType = $file["extension"];
$desiredExt='jpg';
$fileNameNew = rand(333, 999) . time() . ".$desiredExt";
$path[1] = IMAGE_MEDIUM_DIR . $fileNameNew;
$path[2] = IMAGE_SMALL_DIR . $fileNameNew;

if (createThumb($path[0], $path[1], $fileType, IMAGE_MEDIUM_SIZE, IMAGE_MEDIUM_SIZE,IMAGE_MEDIUM_SIZE)) {

if (createThumb($path[1], $path[2],"$desiredExt", IMAGE_SMALL_SIZE, IMAGE_SMALL_SIZE,IMAGE_SMALL_SIZE)) {
$output['status']=TRUE;
$output['image_medium']= $path[1];
$output['image_small']= $path[2];
}
}
}
echo json_encode($output);
}
?>

Step4. style.css

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background-color: #FFF;
}
a {
-moz-user-select: none;
color: #1155CC !important;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
#frame1, #frame0 {
background-color: #F7F7F7;
margin: 30px auto auto;
padding: 10px;
width: 750px;
border:1px solid #EEE;
}
#fade {
background: none repeat scroll 0 0 #D3DCE3;
display: none;
height: 100%;
left: 0;
opacity: 0.4;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
#centerBox {
background-color: #FFFFFF;
border: 5px solid #FFFFFF;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
display: none;
max-height: 480px;
overflow: auto;
visibility: hidden;
width: 710px;
z-index: 100;
}
.box1 {
background: none repeat scroll 0 0 #F3F7FD;
border: 1px solid #D3E1F9;
font-size: 12px;
margin-top: 5px;
padding: 4px;
}
.button1 {
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center bottom, #EDEDED 30%, #FFFFFF 83%);
border-color: #999999;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
color: #333333;
cursor: pointer;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
height: 25px;
line-height: 24px;
margin-right: 2px;
min-width: 40px;
padding: 0 16px;
text-align: center;
text-decoration: none;
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
}
.button1:hover {
text-decoration: underline;
}
.button1:active, .a:active {
position: relative;
top: 1px;
}


#imgContainer {
width: 100%;
text-align: center;
position: relative;
}
#imgArea {
display: inline-block;
margin: 0 auto;
width: 150px;
height: 150px;
position: relative;
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#imgArea img {
outline: medium none;
vertical-align: middle;
width: 100%;
}
#imgChange {
background: url("../img/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
color: #FFFFFF;
display: block;
height: 30px;
left: 0;
line-height: 32px;
position: absolute;
text-align: center;
width: 100%;
}
#imgChange input[type="file"] {
bottom: 0;
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 0;
}
/* Progressbar */
.progressBar {
background: none repeat scroll 0 0 #E0E0E0;
left: 0;
padding: 3px 0;
position: absolute;
top: 50%;
width: 100%;
display: none;
}
.progressBar .bar {
background-color: #FF6C67;
width: 0%;
height: 14px;
}
.progressBar .percent {
display: inline-block;
left: 0;
position: absolute;
text-align: center;
top: 2px;
width: 100%;
}

 Note* :- To run this example link all the files as they are linked by webtechball. Below is the video which shows how to copy and paste and make all the necessary folders for this example… 🙂