Image Slider Using CSS3 Key Frame Animation Without Jquery Plugins

In this tutorial we are going to learn how to create a image slider with css3 key frame animation without using jQuery or JavaScript, So Lets Get Started Live Demo Download Script

Read more

Create jQuery like fadeIn animation with javascript

Hi Guyz in this tutorial i am going to teach u how to create a jQuery like fadeIn() animation with javascript

live Demo Download Script Watch Video Tutuorial

html

html is Super easy in this we have a div and a button. And when we click the button div is fadeIn()

<button id="button">Click me</button>
<div id="div">a</div>

css

In css we are styling the div so that we can see it and giving it the property of display:none; so that it will be shown dynamicaly

<style type="text/css">
#div{
	background: cornflowerblue;
	height: 150px;
	width: 200px;
	padding: 10px;
	display: none;
}
</style>

javascript

The main role is of javascript and all the work is done by the javascript and we fire of the fadeIn() function and that function do the work

<script type="text/javascript">
	var btn = document.getElementById('button');
	btn.addEventListener('click', function(){
		var i = 0,
			el = document.getElementById('div');
		fadeIn(el, i);
	}, false);

	function fadeIn(el, i){
		el.style.display = 'block';
		i = i + 0.01;
		setOp(el, i);

		if(i<1){
			setTimeout(function(){
				fadeIn(el, i);
			},50);
		}
	}

	function setOp(el, i){
		el.style.opacity = i;
	}
</script>

Create a custom confirm box plugin with jQuery

Hey guyz sorry for the late post i was busy with girls hahaha but now i am back to my best girlfriend my computer. In this post i am going to show u how to create and use a confirm box plugin with jQuery so get started.

View demo Download Get the Latest version from GitHub

Markup of confirm box

markup is simple we have a <section> with class of .confirm-container inside we have 3 <div> of header, body, and footer

<section class="confirm-container">
			<div class="confirm-h">
				<span><!--confirm box headline--><span>
					<button class="close">x</button>
				</div>
			<div class="confirm-b">
				<p><!--confirm box message--></p>
			</div>
			<div class="confirm-f">
				<button id="cancel-btn" class="btn btn-grey">Cancel</button>
				<button class="btn btn-blue" id="function-btn">Ok</button>
			</div>
</section>

css

body{
	margin: 0;
	padding: 0;
}
#container{
	height: 700px;
width: 600px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin: 0 auto;
padding: 10px;

}
h2{
	font-family: arial;
}
.overlay{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #555;
	opacity: 0.5;
	z-index: 10;
}
.confirm-container{
	display: none;
position: fixed;
background: #fafbfb;
height: 200px;
width: 500px;
border-radius: 10px;
box-shadow: 2px 2px 15px #555;
z-index: 15;
}
.confirm-h{
	padding: 5px;
height: 30px;
border-bottom: 1px solid #ccc;
}
.confirm-h > span{
	font-family: arial;
font-weight: 400;
font-size: 20px;
}
.confirm-h .close{
float: right;
border: 0px;
background: transparent;
font-size: 15px;
font-weight: bold;
margin: 5px;
opacity: 0.6;
outline: none;
}
.confirm-h .close:hover{
	cursor: pointer;
	opacity: 1;
}
.confirm-b{
	padding: 5px;
font-family: arial;
height: 110px;
border-bottom: 1px solid #ccc;
}
.confirm-b > p{
	margin: 0;
	padding: 0;
}
.confirm-f{
	float: right;
padding: 3px;
}
/*style for buttons*/
.btn{
	display: inline-block;
font-weight: 400;
 text-align: center;
background: #fafbfb;
border:0;
padding: 3px 6px;
line-height: 1.5;
font-size: 14px;I
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
text-decoration: none;
color: black;
cursor: pointer;
font-family: verdana;
outline: none;
}
.btn-grey{
	background: #fafbfb;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 2px #ccc;
	-webkit-box-shadow: 1px 1px 2px #ccc;
	-moz-box-shadow: 1px 1px 2px #ccc;
}
.btn-grey:hover{
	box-shadow: inset 1px 1px 2px #ccc;
	-webkit-box-shadow: inset 1px 1px 2px #ccc;
	-moz-box-shadow: inset 1px 1px 2px #ccc;
	cursor: pointer;
}

