hunklessons: jquery

Showing posts with label jquery. Show all posts

Tuesday, November 10, 2015

MCQ test application in php

First of all Thank you very very much For your love and support we have reached 1k Like on FB PAGE so on this occasion i am releasing my new project “TestiFY” an online MCQ test application in php. This MCQ test application has good amount of feature. For this MCQ test application i have used Dirty PHP so that it will be easy for me to explain stuff to you guyz.
Live Demo Download Script

Wednesday, May 28, 2014

Learn jQuery in 30 Days (Became jQuery Beginner to a Pro)

Hey guyz this post will be pretty long and this post is a request from my user in this post i am going to post 30 jQuery video and u can watch that videos and learn to programme jQuery. I doesn't matter if u r a jQuery beginner or a pro this videos will help u So Get started to (Became jQuery Beginner to a Pro).

jQuery part 1 - Introduction to jQuery

In this video i will make your introduction to the world of jQuery and try to explain jQuery uses Click to watch video

jQuery part 2 - Understanding jQuery

In this video we will create your first jQuery document and testing the jQuery Click to watch video

jQuery part 3 - Learn jQuery basics

In this video we i show u some basic DOM (Document object module) manupulation with jQuery Click to watch video

jQuery part 4 - learning jQuery class method

In this video we will using some of the jQuery class method such as addClass, removeClass, toggleClass, and we will learn about bind event handler Click to watch video

jQuery part 5 - jQuery event handlers (part 1)

In this video we be talking about the most important thing in the jQuery its event handlersClick to watch video

jQuery part 6 - jQuery event handlers (part 2)

In this video we will be talking some more about event handlersClick to watch video

jQuery part 7 - Practice what we have learned

In this video we will be creating some cool example applications with jQueryClick to watch video

jQuery part 8 - jQuery val() function

In this video we will rubbing your hand to get all from the jQuery val() function. This function is used to get the value from a html tagClick to watch video

jQuery part 9 - jQuery attr() function

In this video we will learning attr() function in jQuery, this function is used to set or get a attribute of a html tagClick to watch video

jQuery part 10 Creating a cool Example

In this video we will create a cool tooltip example to get in touch of the things we have learned till nowClick to watch video

jQuery part 11 - fadeIn, fadeOut, fadeToggle animation

In this we will be learning jQUery animation techniques some thing like fadeIn fadeOut fadeToggle.Click to watch video

jQuery part 12 - jQuery animation slideUp,slideDown,slideToggle

In this we will be learning some more jQuery animation like slideUp, slideDown, slideToggle they are very cool like me take a look LOL.Click to watch video

jQuery part 13 - jQuery animate function

We will be covering the last and my favourite animation effect call animate()Click to watch video

jQuery part 14 - Ajax Load()

In this part we will be talking about ajax and and getting closer to load(). This function is used to load a external script files to the pageClick to watch video

jQuery part 15 - Ajax $.get()

In this part we will be learning about the jQuery $.get() HTTP RequestClick to watch video

jQuery part 16 - Ajax $.post()

In this part we will be learning about the jQuery $.POST() HTTP RequestClick to watch video

jQuery part 17 - Ajax $.post() callback function

In this part we will be learning about the jQuery $.POST() Callback fuctionsClick to watch video

jQuery part 18 - Ajax $.ajax() function

In this part we will be learning about the jQuery $.ajax() fuctionsClick to watch video

jQuery part 19 - Ajax $.ajax() Callback function

In this part we will be improving our feedback form and taking about $.ajax callbck functionClick to watch video

Sunday, April 27, 2014

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>

Wednesday, April 23, 2014

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);

Monday, April 7, 2014

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>

Wednesday, April 2, 2014

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>

Saturday, March 29, 2014

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>

Tuesday, March 25, 2014

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>';
  }
  
 }
?>

Thursday, March 13, 2014

Drag & Drop Multiple File Upload Like Facebook

