Create custom accordion vertical menu with jquery in easy way

Here i am going to provide you very common script that you have used so much time.Here i have provided very easy way to create this script or you may apply this script in your project directly.
I this script, i haven't used any bootstrap or other framework, i just used simple html, css and jquery.

I have assumed that you have basic knowledge of  html, css and jquery. If you don't know about jquery then go to link and read jquery.ohhh...one thing more..i have used font awesome for this script.

Learn Jquery

1.  Create html part for this accordion script.

   


Heading 1 

List 1
List 2
List 3
List 4
List 5
List 6




   


   


Heading 2 

List 1
List 2
List 3
List 4
List 5
List 6

2. Now create css for this script.

@font-face{
 src:url(fonts/open-sans/OpenSans-Regular_0.ttf);
 font-family: openR;
}

body{
 font-family: openR;
}

.mainContainer{
 width: 1000px;
 margin: 0 auto;
}

.mainMenu{
 margin-bottom: 10px;
}

.mainMenu h3{
 margin: 0px;
 padding: 0px;
}

.mainMenu{
 background: #eee;
 border:1px solid #ccc;
 border-radius:3px;
 padding: 3px 5px 5px 3px;
}

.mainMenu i{
 font-size: 20px;
 cursor: pointer;
 display: block;
}

.mainMenu ul{
 margin: 0px;
 padding: 0px;
 margin-top: 20px;
 border-radius:4px;
 list-style: none;
}

.mainMenu ul li{
 padding: 5px 8px;
 display: block;
 background: #fff;
 border-top:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
}

.mainMenu ul li:last-child{
 border-bottom:1px solid #ccc;
}

3. Now create main important file for js and paste the code below.

// When window load
$(window).load(function(){
 $(".mainMenu ul").hide();
 $(".mainMenu i").addClass("fa-plus");
});

// When Page loaded
$(document).ready(function(){
 $(".mainMenu").on("click","i",function(){
  $targetDiv=$(this).attr("data-target");
  $(this).toggleClass("fa-minus");
  // console.log($targetDiv);
  $("ul."+$targetDiv).slideToggle("slow");
 });
}); 

Read More

Create effortless Dynamic Events Show in Calendar

This is very natural and clear-cut script. This is thoroughly dynamic script. I have created sensible and dynamic Calendar events with html, bootstrap, custome css and jquery. I have used the Jquery for Date-picker.In this Script I have used tooltip using with Css.In this Script I have provided the back-end you will add, Update, Delete, View Events.  This Script oftentimes use in the website. I have used bootstrap classes .if you don’t have knowledge of bootstrap. You will click on this link http://getbootstrap.com/css/ and get completely knowledge of bootstrap.

If you are fresher then this code is positive for your website. You also see Some Screenshot. I am given the database with instruction guide. How to import database in the mysql.If you want to study this code. Click this link get source code. You can also apply this script on your projects.

In this script I have created one table “calendar_events”. Which I tested demo content.

Read More

How to create vertical tabs with help of HTML & jquery?

Sometimes small things takes so much time in web development if we are beginner. Here i am talking about my next script which is small but very useful in so many project. "Vertical Tabs or you can say anything that you suit".Here i have assumed that you have some basic knowledge of jquery.

I have created a project in which i used the following technique for open different content when we click on left side link.And Believe me this is very easy to create but need some attention on this script.

First of all create the structure like following and make all div hide by default which will shown in right side. You can make this with help of jquery hide function of you can use display-none property in css. In my case i have used display none.Here is my html code that i have used in my script.

Note!   Please Remeber that your jquery should be included in footer when you run this script.

With the help of following script you can do this very easily.

$(".studentSidebarLeft").on("click",'li',function(){ //When we click on specific list.
  $(".studentSidebarLeft ul li").removeClass('active'); //remove class active from all list.
  $(this).attr('class','active'); //AT the same time add class active to current clicked list.
  $current_active_link=$(this).attr('data-student'); // get the div class which is passed with the help of data attribute
  $(".studentRightContent div").addClass('display-none'); //Add class to displaynone in all div
  $("."+$current_active_link).removeClass('display-none'); //At the same time remove class from its corresponding div.
 });

Read More

Insert data in mysql with help of php, jquery & ajax

There are number of people who are searching that how to insert data in database with help of Php, Jquery and Ajax.If you are also searching this then here is your answer.Here i have shared some knowledge about this.I have also created a example file with this tutorial which you can download.

Note !   If you doesn't find the file then feel free to email us, We will provide you soon.

1. Create Database where you will store the information.
2. Create HTML form where user will enter data. 
3. Create your js script for data insertoin via jquery & ajax.

I am using bootstrap classes and jquery-1.11.2 version for my ease.You can change this as per your convenience.I will explain you step by step.

Create your index.php file in which you make form like below:

After that create the most important custom.js file where you will get all form date and send them to php file with the help of ajax.In this file the following code will be added.

$(document).ready(function(){
 // When click on submit button
 $("#_submit").click(function(){
  // Get the all the form values
  // I am getting here single-single value from input with the help of input's ID
  $_name=$("#_name").val();
  $_username=$("#_username").val();
  $_email=$("#_email").val();
  $_pass=$("#_pass").val();
  $_conpass=$("#_conpass").val();
  // First i will check in my console window that value is coming or not, You can use developer tool in firefox and chrome.
  // Here i will check that password is match or not
  if($_pass=='' || $_pass!=$_conpass){
   $(".loading").text('Password empty or doesn\'t match');
   return false;
  }else{
   // Here i have used $.ajax method you can also use $.post, $.json or $.get method
   $.ajax({
    url:ajaxUrl,
    type:'post',
    dataType:'json',
    data:{'action':'add_user','_name':$_name,'_username':$_username,'_email':$_email,'_pass':$_pass},
    beforeSend:function(){ //this callback function is used before send request to server. 
     $(".loading").text('Loading...');
    },
    success:function(response){
     if(response.bool==true){
      $(".loading").text('Your data has been successfully added').fadeOut(3000);
      // Clear the value of form
      $_name=$("#_name").val('');
      $_username=$("#_username").val('');
      $_email=$("#_email").val('');
      $_pass=$("#_pass").val('');
      $_conpass=$("#_conpass").val('');
     }else{
      $(".loading").text(response.errorMsg);
     }
    },
    error:function(error){
     $(".loading").text(error);
    },
   });
  }
  console.log($_name); //this is just for testing purpose.
 });
});

Note! please include higher version of jquery because i have used $ sign instead of var for declaring variable.

Note! Another important the ajax url is defined in "index.php" file, the first file of this tutorial.


Now create another important file which is "ajax.php" for sending data in mysql database.

// Database Configuration
 mysql_connect("localhost","root","") or die (mysql_error());
 mysql_select_db("jquery-ajax") or die (mysql_error());

 if(isset($_POST['action'])){
  $action=$_POST['action'];
  $action(); //With this technique we can run our function.
 }

 // Create function add user in database.
 function add_user(){
  $res=new stdClass(); // In php stdClass is standard class for creating object.
  $_name=$_POST['_name'];
  $_username=$_POST['_username'];
  $_email=$_POST['_email'];
  $_pass=$_POST['_pass'];
  // Insert into database
  $insertQuery=mysql_query("INSERT INTO users (name,username,email,pass) VALUES ('$_name','$_username','$_email','$_pass')");
  if($insertQuery){
   $res->bool=true;
  }else{
   $res->msg=mysql_error();
  }
  echo json_encode($res);
  // json_encode function is used for converting objects in json becuase in our custom.js dataType is json.
 }

I hope you enjoy this tutorial.

Read More