Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Sunday, December 15, 2013
Sunday, October 20, 2013
Deleting Multiple Records using PHP and jQuery
Some of web applications, there have a single of deleting of record, what if there have a many record? In this tutorial we will show you, using PHP and jQuery to develop a simple web application a function can able to multiple delete records, using check box.
Step 1: Setting up the database
First thing to do we need some data, go your to your phpMyAdmin create a database let say your database name is ‘multiple_delete’, after creating the database create a table let say your table name is ‘products’ and we add the following fields to the table.
- id
- product_title
- product_price
After creating the table ‘products’, insert some of sample products.
INSERT INTO products (product_title, product_price) VALUES
('iphone 4s 16GB', '$500'),
('Playstation 3 120GB', '$200'),
('Nintendo Wii', '$190'),
('Nintendo 3DS', '$50'),
('Mac Book', '$800'),
('Ipod 3', '$700'),
('Ipod 2', '$300'),
('Iphone 4', '$300'),
('Mp3 Player', '$20'),
('GPS', '$350');
Step 2: Create Database Connection
We have our product sample from the database, so we need to connect from database. Create a file named ‘database.php’, and input the following code.
database.php
<?php
$db = mysql_connect("localhost", "root", ""); // your host, user, password
if(!$db) { echo mysql_error(); }
$select_db = mysql_select_db("multiple_delete"); // database name
if(!$select_db) { echo mysql_error(); }
?>
We have assigning the database credentials. the MySQL host, username, password and database name.
Step 3: Displaying the Product from the Database
To grab the data from the database, create file name index.php, our home page, and input the following code snippet.
index.php
<?php
require_once("database.php"); // 1. require the database file
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Deleting Multiple Records using PHP and jQuery | iStockphp.com</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" /> <!--- include the css file -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <!--- include the live jquery library -->
<script type="text/javascript" src="js/script.js"></script> <!--- include the our jquery file -->
</head>
<body>
<div id="wrap" align="center"> <!--wrap start-->
<h1>Deleting Multiple Records using PHP and jQuery</h1>
<form action="delete.php" method="post" name="data_table">
<table id="table_data">
<tr>
<td>id</td>
<td>Product name</td>
<td>Price</td>
<td>Check All <input type="checkbox" id="check_all" value=""></td>
</tr>
<?php
$query = mysql_query("SELECT `id`, `product_title`, `product_price` FROM `products`"); // 2. perform a query
while($row = mysql_fetch_array($query)) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['product_title']; ?></td>
<td><?php echo $row['product_price']; ?></td>
<td><input type="checkbox" value="<?php echo $row['id']; ?>" name="data[]" id="data"></td>
</tr>
<?php
} unset($row); // unset the query after perform
?>
</table>
<br />
<input name="submit" type="submit" value="Delete" id="submit">
</form>
</div> <!--wrap end-->
</body>
</html>
We require the ‘database.php’ for our database connection, and perform a simple query to fetch the data, and also we need to include the CSS for simple style and jQuery live script and jQuery script.
style.css
body {
background: url(../images/bg.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size:13px
}
h1 {
color:#000000;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
p {
margin:10px;
padding:10px;
color:#000000;
}
table#table_data {
border: 1px solid #CCCCCC;
width: 485px;
}
table#table_data tr:first-child {
font-weight:bold;
text-transform:uppercase
}
table#table_data tr td {
border: 1px solid #CCCCCC;
text-align:center
}
table#table_data tr:first-child {
text-align:center;
border:1px solid #999
}
Step 4: Creating the jQuery Script
We create the jQuery script to triggered the all check boxes in the form, create file name ‘script.js’ and input the code snippet below.
script.js
jQuery(function($) {
$("form input[id='check_all']").click(function() { // triggred check
var inputs = $("form input[type='checkbox']"); // get the checkbox
for(var i = 0; i < inputs.length; i++) { // count input tag in the form
var type = inputs[i].getAttribute("type"); // get the type attribute
if(type == "checkbox") {
if(this.checked) {
inputs[i].checked = true; // checked
} else {
inputs[i].checked = false; // unchecked
}
}
}
});
$("form input[id='submit']").click(function() { // triggred submit
var count_checked = $("[name='data[]']:checked").length; // count the checked
if(count_checked == 0) {
alert("Please select a product(s) to delete.");
return false;
}
if(count_checked == 1) {
return confirm("Are you sure you want to delete these product?");
} else {
return confirm("Are you sure you want to delete these products?");
}
});
}); // jquery end
Step 5: The Deleting Process
After posting the data in the form action attribute, we create the PHP script to catch the post data and process the deleting script. Create the file name ‘delete.php’ and input the code snippet below.
delete.php
<?php
require_once("database.php");
if(isset($_POST['submit'])) {
$id_array = $_POST['data']; // return array
$id_count = count($_POST['data']); // count array
for($i=0; $i < $id_count; $i++) {
$id = $id_array[$i];
$query = mysql_query("DELETE FROM `products` WHERE `id` = '$id'");
if(!$query) { die(mysql_error()); }
}
header("Location: index.php"); // redirent after deleting
}
?>
Step 5: Complete
And now were done we creating the dynamic deleting multiple records using PHP and jQuery. Let’s have a look at what we’ve achieved:
- We’ve set up a database, table and products for our data.
- We’ve create a simple form to retrieve the data
- We’ve create the jQuery script to triggered the check boxes.
- We’ve create the deleting process to delete the post data array.
CREATING A SIMPLE TAB WITH JQUERY
Step 1: Creating the Page Template
In the index.html, we have a tab header block and tab contents block, in the
li tags with the attribute of id tabHeader_1, tabHeader_2 tabHeader_3 Which holds the trigger of jQuery onclick event, and the contents block are display in to block, the li id tabHeader_1 we set to active for the default active tab.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a Simple Tab with jQuery | istockphp.com</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"> </script>
</head>
<body>
<div id="wrapper"> <!--wrapper start-->
<div id="tabContainer"> <!--tabContainer start-->
<div class="tabs">
<ul>
<li id="tabHeader_1" class="active_tab">Tab 1</li>
<li id="tabHeader_2">Tab 2</li>
<li id="tabHeader_3">Register</li>
</ul>
</div> <!--tabs end-->
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<h2>Tab 1</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<div class="tabpage" id="tabpage_2">
<h2>Tab 2</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
<div class="tabpage" id="tabpage_3">
<h2>Register</h2>
<form>
<p><label>Name</label> <input name="name" type="text" size="25" /></p>
<p><label>Password</label> <input name="password" type="password" size="25" /></p>
<p><label>Re Password</label> <input name="repassword" type="password" size="25" /></p>
<p><input name="submit" type="button" value="Submit"/></p>
</form>
</div>
</div> <!--tabscontent end-->
</div> <!--tabContainer end-->
</div> <!--wrapper end-->
</body>
</html>
In css in line 45 we set the first tab to active and line 56 we set the first tab page to block.
style.css
body {
background: #CCC;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
padding:0;
margin:0
}
h2{
margin-bottom:10px;
}
div#wrapper{
width:720px;
margin:40px auto 0;
}
div#tabContainer {
width:700px;
padding:15px;
background-color:#2e2e2e;
border-radius: 4px;
}
div.tabs {
height: 36px;
}
div.tabs ul {
font-size: 18px;
list-style: none outside none;
margin:0;
padding:0
}
div.tabs ul li {
background: none repeat scroll 0 0 #666666;
border-radius: 8px 8px 0 0;
color: #FFFFFF;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 7px 10px;
}
div.tabs ul li:hover{
background: #FFFFFF;
cursor:pointer;
color: #333;
}
div.tabs ul li.active_tab {
background: #FFFFFF;
cursor:pointer;
color: #333;
}
.tabscontent {
padding:10px 10px 25px;
background: #FFFFFF; /* old browsers */
margin:0;
color:#333;
}
div.tabpage:first-child {
display:block
}
div.tabpage {
display:none
}
form label {
display: block;
float: left;
width: 90px;
}
Step 2: jQuery Script
In the script, we count the the li element
tabHeader and loop, and every click the li element we apply the jQuery remove class and add class, to remove the active elements in first load of the page and add class it self.
script.js
/* http://istockphp.com */
$(function() {
var tabs = $('div.tabs ul li').length; // count the tab
for(var i = 0; i < tabs + 1; i++) {
$('li#tabHeader_'+ i ).click(function() {
$('li.active_tab').removeClass('active_tab'); // remove class
$(this).addClass('active_tab'); // addClass to tab
var tab_id = $(this).attr('id'); // return: tabHeader_1
var id = tab_id.split("_")[1]; //
var tabpage_id = $('div#tabpage_'+id).attr('id'); // return: tabpage_1
var get_id = tabpage_id.split("_")[1]; // return: 1
$('div.tabpage').css('display', 'none');
$('div.tabscontent div#tabpage_'+ get_id).css('display', 'block');
//if(tabpage_id == 'tabpage_3'){
// ajax here, if the data from database
//}
});
}
});
Step 3: Done
And now we created hard coded simple tab with jQuery, without using the third party plugins, and we sure this tabs are tested all modern browser and internet explorer 7 and 8, Let’s have a look at what we’ve achieved:
- We set the template with default view.
- We creating the tab without using third party plugin tab.
- Tested all modern browsers, including IE 7 and 8
JQUERY SIMPLE VALIDATION IN REGISTRATION FORM
Jquery validation in the web form is extremely important in our web development, we need to learn jquery for validating the form such as online registration form, contact form or any web form design in our site for preventing human errors, malicious value’s and make valid value before inserting in the database. In reality validating forms is very easy, there have many jQuery third party plugin out there and ready to use.
But If you wonder on how validate forms your own hand, In this jquery example i would like to share our simple form validation using jQuery library.
In this tutorial we create a simple form validation jquery that have most use input fields, like in real world online registration form and also we create the dynamic date using php loop and after fill in up the form jQuery will validate the valid values after the value is valid it will pass to php file, so let’s begin.
1. Creating the Page Template
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Simple Validation in Registration Form | istockphp.com</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.9.1.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrap"> <!--wrap start-->
<div id="wrap2"> <!--wrap2 start-->
<h2 class="free_account">Create an free account</h2>
<form action="process.php" method="post" id="register_form">
<p class="validate_msg">Please fix the errors below!</p>
<p> <label for="name">First Name</label> <input name="fname" type="text" /> <span class="val_fname"></span> </p>
<p> <label for="lname">Last Name</label> <input name="lname" type="text" /> <span class="val_lname"></span> </p>
<p> <label for="email">Your Email</label> <input name="email" type="text" /> <span class="val_email"></span> </p>
<p> <label for="password">Password</label> <input name="password" type="password" /> <span class="val_pass"></span> </p>
<p> <label for="repassword">Retype Password</label> <input name="repassword" type="password" /> <span class="val_pass2"></span> </p>
<p> <label for="phone">Phone No.</label> <input name="phone" type="text" /> <span class="val_phone"></span> </p>
<p> <label for="birth">Birth Date</label>
<select name="month">
<option value="">Month</option>
<?php
$months = array('1' => 'Jan', '2' => 'Feb', '3' => 'Mar', '4' => 'Apr', '5' => 'May', '6' => 'June', '7' => 'July ', '8' => 'Aug', '9' => 'Sept', '10' => 'Oct', '11' => 'Nov', '12' => 'Dec');
foreach($months as $m => $month) {
?>
<option value="<?php echo $m; ?>"><?php echo $month; ?></option>
<?php } ?>
</select>
<select name="day">
<option value="">Day</option>
<?php for($day = 1; $day < 32; $day++) { ?>
<option value="<?php echo $day; ?>"><?php echo $day; ?></option>
<?php } ?>
</select>
<select name="year">
<option value="">Year</option>
<?php
$year = date("Y");
for($j = $year; $j > 1949; $j--) {
?>
<option value="<?php echo $j; ?>"><?php echo $j; ?></option>
<?php } ?>
</select>
<span class="val_bday"></span> </p>
<p> <label for="gender">Gender</label> <input name="gender" type="radio" value="m" /> Male <input name="gender" type="radio" value="f" /> Female <span class="val_gen"></span> </p>
<input type="submit" name="submit" value="Register">
</form>
</div> <!--wrap2 end-->
</div> <!--wrap start-->
</body>
</html>
In the index.php file we used the most common input field in web such as input fields, drop down and radio buttons. In the birthday field we turn it into the dynamic loop, for the month we use foreach loop to generate dynamic months and the days we loop 1-32 and the year we decrement the year 1949.
2. The stylesheet
style.css
body {
font-family: sans-serif;
font-size:13px;
background:#CCCCCC;
color:#444444;
}
p {
padding:2px
}
#wrap {
width:820px;
padding:20px;
margin:20px auto;
background:#fff;
border:1px solid #cc;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div#wrap2 {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding:15px;
}
h2.free_account {
color: #3399FF;
display: block;
margin-bottom: 25px;
}
form#register_form label {
display:inline-block; /* with block na */
width:125px;
font-weight:bold;
}
form#register_form label:after {
content:":"
}
form#register_form input[type='text'], input[type='password'] {
display:inline-block; /* with block na */
width:200px;
border:1px solid #ccc;
margin:0;
padding:5px;
}
form#register_form select {
border: 1px solid #CCCCCC;
display: inline-block;
margin: 0;
padding: 5px 0;
width: 68px;
}
form#register_form input[name='submit'] {
border:1px solid #3399FF;
background:#3399FF;
border-radius: 5px;
margin:10px;
color:#FFF;
padding:5px;
font-weight:bold
}
form#register_form input[name='submit'] {
cursor:pointer;
}
p.validate_msg {
border: 1px solid #FF0000;
font-weight: bold;
padding: 10px;
display:none;
margin-bottom:25px
}
span.validate {
color:#F00;
padding-left:8px;
font-style:italic;
}
Our simple style
3. The jQuery script
script.js
jQuery(function($) {
var validation_holder;
$("form#register_form input[name='submit']").click(function() {
var validation_holder = 0;
var fname = $("form#register_form input[name='fname']").val();
var lname = $("form#register_form input[name='lname']").val();
var email = $("form#register_form input[name='email']").val();
var email_regex = /^[\w%_\-.\d]+@[\w.\-]+.[A-Za-z]{2,6}$/; // reg ex email check
var password = $("form#register_form input[name='password']").val();
var repassword = $("form#register_form input[name='repassword']").val();
var phone = $("form#register_form input[name='phone']").val();
var phone_regex = /^[0-9]{4,20}$/; // reg ex phone check
var month = $("form#register_form select[name='month']").val(); // month
var day = $("form#register_form select[name='day']").val(); // day
var year = $("form#register_form select[name='year']").val(); // year
var gender = $("form#register_form input[name='gender']");
/* validation start */
if(fname == "") {
$("span.val_fname").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
$("span.val_fname").html("");
}
if(lname == "") {
$("span.val_lname").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
$("span.val_lname").html("");
}
if(email == "") {
$("span.val_email").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
if(!email_regex.test(email)){ // if invalid email
$("span.val_email").html("Invalid Email!").addClass('validate');
validation_holder = 1;
} else {
$("span.val_email").html("");
}
}
if(password == "") {
$("span.val_pass").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
$("span.val_pass").html("");
}
if(repassword == "") {
$("span.val_pass2").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
if(password != repassword) {
$("span.val_pass2").html("Password does not match!").addClass('validate');
validation_holder = 1;
} else {
$("span.val_pass2").html("");
}
}
if(phone == "") {
$("span.val_phone").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
if(!phone_regex.test(phone)){ // if invalid phone
$("span.val_phone").html("Invalid Phone Number!").addClass('validate');
validation_holder = 1;
} else {
$("span.val_phone").html("");
}
}
if((month == "") || (day == "") || (year == "")) {
$("span.val_bday").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
$("span.val_bday").html("");
}
if(gender.is(':checked') == false) {
$("span.val_gen").html("This field is required.").addClass('validate');
validation_holder = 1;
} else {
$("span.val_gen").html("");
}
if(validation_holder == 1) { // if have a field is blank, return false
$("p.validate_msg").slideDown("fast");
return false;
} validation_holder = 0; // else return true
/* validation end */
}); // click end
}); // jQuery End
In the script.js file, we set variable validation_holder with default value 0, these control the validating values, in the line 8-19 we getting the value in the fields as we validate email viaRegular Expression. The validation process start in line 22, so the common logic is if the value is equal to blank the validation_holder set to 1 and return false else return true thevalidation_holder set to 0.
4. Process Data
process.php
<?php
// author: http://istockphp.com
$fname = trim($_POST['fname']); // trim remove white space
$lname = trim($_POST['lname']);
$email = trim($_POST['email']);
$password = trim($_POST['password']);
$phone = trim($_POST['phone']);
$birth = $_POST['year'].'-'.$_POST['month'].'-'.$_POST['day'];
$gender = $_POST['gender'];
// do something. mysql_query
//header("Location: index.php");
//exit();
?>
This process.php file getting the values of the form after they validated, so we use the trimfunction to remove while space if any, then you can do mysql insert and after inserted the data, redirect to the success page.
5. Done
We’re done, we create another jquery sample the Simple Online Registration form validation using jQuery. Let’s have a look at what we’ve achieved:
- Validating the form without third party plugin.
- We create the dynamic date loop in the field.
- Simple and working jQuery validation.
Creating Custom Scrollbar with jQuery
Custom vertical / horizontal scroll bars is a nice and unique features for websites, as a web developer or designer we can apply this features in our web projects to become our projects unique.
Most websites using custom scroll bar areFacebook, Twitter and Google Gmail, So what they secrets to create custom scroll bar?
In the web there have many available ready to use plugins of this web application, but how to create our own code? In this tutorial I would like share our own idea on how to create a custom vertical scroll bar with jQuery.
This custom scroll bar we will create are have similarity on Facebook and Google GmailScroll bar. So let’s begin.
1. Creating the Page Template
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Custom Vertical Scrollbar with jQuery | istockphp.com</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.9.1.js"> </script>
<script type="text/javascript" src="js/jquery.mousewheel.js"> </script>
<script type="text/javascript" src="js/jquery-ui-draggable.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="scroll_block">
<div id="scrollbar_holder">
<div class="scrollbar"></div>
</div>
<div id="scroll_content">
<div id="content" align="justify">
<p>
Hello istockphp, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<br />
<p>
Hello istockphp, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<br />
<p>
Hello istockphp, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<br />
<p>
Hello istockphp, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<br />
<p>
Hello istockphp, Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<p>
2013 © Work by <a href="http://istockphp.com">istockphp.com</a><br />
<br />
Support us our social fan pages, we inspire to create more.
<br />
<strong>Facebook: </strong><a href="http://www.facebook.com/pages/Istockphp/235451993242578">http://www.facebook.com/pages/Istockphp/235451993242578</a><br />
<strong>Twitter:</strong> <a href="http://twitter.com/istockphp">http://twitter.com/istockphp</a><br />
<strong>Google Plus:</strong> <a href="https://plus.google.com/104655767794822143257">https://plus.google.com/104655767794822143257</a><br />
</p>
<br />
</div> <!--content end-->
</div> <!--scroll_content end-->
</div> <!--scroll_block end-->
</div> <!--wrapper end-->
</body>
</html>
In the index.html we included the stylesheet and the jQuery script, to complete this web application fast and easy we need to include the jquery.mousewheel.js to get the trigger of mouse scroll event and jquery-ui-draggable.js for drag gable trigger event and lastly our custom jQuery script.
2. The stylesheet
style.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
margin:0;
padding:0
}
div#scroll_block {
width: 500px;
height: 500px;
overflow:hidden; /* hide the scroll bar*/
margin: 20px auto 0 auto;
background:#E4E7F0;
position:relative;
}
div#scroll_content {
height: 500px;
width: 485px;
position:relative;
}
div#scrollbar_holder {
background: #ced0d3;
border-radius:8px;
float: right;
width: 15px;
position:absolute;
right:0;
}
div#content {
padding: 0 14px;
}
div.scrollbar {
background: #7c7d7f;
border-radius:8px;
width: 15px;
top:0;
}
In stylesheet, in the div#scroll_block we need to set overflow hidden to hide the contents and the div#scrollbar_holder we set to position absolute and float right for scroll bar holder.
3. The jQuery script
script.js
/*
Author: Axl Mulat
Site: http://istockphp.com
*/
jQuery(function($) {
var scrollBlockHeight = $("div#scroll_block").height(); // get height
$("div#scrollbar_holder").height(scrollBlockHeight); // set height for scroll holder
var contentHeight = $("div#content").height(); // get content div height
// formula custom scroll bar
var scrollbarHeight = ( scrollBlockHeight / contentHeight ) * scrollBlockHeight;
if(contentHeight < scrollBlockHeight) { // if the content is short, hide the scrollbar
$("div.scrollbar").css('display', 'none');
$("div#scrollbar_holder").css('display', 'none');
} else {
$("div.scrollbar").height(scrollbarHeight)
}
/* trigger 1: start function drag */
$("div.scrollbar").draggable({
axis: 'y',
containment: 'parent',
drag: function() {
var getPositionTop = parseInt($(this).css('top')); // get css top
// formula for content up
var scrollTopNew = ( getPositionTop / scrollBlockHeight) * (contentHeight);
//console.log(getPositionTop); // logs
$("div#scroll_content").css("top", '-'+scrollTopNew+'px'); // up the content
}
});
/* trigger 1: end function drag */
/* trigger 2: function scroll */
var getmoduloHeight = scrollBlockHeight - scrollbarHeight; // scrollBlock - scrollbar
// get total height content
var formulateHeight = ( getmoduloHeight / scrollBlockHeight) * (contentHeight);
$('#scroll_block').bind("mousewheel", function (event, delta) {
//console.log(delta); // delta scroll trigger
var getPositionTop = parseInt( $('div.scrollbar').css('top')); // get css top
var scrollTopNew = getPositionTop - (delta * 10); // with delta
var scrollTopContent = ( scrollTopNew / scrollBlockHeight) * (contentHeight);
//console.log(getPositionTop);
if(scrollTopNew < 0) { // if rich the top content, return false, and set default
$("div.scrollbar").css("top", "0px" );
$("div#scroll_content").css("top", "0px" );
return false;
}
if(scrollTopContent > formulateHeight) { // if rich the bottom content, return false, and set default
$("div.scrollbar").css("top", getmoduloHeight );
$("div#scroll_content").css("top", '-'+formulateHeight+'px');
return false;
}
$("div#scroll_content").css("top", '-'+scrollTopContent +'px'); // up the content
$("div.scrollbar").css("top", scrollTopNew ); // down the scroll bar
});
/* trigger 2: end function scroll */
/* trigger 3: click scrollbar holder, scroll start */
$("div#scrollbar_holder").click(function(e) { // add event
var getPositionTop = parseInt($("div.scrollbar").css('top')); // get css top
//var pageX = e.pageX - this.offsetLeft;
var pageY = e.pageY - this.offsetTop;
var topWithScroll = getPositionTop + scrollbarHeight; // get height scrolltop + scrollbar Height
var positionTop = pageY - scrollbarHeight; // pagey - scrollbar Height = to get the get height scrolltop
//console.log(pageY);
var pageY_adjust = (pageY - 20); // adjust
if(pageY_adjust < getPositionTop) { // click up the scroll bar
$("div.scrollbar").stop(true, false).animate({ "top" : pageY-40 }, 'fast');
var getPositionTop_click = pageY-40;
if(getPositionTop_click < 0) { // if user click the top level of the scroll, set to animate to top
$("div.scrollbar").stop(true, false).animate({ "top" : 0 }, 'fast');
$("div#scroll_content").stop(true, false).animate({ "top" : 0 }, 'fast');
} else {
var scrollTopNew = ( getPositionTop_click / scrollBlockHeight) * (contentHeight);
$("div#scroll_content").stop(true, false).animate({ "top" : '-'+scrollTopNew+'px' }, 'fast');
}
} else { // click down the scroll bar
if(pageY > topWithScroll) {
$("div.scrollbar").stop(true, false).animate({ "top" : positionTop }, 'fast');
var getPositionTop_click = positionTop;
if(pageY > scrollBlockHeight) { // if user click the bottom level of the scroll, set to animate to bottom
$("div.scrollbar").stop(true, false).animate({ "top" : getmoduloHeight }, 'fast'); // getmoduloHeight from scrollbar var
$("div#scroll_content").stop(true, false).animate({ "top" : '-'+formulateHeight+'px' }, 'fast'); // formulateHeight from scrollbar var
} else {
var scrollTopNew = ( getPositionTop_click / scrollBlockHeight) * (contentHeight);
$("div#scroll_content").stop(true, false).animate({ "top" : '-'+scrollTopNew+'px' }, 'fast');
}
}
}
e.preventDefault(); // like return false
});
/* trigger 3: click scrollbar holder, scroll end */
}); // jQuery End
Finally the long custom jquery script, first things first in line 7-12, we need the get the height of div#scroll_block dynamically and set the height to the div#scrollbar_holder. Then getting the height value of div#content for the formula of scroll bar. So let’s start the triggers event.
Trigger 1: Draggable Content
In line 20-32 the div#scrollbar we apply the draggable functions comes from jquery-ui-draggable.js, while dragging the div we getting the css top value that will apply the formula for content up scrolling.
Trigger 2: Scrolling Content
The scrolling event trigger starting from line 34-61, these trigger are same in drag gable function, but we need some values to work this, first the getmoduloHeight variable are the getting the value of (scrollBlockHeight – scrollbarHeight) to use and get the total height of the content, this value will we used to prevent the scroll out of the content, these variables applied in line 48-57. The delta event is for mouse scrolling, it gets the value for scrolling and we use for content up and down function.
Trigger 3: Clicking Drag Content
Finally the click drag content, it start the line 64-114, this trigger happened if the user click the div#scrollbar_holder, it move up and down the content, we set the event in the click trigger to get the value of offsetTop, what will happened in the script if the user click below and above the scroll bar it animate the content up/down and animate the scroll bar.
4. Done
We’re done, we’re creating our own custom scroll bar using jQuery. I know some of my code are complicated to understand, but sharing ideas is a good starting to create more and ideas. Hopefully my ideas you’ll make sense.
Let’s have a look at what we’ve achieved:
- Creating our own custom scroll bar
- Works in cross browser platform.
- Simple and working Vertical scroll bar.
Creating jQuery Popup Div
Jquery popup is extremely popular effect for websites, as a web developer or designer we can apply this effects very easy in our projects, we can search and download, using third party jQuery plugins. If your wonder on how to create popup div in your own hand. In this article i would like to share, on how to create a pop up div, effect using the popular jQuery library.
In this jquery example / tutorial we create jquery popup div in ‘click trigger’ event, it pop up displays with opacity background and it will remains center the popup if you scrolling zoom out the browser and closing it fadeout, and also you can customize the content of the popup div. Let’s begin.
1. Creating the Page Template
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup Div | istockphp.com</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<a href="#" class="topopup">Click Here Trigger</a>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<p>netus et malesuada fames ac turpis egestas. </p>
<p align="center"><a href="#" class="livebox">Click Here Trigger</a></p>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
</html>
In index.html, we include the css, jQuery and js script after the title tag; in the body we have 3 div containers for popup div event.
- div container for loading
- div container for popup background,
- and div container for popup
2. The stylesheet
style.css
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}
In the css, if you want scrollbar in the popup just remove comment in line 74.
3. The jQuery script
script.js
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
In the click event we triggered the
'loading()' function and delay .5 second and triggered theloadPopup(), and same for close trigger, we add little more for closing the popup, if hover the ‘Close’ the tool tip message will triggered and keyboard event for close.
4. Done
Wer’e done, we learn one of jquery sample on creating our own popup div using jQuery, you can edit the content of the popup like adding text or form. Let’s have a look at what we’ve achieved:
- We create popup div without third party plugin
- Works in old IE browser, IE 7,8
- We add little feature, hover tool tip and keyboard event
Subscribe to:
Posts (Atom)