In this post me your Dost and Host Husain Saify(hunk husain) is going to teach you to to create a facebook like Drag and Drop Multiple file upload with jQuery & php. For this we are using a uploadFile plugin Developed by Ravishanker Kusuma Thanx Sir For Developing it.

Drag and Drop Multiple File Upload With jQuery and Php

Live Demo Download jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin

JS & CSS files

In the First Step we are Including the jquery.js , jquery.uploadFile.js, uploadFile.css in the Head

<link href="https://googledrive.com/host/0B7XFDKT_0Oz4T3ZOcHk2eks4bmc/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B7XFDKT_0Oz4T3ZOcHk2eks4bmc/jquery.uploadfile.js"></script>

you can use your CDN

html

In html we have to just create a div and give it a id i have named it uploadDiv

<div id="uploadDiv">Select File</div>

javascript

In Javascript we are just using uploadFile function in the div $('div').uploadFile(); and giving some object read more about it click here

<script>
$(function(){
 $('#uploadDiv').uploadFile({
  url: "upload.php",
  allowedTypes: "png,jpg,gif",
  multiple: true,
  fileName: "hunklessons"
 });
});
</script>

upload.php

upload.php has the code for single and multiple file upload the if the file is single if block get executed and if its multiple else block get executed

<?php
$output_dir = "uploads/";
if(isset($_FILES["hunklessons"])){ 
 $return = array();
 $error = $_FILES["hunklessons"]["error"];
 //if uploading single file
 if(!is_array($file)){
  $file = $_FILES['hunklessons']['name'];
  move_uploaded_file($_FILES["hunklessons"]["tmp_name"];, $output_dir.$file);
  $return[] = $file;
 }else{ //if uploading multiple file
  foreach ($_FILES['hunklessons']['name'] as $file) {
   move_uploaded_file($_FILES["hunklessons"]["tmp_name"];, $output_dir.$file);
   $return[] = $file;
  }
 }
    echo json_encode($ret);
 }
 ?>

Any Question Plzz Comment

Thursday, March 6, 2014

Facebook like Profile Tooltip with jQuery, Ajax, Php & Mysql

In this post i am going to tell u guz how to create a facebook like profile tooltip with jQuery php & mysql. Probably this will be my last post till 26 march 2014 because currently my paper are going on and i get very less time for my girlfriend (computer) so we will meet after 26 march 2014 byeeeeeee

facebook like profile tooltip with jQuery and php

Live Demo Download

Database

first we are creating a database with general info id, fullname, headline, avatar, cover