.btn-blue{
	background: #4c66a4;
	border: 1px solid #445C94;
	color: #fff;
	box-shadow: 1px 1px 2px #7085B6;
	-webkit-box-shadow: 1px 1px 2px #7085B6;
	-moz-box-shadow: 1px 1px 2px #7085B6;
}
.btn-blue:hover{
box-shadow: inset 1px 1px 2px #7085B6;
	-webkit-box-shadow: inset 1px 1px 2px #7085B6;
	-moz-box-shadow: inset 1px 1px 2px #7085B6;
}

Create a jQuery plugin

I will show u how to create a jQuery plugin but for making it easy i will brake this process in 4 or 5 parts.

1. Define a jQuery plugin

//define a plugin function
(function($){
	//give a name to the plugin
	$.fn.confirm = function(userObject,callbackFunction){

	}
}) (jQuery);

2. mergin the user object to the default object

Mergin of objects in important if u want some information for the user like message or headline etc for this we will use $.extend(object1,object2); method

defaultObject = {
			'headline': 'Confirm Box',
			'message': 'Are you sure'
		};
		//merging the content of the userObject in to default object
		var option = $.extend(defaultObject, userObject);

3. Inserting the the confirm box markup dynamiclay to the DOM (page)

var markup = '<div class="confirm-h">
<button class="close">x</button></div>
<div class="confirm-b">
</div>
<div class="confirm-f">
<button class="btn btn-grey" id="cancel-btn">Cancel</button><button class="btn btn-blue" id="function-btn">Ok</button></div>
',
			$this = $(this);

		//create a overlay div
		var createOverlay = '<div class="overlay">
</div>
';
		$(createOverlay).appendTo('body');
		//add confirm box class to the div
		$this.addClass('confirm-container');

		//append markup to the confirm box
		$(markup).appendTo($this);

4. making a reference variable

//list header footer and body in variables
		var headerTitle = $('.confirm-h span',$this),
			closeBtn = $('.confirm-h button.close', $this),
			body = $('.confirm-b p',$this),
			cancelBtn = $('.confirm-f #cancel-btn', $this),
			okBtn = $('.confirm-f #function-btn', $this),
			windowW = $(document).width(),
			windowH = $(document).height(),
			boxW = $this.width(),
			boxH = $this.height(),
			overlay = $('.overlay');

4. Final touch UP

in this part we will create a closeBox() function and give work to every element of the confirm box an finaly show the box

//close box function
		function closeBox(){
			$this.slideUp(500);
			overlay.fadeOut();
			$this.removeClass("confirm-container");
			$this.html('');
		}
		headerTitle.text(option.headline);
		body.text(option.message);
		okBtn.click(callbackFunction);
		cancelBtn.click(closeBox(););
		closeBtn.click(closeBox(););
		//center the box
		$this.css('left', (windowW/2) - (boxW/2)).css('top', '150px');
		//show the box and overlay
		overlay.fadeIn();
		$this.slideDown(500);

Putting it all together

html

<!DOCTYPE html>
<html>
<head>
<title>Custom conform box</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="container">	
		<h2>Custom Confirm box by hunklessons.blogspot.com</h2>
		<button id="launchConfirm">Launch confirm box</button>
		<div id="hello"></div>
	</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="alert.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//lauch confirm box
	$('#launchConfirm').click(function(){
		$('#hello').confirm({
			'headline': 'Alert box by hunklessons',
			'message': 'Are you husain saify'
		},function(){
			alert('This is a callback function');
		});
	});
});
</script>
</body>
</head>
</html>

