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

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>

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

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