CREATE TABLE IF NOT EXISTS `fb_profile_tooltip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(255) NOT NULL,
  `headline` varchar(255) NOT NULL,
  `avatar` text NOT NULL,
  `cover` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

html

Html is having nothing special we just have html5 data-id (anchor tag) with store the user id and that id will be fetched by jQuery and send to php to create a dynamic profile tooltip & a div with a class p-tooltip

 <div class="p-tooltip"></div>
 <table cellpadding="20">
  <td><a href="#" class="profile" data-id="1">user1</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="2">user2</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="3">user3</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="4">user4</a></td>
 </table>

css

body{
font-family: verdana;
}
a{
text-decoration: none;
}
.p-tooltip{
background: #fafbfb;
border: 1px solid #BFBFBF;
width: 320px;
margin: 0 auto;
border-radius: 5px;
position: absolute;
display: none;
padding: 0 0 10px 0;
}
.p-tooltip-cover img{
width: 100%;
height: 120px;
}
.p-tooltip-avatar{
text-align: left;
margin-top: -45px;
margin-left: 10px;
}
.p-tooltip-avatar img{
height: 75px;
width: 75px;
padding: 4px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.p-tooltip-info{
text-align: left;
}
.p-tooltip-info .p-username{
float: none;
margin-top: -70px;
margin-left: 100px;
font-size: 14px;
font-weight: bold;
color: white;
}
.p-tooltip-info .p-headline{
float: none;
margin-top: 6px;
margin-left: 100px;
font-size: 12px;
color: black;
}
.p-tooltip-button{
float: right;
margin-top: 5px;
}
.p-tooltip-button button{
cursor: pointer;
}

jQuery
we have created two function 1> showProfileTooltip(); 2> hideProfileTooltip(); when user mouseover a link we use the showProfileTooltip(); this function get the data from a get_profile.php and feed the data in the p-tooltip div and when the mouseleave we use hideProfileTooltip();

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  function showProfileTooltip(e, id){
   var top = e.clientY + 20;
   var left = e.clientX - 10;

   $('.p-tooltip').css({
    'top':top,
    'left':left
   }).show();
   //send id & get info from get_profile.php
   $.ajax({
    url: 'get_profile.php?id='+id,
    beforeSend: function(){
     $('.p-tooltip').html('Loading..');
    },
    success: function(html){
     $('.p-tooltip').html(html);
    }
   });
  }

  function hideProfileTooltip(){
   $('.p-tooltip').hide();
  }

  $('.profile').mouseover(function(e){
   var id = $(this).attr('data-id');
   showProfileTooltip(e, id);
  });

  $('.p-tooltip').mouseleave(function(){
   hideProfileTooltip();
  });
 });
 </script>

get_profile.php

in this page we are getting the user id and generating the content based on its uniquer id fetched from the html5 data-id anchor tag

<?php
 //include '../connect.php';
 ///connect to mysql 
 mysql_connect('localhost','root', '');
 mysql_select_db('hunklessons');
 //get the user id
 if(isset($_GET['id']) && !empty($_GET['id'])){
  $id = mysql_real_escape_string($_GET['id']);
  //get info of user based on user id
  $q = mysql_query("SELECT * FROM fb_profile_tooltip WHERE id='$id'");
  if(mysql_num_rows($q) == 1){
   $row = mysql_fetch_assoc($q);
   //output the html
   ?>
  <div class="p-tooltip-cover">
   <img src="<?php echo $row['cover'];?>">
  </div>
  <div class="p-tooltip-avatar">
   <img src="<?php echo $row['avatar'];?>" />
  </div>
  <div class="p-tooltip-info">
   <a target="_blank" href="http://hunklessons.blogspot.in/" style="text-decoration:none;">
    <div class="p-username"><?php echo $row['fullname'] ?></div>
    <div class="p-headline"><?php echo $row['headline'] ?></div>
   </a>
  </div>
  <div class="p-tooltip-button">
   <a target="_blank" href="http://hunklessons.blogspot.in/">
    <button>Add as friend</button><button>message</button>
   </a>
  </div>
   <?php
  }else{
   echo "Error";
  }
 }
?>

Monday, March 3, 2014

facebook like hashtag system with Php, Mysql & jQuery

Now a days hashtag is the fundamental part of a social networking site. Hashtag was first started by twitter but latter followed by every social network like tumblr, facebook, instagram etc. hashtag let you know how much people are talking about that particular topic in the world. Hashtag look like this #hashtag if you dont know what is hashtag you probably havent used a social network.

Live View & Download

Structure of database

Before starting we have to create a table with name message in our database with 3 field id ,message & hashtag

CREATE TABLE IF NOT EXISTS `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `message` text NOT NULL,
  `hashtag` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Database will look something like that

Function to Filter Hashtag

In this function we are matching the hashtag from the text filed and separating them with the help of regular experation. we are using preg_match_all() to match the #hashtags

<?php
//function to filter the hashtag
 function hashtag($msg){
  //filter the hastag
  preg_match_all('/(^|[^a-z0-9_])#([a-z0-9_]+)/i', $msg, $matched_hashtag);
  $hashtag = '';
  //if hashtag found
  if(!empty($matched_hashtag[0])){
   //fetch hastag from the array
   foreach ($matched_hashtag[0] as $matched) {
    //append every hastag to a string
    //remove the # by preg_replace function
    $hashtag .= preg_replace('/[^a-z0-9]+/', '', $matched).',';
    //append and , after every hashtag
   }
  }
  //remove , from the last hashtag
  return rtrim($hashtag, ',');
 }