Css

We have dicused the css in the above part

jQuery

//plugin for custom confirm
(function($){
	//confirm version 1.0
	$.fn.confirm = function(userObject,callbackFunction){

		defaultObject = {
			'headline': 'Confirm Box',
			'message': 'Are you sure'
		};
		//merging the content of the userObject in to default object
		var option = $.extend(defaultObject, userObject);

		var markup = '<div class="confirm-h"><span></span><button class="close">x</button></div><div class="confirm-b"><p></p></div><div class="confirm-f"><button id="cancel-btn" class="btn btn-grey">Cancel</button><button class="btn btn-blue" id="function-btn">Ok</button></div>',
			$this = $(this);

		//create a overlay div
		var createOverlay = '<div class="overlay"></div>';
		$(createOverlay).appendTo('body');
		//add confirm box class to the div
		$this.addClass('confirm-container');

		//append markup to the confirm box
		$(markup).appendTo($this);

		//list header footer and body in variables
		var headerTitle = $('.confirm-h span',$this),
			closeBtn = $('.confirm-h button.close', $this),
			body = $('.confirm-b p',$this),
			cancelBtn = $('.confirm-f #cancel-btn', $this),
			okBtn = $('.confirm-f #function-btn', $this),
			windowW = $(document).width(),
			windowH = $(document).height(),
			boxW = $this.width(),
			boxH = $this.height(),
			overlay = $('.overlay');

		//close box function
		function closeBox(){
			$this.slideUp(500);
			overlay.fadeOut();
			$this.removeClass("confirm-container");
			$this.html('');
		}
		headerTitle.text(option.headline);
		body.text(option.message);
		okBtn.click(callbackFunction);
		cancelBtn.click(closeBox(););
		closeBtn.click(closeBox(););
		//center the box
		$this.css('left', (windowW/2) - (boxW/2)).css('top', '150px');
		//show the box and overlay
		overlay.fadeIn();
		$this.slideDown(500);

	}
}) (jQuery);

Creating a custom font with css

Hey guyz in this post i am going to teach u how to embed cool font in your webpage with css. Its very easy and u can manage your custom font with your custom and name and can host the fonts locally or not a cdn (content delivery network) like google. So let dive in code

Live demo Download Script Watch Tutorial

Css

Their is nothing special we are just using a @font-face{} property in css which allow us to create a embed a custom font with a custom name one thing to keep in mind is that a font should be of .woff extension beacuse this is supported by all modern browser. we have created a custom font with @font-face property and used that font in the .p class

<style type="text/css">
	@font-face{
		font-family: 'husain';
		src: url('husain.woff');
	}
	.g{
		font-family: 'husain';
	}
	</style>

html

we have used the .p class in h1 tag and your custom font will be attached to that h1 tag

<h1 class="g">Welcome to hunklessons.blogspot.com</h1>
<h1>Welcome to hunklessons.blogspot.com</h1>

Vimeo like multiple ProfilePic toggle system

While i was finding new video sites for uploading my programming video. I found a intersting feature in vimeo.com  i called it multiple ProfilePic toggling system its awsm it allow the user to upload multiple profilepic and the viewer can toggle between them and can see the pics.

Live Demo Download Watch video tutorial

html

Your markup has a div with id #container and inside that had another div with id of #Profile-container and inside it we have all our images

<div id="container">
  <center>
  <h1>Vimeo like Multiple ProfilePic</h1>
   <div class="Profile-container">
    <img class="large-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/>
    <ul>
     <li><img class="small-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg" data-large-img="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg"/></li>

     <li><img class="small-img" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg" data-large-img="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg"/></li>

     <li><img class="small-img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg" data-large-img="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg"/></li>

     <li><img class="small-img" src="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg" data-large-img="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg"/></li>

     <li><img class="small-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg" data-large-img="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/></li>
    </ul>
   </div>
  </center>
 </div>