?>

Function to convert http:// and #hashtag into links

<?php
//function to convert the url & hashtag into link
 function convert_to_links($msg){
  $final_message = preg_replace(array('/(?i)\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?«»“”‘’]))/', '/(^|[^a-z0-9_])@([a-z0-9_]+)/i', '/(^|[^a-z0-9_])#([a-z0-9_]+)/i'), array('<a href="$1" target="_blank">$1</a>', '$1<a href="">@$2</a>', '$1<a href="index.php?hashtag=$2">#$2</a>'), $msg);
  return $final_message;
 }
?>

Html

html is supe reasy in this we are just having a form with the id postForm a textarea a submit button & a span with id of loader to show loading when submit button is pressed

<h2>Facebook Styled Hashtag</h2>
 <form action="" method="post" id="postForm">
  <textarea id="message" placeholder="Whats on your Mind?"></textarea>
  <input type="submit" value="post">
  <span id="feedback" style="display:none;"><img src="loader.gif" style="height:25px;float:right;"></span>
 </form>

jQuery (javascript)

With jQuery we are just sending the post to the update.php file and prepending the post into the post_contaiiner div

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#postForm').submit(function(){
  var feedback = $('#feedback');
  var message = $('#message');
  //check that the message is empty or not
  if(message.val() != ''){
   feedback.show();
   $.post('update.php', {msg:message.val()}, function(response){
    $('#post_container').prepend(response);
    feedback.hide();
    message.val('');
   });
  }else{
   alert('Please enter a message');
  }
  return false;
 });
});
</script>

connect.php

Before we insert the message into the database we need to connect to the database to cooonect to the database we use mysql_connect() function

<?php
 //connect to the database
 define('host', 'localhost');
 define('username', 'root');
 define('password', '');
 define('db', 'hunklessons');
 $connect = mysql_connect(host,username,password) or die(mysql_error('Could not Connect To database'));
 $database = mysql_select_db(db) or die(mysql_error('Database not found'));
?>

Update.php

in this file we are first getting the hashtag by using Your hashtag function and then inserting the data into the database and then displaying the message and that message is picked by jQuery and display in index.php page

<?php
 require 'connect.php';
 require 'function.php';
 if(isset($_POST['msg']) && !empty($_POST['msg'])){
  $msg = mysql_real_escape_string(strip_tags(trim($_POST['msg'])));
  //get the hastag 
  $hashtags = hashtag($msg);
  //insert into db
  $query = mysql_query("INSERT INTO `message` (`message`,`hashtag`) VALUES ('$msg', '$hashtags')");
  $final_msg = convert_to_links($msg);
  echo '<div id="posts">
  <ul>
  <li><img src="image.jpg"></li>
  <li>'.$final_msg.'</li>
  <ul>
  </div>';
 }
?>

index.php

in this page we are displaying the message if the hashtag is requested then we display only the post related to hashtag and else if it is not requested we display all the post

 
<?php
  //if hashtag is requested
  if(isset($_GET['hashtag']) && !empty($_GET['hashtag'])){
   $hashtag = mysql_real_escape_string(strip_tags(trim($_GET['hashtag'])));
   $query = mysql_query("SELECT * FROM message WHERE hashtag LIKE '%$hashtag%' ORDER BY id DESC");
   $title = "Search Result For <span style='color:red;'>".$hashtag."</span> <a href='index.php'>clear</a>";
  }else{ // if not
   $query = mysql_query("SELECT * FROM message ORDER BY id DESC LIMIT 15");
   $title = "All Updates";
  }
 ?>
 <div id="post_container">
  <?php
  echo $title;
  //display the messages
  if(mysql_num_rows($query) > 0){
   while ($row = mysql_fetch_assoc($query)) {
    $final_msg = convert_to_links($row['message']);
    echo '<div id="posts">
     <ul>
     <li><a target="_blank" href="http://hunklessons.blogspot.in/"><img src="image.jpg"></a></li>
     <li>'.$final_msg.'</li>
     <ul>
     </div>';
   }
  }
  ?>
  <!--post will go here-->
 </div>