css

        body{
  margin: 0px;
  background: #555;
 }
 #container{
  height: 800px;
  width: 700px;
  border: 1px solid #ccc;
  margin: 0 auto;
  background: #fafbfb;
 }
 .Profile-container{
  height: 300px;
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
 }
 .large-img{
  width: 250px;
  height: 250px;
 }
 .small-img{
  height: 40px;
  width: 37px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
 }
 .small-img:hover{
  border: 2px solid cornflowerblue;
 }
 .Profile-container ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
 }
 .Profile-container ul li{
  float: left;
 }

jQuery

when ever the small image is clicked we are getting the data-large-img attribute from the image and setting the data of that attribute as the src of large image

<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  //get he large image and small image 
  var largeImage = $('.large-img');
  var smallImage = $('.small-img');

  smallImage.click(function(){
   var largeImageData = $(this).attr('data-large-img');
   largeImage.attr('src', largeImageData);
  });
 });
 </script>

Putting it all together

<!DOCTYPE html>
<html>
<head>
 <title>Vimeo like multiple profilepic display - hunklessons.blogspot.com</title>
 <style type="text/css">
 body{
  margin: 0px;
  background: #555;
 }
 #container{
  height: 800px;
  width: 700px;
  border: 1px solid #ccc;
  margin: 0 auto;
  background: #fafbfb;
 }
 .Profile-container{
  height: 300px;
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
 }
 .large-img{
  width: 250px;
  height: 250px;
 }
 .small-img{
  height: 40px;
  width: 37px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
 }
 .small-img:hover{
  border: 2px solid cornflowerblue;
 }
 .Profile-container ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
 }
 .Profile-container ul li{
  float: left;
 }
 </style>
</head>
<body>
 <div id="container">
  <center>
  <h1>Vimeo like Multiple ProfilePic</h1>
   <div class="Profile-container">
    <img class="large-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/>
    <ul>
     <li><img class="small-img" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg" data-large-img="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn1/t1.0-9/1618493_631913673551904_1787347636_n.jpg"/></li>

     <li><img class="small-img" src="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg" data-large-img="https://scontent-a-sin.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/p417x417/1382385_556084301134842_814563294_n.jpg"/></li>

     <li><img class="small-img" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg" data-large-img="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1462889_577895655620373_1546442124_n.jpg"/></li>

     <li><img class="small-img" src="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg" data-large-img="https://scontent-b-sin.xx.fbcdn.net/hphotos-ash4/l/t1.0-9/p417x417/1233963_539105579499381_100893008_n.jpg"/></li>

     <li><img class="small-img" src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg" data-large-img="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-frc3/t1.0-9/p417x417/1508074_617626964980575_1709903401_n.jpg"/></li>
    </ul>
   </div>
  </center>
 </div>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  //get he large image and small image 
  var largeImage = $('.large-img');
  var smallImage = $('.small-img');

  smallImage.click(function(){
   var largeImageData = $(this).attr('data-large-img');
   largeImage.attr('src', largeImageData);
  });
 });
 </script>
 
</body>
</html>

Simple DropDown Menu with Keyboard operation shortcut

Hi Guyz in this tutorial i am going to teach u how to create a DropDown menu with Keyboard operation shortcut. U can press enter to operate the dropDown menu . Its very easy and basic it have just few lines of code and a beatuful interface

Live View Download Watch Video Tutorial

html

html has nothing special special

<div class="Dropdown">
 <span>My Account <img src="./arrow.png"></span>
  <div class="submenu">
   <ul>
      <li>Profile</li>
      <li>Settings</li>
      <li>Find Friends</li>
      <li>Feedback</li>
      <li>Signout</li>
   </ul>
  </div>
</div>

Css