Like Us on Facebook / Add Hunk As Friend

Friday, February 28, 2014

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

Wednesday, February 26, 2014

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

Sunday, February 23, 2014

Image Rotator with jQuery & JSON

In this post i am going to create a image rotator with jQuery and JSON for this i am using a logic less template libraries Mustache.js which get the data from the external JSON file and a jQuery plugin cycle.js which rotate the data

Image Rotator with jQuery and JSON

Download Script

View Demo

html

html is very simple in html we have a main div a rotaor div in this div all the data from the json file will be feeded. we have 2 a tag which acts like next and previous button

<div id="main">
 <a href="#" id="prev_btn" class="btn">&laquo;</a>
        <a href="#" id="next_btn" class="btn">&raquo;</a>
 <div id="rotaor">
 </div>
</div>

JavaScript

javascript has very less code in simple word we are getting the data from the json file via jQuery and formatting the data with mustache.js and creating the rotator with cycle.js plugin

<!--formating the data fetched from the json file with mustache.js start-->
 <!--mustache.js template code-->
 <script type="text/template" id="mustacheTemplate">
 {{#hunklessons}}
  <div id="info">
  <h3>{{name}}</h3>
  <img src="{{photo}}" style="height:100px;" alt="image of {{name}}">
  </div>
 {{/hunklessons}}
 </script>
 <!--formating the data fetched from the json file with mustache.js end-->
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $.getJSON('hunklessons.json', function(data){//get the data from json file
   var temp = $('#mustacheTemplate').html(); //target the mustache.js template code
   var html = Mustache.to_html(temp, data);//using mustache.js to_html function to match template from the json data
   $('#rotaor').html(html);//put the data to the rotaor div

   $('#rotaor').cycle({ //using cycle.js plugin
    fx: 'fade',
    pause: 1,
    next: '#nxt_btn',
    prev: '#prev_btn',
    speed: 500,
    timeout: 1000
   });
  });
 });
 </script>

json

{"hunklessons":[
 {
  "name":"husain saify",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 },
 {
  "name":"hunk lessons",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ8Dc5YPz139SECKcfjInGQJRj_hfp1rgwKJYlRzkms6E8K8hMKamhYkBAX7bOH25PJq1b71nLnN8XR9IvN4L7Nob-LKAmEKP789o5rXK-PshLR4PynBOCslR_LeCfoEIE3YuxOWYgwOT/s1600/hunlessonslogo.png"
 },
 {
  "name":"Embed Youtube Videos With JavaScript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j54IvA7Aq33ki6M3434urcid27n0ClRiqmBMM8vMYCDN5ridXXSD0G9a7XjN8Fat-aK_9zinWWH2kkjoWRAK-ZzVW8apBEPXFyIJZnIXaOtW2Oab9Aj1eyI10c_LUX8IUju6axtlNzYC/s1600/embed-yt-videos.png"
 },
 {
  "name":"Drag and Drop Game With html5 & javascript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI4aVbre0Eb3XiyTw-OgU4zpKCZn3biRSMOwpEENgAUjNQDtKXEO7u6SAWvZrowC7dLaiVNFp_2RgETn8lcU2Hrk3q7B0lYOL3xc6Uql4xVLofm2Rm6RcqtWxFVIkmRVzLu10rMEtivdM/s1600/dragndropgame.png"
 },
 {
  "name":"Css3 Progress Bar",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2C5B0K11byBRwxtZf16Pyvoib-Iuurh65LTBZniZNlli-4hqB7Zom8xMNZJtV7XoKCUqZGv5E9LdQst61c-5C7r_zRks1CimgyUEg6xn8aJR2BXK4KhEjw_xI4hhZV5FCZ7dwp9UlnRD/s1600/cssprogressbar.png"
 },
 {
  "name":"jQuery Username Availability check",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4STXWSx7wncxFrAvo6C5kzbqP3L0NBWjE1HdDVcKdNMem9aBeBiKtxCiyIqtHraMMoapeInyVRcNGBajUoa_Y86j82oGyyCyHqSZsOxS_JTYYDbWE6P4ppenZhUSivnbdhf9zhT-JmwJ/s1600/username+available.png"
 },
 {
  "name":"Select And Upload Multiple Images With jQuery & Ajax",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31ZFckzzjR2X33q0m5HhqCQr8jWYO8dfDdVBq-ZdhYnYxlM-4f_WElDsSB3ow_obcsS7soAuAkcQMzrC5UG9qUFzEe7F-tGZPY9pXRxtg5i5B2CbJGF3agXsu8uE3P_Q_zUY9Wcz1zWz0/s1600/selectanduploadmultipleimaes.png"
 },
 {
  "name":"hunk husain",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 }
]}