body{
 background-color: #e4e8ec;
 font-family: arial;
}
.Dropdown{
 background: #FFF;
 padding: 5px 10px;
 border-radius: 10px;
 width: 120px;
 box-shadow: 2px 2px 5px #ccc;
 cursor: pointer;
}
.Dropdown span img{
 margin-bottom: 5px;
 margin-left: 20px;
}
.submenu ul{
 display: none;
 margin: 0;
 padding: 0;
 list-style: none;
 margin-top: 5px;
 background: #fff;
}
.submenu ul li{
 padding: 5px;
}
.submenu ul li:hover{
 background:#155FB0;
 color: #FFFFFF;
 cursor: pointer;
}

javaScript

In this file when class Dropdown is clicked we toggle the dropbox and when the enter button is clicked we also toggle dropbox on and off

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
  //when dropdowm button is clicked
  $('.Dropdown').click(function(){
   $('.submenu ul').toggle();
  });
  //when a key press in the document
  $(document).keyup(function(e) {
   var key = e.keyCode;
   if(key == '13'){
    $('.submenu ul').toggle();
   }
  });
 });
</script>

hunkScrollTop.js a jQuery plugin by Husain Saify

hey guyz in this post i am going to give you a  hunkScrollTop.js jQuery plugin created by Husain Saify (hunk). Its a light weight plugin with make a dynamic ScrollTop button for your website.

View Demo Download

html

to use the hunkScrollTop.js you just need to add the jQuery & hunkScrollTop.js in the head

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="hunkScrollTop.js"></script>

js

To use hunkScrollTop.js you just need to call the hunkScrollTop with html and give the speed in parameters $('html').hunkScrollTop(1000);

<script type="text/javascript">
  $(document).ready(function(){
    $('body').hunkScrollTop(1000);
  });
</script>

Tumblr & facebook like DropDown Search with jQuery & php

Hi Guyz in this post i am going to teach u how to create a tumblr like drop down search with jQuery and php. Its really simple and easy but looks very greate and give very nice user interface to the website.

Tumblr like Dropdown search with jQuery and PHP

Download Live Demo Watch Video

Database

we have to create a table name `tumblr_search` were we have fields like id, name & pic

CREATE TABLE IF NOT EXISTS `tumblr_search` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(150) NOT NULL,
  `pic` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

html

html is super easy in this we have a <input> field with id search and a <ul> tag

<div id="container">
  <div id="search-container">
   <input id="search" type="search" placeholder="Quick Search"/>
   <ul>
   </ul>
  </div>
 </div>

css

body{
 margin: 0px;
 padding: 0px;
 background:#529ecc url('https://24.media.tumblr.com/5e222941828bd79bec2bdaa8a309558a/tumblr_n2fks20OyJ1qzv12bo1_1280.jpg') no-repeat;
 background-size: 100% 100%;
}
#container{
 height: 700px;
 width: 800px;
 margin:0 auto;
 padding: 10px;
}
a{
 color: black;
 font-weight: bold;
 font-size: 20px;
}
h1{
 color: white;
}
#search-container{
 float: right;
}
#search{
 height: 25px;
 width: 180px;
 font-weight: bold;
 color: #444;
 border-radius: 15px;
 border: 1px solid transparent;
 outline: none;
 padding: 7px;
 background: white;
 opacity: 0.6;
}
#search:focus{
 opacity: 1.0;
}
#search-container ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
 margin-top: 10px;
}
#search-container ul li{
 height: 30px;
 border: 1px solid #ccc;
 background: white;
 padding: 3px;
 font-family: verdana;
}
#search-container ul li:hover{
 background: lightblue;
 cursor: pointer;
}
#search-container ul li img{
 height: 31px;
 border-radius: 5px;
 float: right;
}

javaScript

In javascript we are getting the value of your input field and sending it to the search.php page were all the result from the database is fetched and putting the response from the search.php page in the <ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('#search').bind('keyup', function(){
   var searchTerm = jQuery.trim($(this).val());
   if(searchTerm == ''){
    $('#search-container ul').html('');
   }else{
    //send the data to the database
    $.ajax({
     url: 'search.php',
     type: 'GET',
     data: {search:searchTerm},
     beforeSend: function(){
      $('#search-container ul').html('<li>Loading...</li>');
     },
     success: function(data){
      $('#search-container ul').html(data);
     }
    });
   }
  });
 });