Like Us on Facebook / Add Hunk As Friend

Saturday, February 22, 2014

Live Search with jQuery & JSON

Meanwhile I was amazed with the power of jQuery for handling the JSON files. Then i decided to make a live search with JSON & jQuery so thats why i am here And now stop the BUK BUK and get into the code

Live search

in live demo search for javascript, husain, hunk, youtube, jquery

Download Script

View Demo

html

html is super easy it has 2 divs first one with the id of searcharea and second one with id of update. In search are Their is a input field and in update div we are going to show the result.

<div id="searcharea">
 <h2>Live Search</h2>
 <input type="search" id="search"/>
</div>
<div id="update"></div>

hunklessons.json(JSON file)

json is filled with some dummy data of hunklessons blog post

[
 {
  "name":"husain saify",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 },
 {
  "name":"hunk lessons",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ8Dc5YPz139SECKcfjInGQJRj_hfp1rgwKJYlRzkms6E8K8hMKamhYkBAX7bOH25PJq1b71nLnN8XR9IvN4L7Nob-LKAmEKP789o5rXK-PshLR4PynBOCslR_LeCfoEIE3YuxOWYgwOT/s1600/hunlessonslogo.png"
 },
 {
  "name":"Embed Youtube Videos With JavaScript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j54IvA7Aq33ki6M3434urcid27n0ClRiqmBMM8vMYCDN5ridXXSD0G9a7XjN8Fat-aK_9zinWWH2kkjoWRAK-ZzVW8apBEPXFyIJZnIXaOtW2Oab9Aj1eyI10c_LUX8IUju6axtlNzYC/s1600/embed-yt-videos.png"
 },
 {
  "name":"Drag and Drop Game With html5 & javascript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI4aVbre0Eb3XiyTw-OgU4zpKCZn3biRSMOwpEENgAUjNQDtKXEO7u6SAWvZrowC7dLaiVNFp_2RgETn8lcU2Hrk3q7B0lYOL3xc6Uql4xVLofm2Rm6RcqtWxFVIkmRVzLu10rMEtivdM/s1600/dragndropgame.png"
 },
 {
  "name":"Css3 Progress Bar",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2C5B0K11byBRwxtZf16Pyvoib-Iuurh65LTBZniZNlli-4hqB7Zom8xMNZJtV7XoKCUqZGv5E9LdQst61c-5C7r_zRks1CimgyUEg6xn8aJR2BXK4KhEjw_xI4hhZV5FCZ7dwp9UlnRD/s1600/cssprogressbar.png"
 },
 {
  "name":"jQuery Username Availability check",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4STXWSx7wncxFrAvo6C5kzbqP3L0NBWjE1HdDVcKdNMem9aBeBiKtxCiyIqtHraMMoapeInyVRcNGBajUoa_Y86j82oGyyCyHqSZsOxS_JTYYDbWE6P4ppenZhUSivnbdhf9zhT-JmwJ/s1600/username+available.png"
 },
 {
  "name":"Select And Upload Multiple Images With jQuery & Ajax",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31ZFckzzjR2X33q0m5HhqCQr8jWYO8dfDdVBq-ZdhYnYxlM-4f_WElDsSB3ow_obcsS7soAuAkcQMzrC5UG9qUFzEe7F-tGZPY9pXRxtg5i5B2CbJGF3agXsu8uE3P_Q_zUY9Wcz1zWz0/s1600/selectanduploadmultipleimaes.png"
 },
 {
  "name":"hunk husain",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 }
]

JavaScript

In this file we are getting the hunklessons.json file with jquery $.getJSON('hunklessons.json', function(data){}); and looping throw the data with jQuery $.each(data, function(key, val)); and appending the data to a output variable at the last display the output variable.

<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript">
$('#search').keyup(function() {//when key is pressed in search bar
 var searchTerm = $(this).val(); //val of search bar
 var myExp = new RegExp(searchTerm, "i"); //regular experation

 $.getJSON('hunklessons.json', function(data){//get the json file

  var output = "<ul id='result'>";
  $.each(data, function(key, val){
   if(val.name.search(myExp) != -1){//search for the data in the json file
    output += '<li>';
    output += '<h3>' +val.name+ '</h3>';
    output += '<img src="'+val.photo+'" style="height:100px;">';
    output += '</li>';
   }
  });//end each
  output += "</ul>";
  $('#update').html(output);//output result to the update div
 });
});
</script>

Like Us on Facebook / Add Hunk As Friend

Friday, February 14, 2014

jQuery Username Availability check.

Hi in this lessons i am going to teach you how to check that a username is available with jQuery. This is very useful for developer as well as the users because they see a nice UI

jQuery username Availability Check.

Download Script

View Demo

index.php

in index.php page their is a simple input field were user put their username and that data is send to a php file this is done is real time using jQuery .keyup(function(){ }); and in the ajax request we have give a response variable in the success object this variable get the response text from the username.php file

,
<form method="post">
 <input type="text" id="username" placeholder="username">
 <span id="feedback"></span>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#username').keyup(function() {
  var username = $(this).val();
  //send the data to a username.php file
  $.ajax({
   url: './username.php',
   type: 'POST',
   data: {username:username},
   beforeSend: function(){
    $('#feedback').text('Searching....');
   },
   //get the response text from the username.php file
   success: function(response){
    $('#feedback').html(response);
   }
  });
 });
});
</script>

username.php

In username.php file the username is coming from the input filed which is in the index.php file. In username.php we are check that the username already in the database or not and outputing the result.

<?php
 //connect to the database
 mysql_connect('localhost','root','');
 mysql_select_db('hunklessons');

 if(isset($_POST['username'])){
  $username = mysql_real_escape_string($_POST['username']);
  $q = mysql_query("SELECT * FROM users WHERE username='$username'");
  $num = mysql_num_rows($q);
  if($num >= 1){
   echo "<span style='color:red'>".$username." Not Available</span>";
  }else{
   echo "<span style='color:green'>".$username." Available</span>";
  }
 }
?>

Tuesday, February 11, 2014

Select And Upload Multiple Images With jQuery & Ajax

HII Guyz my name is Husain Saify Welcome To hunklessons. In this lessons i am going to teach you guyz how to upload images without refreshing the page. For this we are using jQuery and jQuery form plugin it has a Just few lines of JavaScript code, Using this you can upload files, image and videos without refreshing the page.

Select And Upload Multiple Images With jQuery & Ajax