</script>

Search.php

in search.php we are spliting the search term with preg_split function and in the foreach loop we are creating the query if the term is 1 then search only name and if term is more than 1 we prefix and in the query. then we are fetching the data from the database and displaying the result

<?php
/*
 code For Connecting to the databse
*/
 if (isset($_GET['search']) && !empty($_GET['search'])) {
  $search = mysql_real_escape_string($_GET['search']);
  $terms = preg_split('/[\s]+/', $search);//split the search term
  $term_count = 0;
  $query = '';
  foreach ($terms as $term) {
   $term_count ++;
   if($term_count == 1){
    $query .= "`name` LIKE '%$term%' ";
   }else{
    $query .= "AND `name` LIKE '%$term%'";
   }
  }
  //execute the query
  $result = mysql_query("SELECT * FROM tumblr_search WHERE $query");
  //if result found
  if(mysql_num_rows($result) > 0){
   while($row = mysql_fetch_assoc($result)){
    echo '<li>'.$row['name'].'<img src="'.$row['pic'].'"></li>';
   }
   //result not found
  }else{
   echo '<li>Not Found try hus</li>';
  }
  
 }
?>

hunkPlayer.js a jQuery video plugin Created by husain saify

hunkPlayer.js is a light weight jQuery plugin which provide a developed by Husain saify. hunkPlayer provide a custom video controls at a html5 video element across browser. hunkPlayer is developed because every browser is developing its own video player and this thing harm the webdeveloper because they want their website to be uniform accross browser and this is possible by hunkPlayer

Creat a Custom html5 video player with JavaScript

Download Script

View Demo

How to use hunkPlayer.js?

to use hunkPlayer.js is super you do not need to put something extra in your html just the simple <video> tag and call the hunkPlayer it will do the rest for you 

 <video width="550" controls>
  <source src="video.mp4" type="video/mp4">
 </video>
 <script type="text/javascript" src="jquery.js"></script> //include jquery
 <script type="text/javascript" src="jquery.hunkPlayer.min.js"></script> //include hunkPlayer.js
 <script type="text/javascript">
 $(document).ready(function(){
  $('video').hunkPlayer(); //call hunk player
 });
 </script>

Like Us on Facebook / Add Hunk As Friend

jQuery Tooltip plugin

Today i have created my first jQuery plugin and named it hunkTooltip . This is a simple & lightweight plugin you do not need to add some more in html markup just u have to select the element with jQuery.

Tooltip plugin by husain saify

Download Script

View Demo

html

To use this plugin you do not need any thing new in the html just the same markup like before just one thing is important title attribute the plugin fetch the text from the title and display it

Javascript

to use the hunkTooltip plugin you just need to select the element call the call $(element).hunkTooltip(); this function will attach the hunkTooltip plugin to that element

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.hunkTooltip.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $('a').hunkTooltip(); //call the hunkTooltip plugin
 });
 </script>

Like Us on Facebook / Add Hunk As Friend

Css3 Progress Bar

Now a days progress bar is a very important in any social media website and progress bar is very easy to create with just a few lines of css and some beautifull css3 transition

CSS3 Progress Bar

Download Script

View Demo

html

html is very simple it just have a div with class .bar and a span inside the div

<div class="bar">
 <span style="width:0%;"></span>
</div>

css

//style of div
.bar{
 width: 100%;
 background: #eee;
 padding: 3px;
 border-radius: 3px;
 box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
//style of span
.bar span{
 height: 20px;
 background: cornflowerblue;
 display: block;
 border-radius: 3px;
 -webkit-transition: width 0.8s ease;
 -moz-transition: width 0.8s ease;
 transition: width 0.8s ease;
}

Like Us on Facebook / Add Hunk As Friend