Download Script

View Demo

index.php

in index.php there is some jQuery code that perform ajax request to the server and prepend the uploaded image to the View div. In plain english we can say that every time the INPUT FILE TAG is change we are submitting the form to upload.php using ajaxForm Method.

<html>
<head>
 <title>jQuery & Ajax Multiple Image Upload</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="./js/jquery.form.js"></script>
</head>
<body>
 <div id="view" style="height:auto"></div>
 <form action="upload.php" method="post" enctype="multipart/form-data" id="imgform">
  Upload Image:
  <div id="imageloader" style="display:none;"><img src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif" style="height:20px;"></div>
  <div id="imagebutton"><input type="file" name="file"/></div>
 </form>
 <script type="text/javascript">
 $('#imgform').on('change',function(){ //submit the form when image is selected
  $('#imgform').ajaxForm({target: '#view',
   beforeSend: function(){//show the loader
    $('#imageloader').show();
    $('#imagebutton').hide();
   },success: function(){ //show the file button
    $('#imageloader').hide();
    $('#imagebutton').show();
   },error: function() {
    $('#imageloader').hide();
    $('#imagebutton').show();
   }
  }).submit();
 });
 </script>
</body>
</html>

upload.php

upload.php is a simple php page. this page simply check that the image file is valid or not. if the file is valid then it upload it to the server by using move_uploaded_file() function in php

';
<?php
function getExt($name){
 $str = strtolower($name);
 $data = explode(".", $str);
 $n = count($data) -1;
 return $data[$n];
}
 if(isset($_FILES['file'])){
  $name = $_FILES['file']['name'];
  $size = $_FILES['file']['size'];
  $tmp = $_FILES['file']['tmp_name'];
  $ext = getExt($name);
  $valideFormat = array('jpg','png','gif');
  //if file is had a valid format
  if(in_array($ext, $valideFormat)){
   //if size is fine
   if($size < 220833){
    //upload the file
    $newname = time().".".$ext;
    if(move_uploaded_file($tmp, './upload/'.$newname)){
    echo '<img src="./upload/'.$newname.'" style="width:250px;margin:5px;">';
    }
   }else{
    echo "Size more than 200kbs";
   }
  }else{
   echo "Invalid Format. Select a jpg png or gif image";
  }
 }

?>

Pages

Tuesday, November 10, 2015

Wednesday, May 28, 2014

Sunday, April 27, 2014

html

css

javascript

Wednesday, April 23, 2014

Markup of confirm box

css

Create a jQuery plugin

1. Define a jQuery plugin

2. mergin the user object to the default object

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

4. making a reference variable

4. Final touch UP

Putting it all together

html

Css

jQuery

Monday, April 7, 2014

html

css

jQuery

Putting it all together

Wednesday, April 2, 2014

html

Css

javaScript

Saturday, March 29, 2014

html

js

Tuesday, March 25, 2014

Database

html

css

javaScript

Search.php

Thursday, March 13, 2014

JS & CSS files

html

javascript

upload.php

Thursday, March 6, 2014

Database

html

css

get_profile.php

Monday, March 3, 2014

Structure of database

Function to Filter Hashtag

Function to convert http:// and #hashtag into links

Html

jQuery (javascript)

connect.php

Update.php

index.php

Like Us on Facebook / Add Hunk As Friend

Friday, February 28, 2014

How to use hunkPlayer.js?

Like Us on Facebook / Add Hunk As Friend

Wednesday, February 26, 2014

html

Javascript

Like Us on Facebook / Add Hunk As Friend

Sunday, February 23, 2014

html

JavaScript

json

Like Us on Facebook / Add Hunk As Friend

Saturday, February 22, 2014

html

hunklessons.json(JSON file)

JavaScript

Like Us on Facebook / Add Hunk As Friend

Friday, February 14, 2014

jQuery Username Availability check.

index.php

username.php

Tuesday, February 11, 2014