Monthly Archives: June 2016

Sorting HTML table using jQuery Table Sorter plugin

Good Morning,
Today we discuss one different topic related to Sorting HTML table using jQuery Table Sorter plugin. I got a request from one of my reader about how to sort table data based on columns.
Their are two types of sorting are available. They are:



  • Server Side
  • Client Side

In here,the client side sorting are used for sorting table columns using table sorter. This technique is developed in a responsive bootstrap table.




demo

Page Structure

  • HTML
  • CSS
  • jQuery

The HTML




		

		
Sorting HTML table using jQuery 

	

	

    
      

        Language
        Proficiency
        Mark
       

    
    
      

        English
        Advance
        4
      

      

        Malayalam
        Expert
        4
      

      

        Hindi
        Advance
        3
      

      

        Tamil
        Advance
        5
      

      

        Kannada
        Advance
        5
      

      

        Spanish
        Intermediate
        1

The CSS

In here, using responsive table structure is used for performing this operations.

The jQuery




For sorting table content first include table_sort plugin into our web page.

The tablesorter helps you to dynamically sort the information.

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Restrict Number of Characters with Live Character counter using jQuery

In this post, I explain live character counter using jQuery. This is very simple and useful. Here I implement texarea character counter using jQuery.
So you would have seen in various websites where users are not allowed to write messages/comments more than certain number of characters.
It show you at run time how many characters have been left and you can type only specified number of characters.




You can tweet only up to maximum of 140 characters and it shows you in real time that how many characters you are left with.
I already explain Simple Textarea text Counter using AngularJS

Table Of Content

  • jQuery
  • CSS
  • HTML




demo

jQuery

The jQuery in your page and then start writing jQuery to control number of characters in textarea of your form.

From the above code we can clearly says that, the maximum 150 characters can enter into texarea area. We can enter upto 150 characters only.

CSS code

HTML




If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Scroll To Top Of Page Using jQuery

Hi Guys,
The scroll to top is very important feature in web development. Many web site provide this functionality. The content of a web page exceeds and visitors scroll down the web page, then having a button to smooth scroll to the top of the page is a good idea. In many websites with scroll to top feature so that their visitors can easily navigate to top section of website with one click. The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. This feature is really helpful in websites, having long length pages.



We can implement this Scroll to top of page using jQuery. You can simply reference to the top of the page. But it’s not good look. So, we use jQuery animated function for good looking to make the scrolling easy and smooth. This feature is very easy to create and implement.

Page Content

  • jQuery
  • HTML

demo




Step 1:

Adding jQuery to a page. This code is included into the head tag of your html document.

This will tell the browser to load jQuery from Googles server when your page is loaded.

Step 2 :




This is the link or button that will take the user to the top when clicked.

Step 3:

Adding CSS style into your page in style tag.




Step 4: The main part is of jQuery code is:

The scroll to top functionality described here.

The jQuery code is checking if the value of the page scrolled down is greater than 100 then fadeIn() the button, when the button is clicked then scroll the page to the top and fadeOut() then button.

Step5: HTML Code is:

The HTML part is used for web site page content. 

	
		
		
	
			
You have created your registration.php page successfully then its time to move ahead and learn how to create login page in PHP. 
				For performing this operation using fordemo database and finforex_users table in login page.
				This login script will take username and password entered by user through login.php page.
				The encryption password (MD5) is used here. 
				Then it will match that username and password combination in database and when it finds then it check the role of the corresponding user and that combination exists in table it will allow user to login to corresponding page else it will show appropriate error message.
		    

			
If you want to run the same code over and over again, each time with a different value. Loops can execute a block of code a number of times.
			There are mainly four types of loops in JavaScript. for : loops through a block of code a number of time.
			while : loops through a block of code while a specified condition is true
			do/while : also loops through a block of code while a specified condition is true
			

			
You have created your registration.php page successfully then its time to move ahead and learn how to create login page in PHP. 
				For performing this operation using fordemo database and finforex_users table in login page.
				This login script will take username and password entered by user through login.php page.
				The encryption password (MD5) is used here. 
				Then it will match that username and password combination in database and when it finds then it check the role of the corresponding user and that combination exists in table it will allow user to login to corresponding page else it will show appropriate error message.
		    

			
If you want to run the same code over and over again, each time with a different value.
				Loops can execute a block of code a number of times. There are mainly four types of loops in JavaScript.
				for : loops through a block of code a number of times
				while : loops through a block of code while a specified condition is true
				do/while : also loops through a block of code while a specified condition is true.
			

			
I share somany article related to web development. Many people use my article for their professional growth.
			I got many tutorial requests from my readers related to web development using php, wordpress, mysql, ajax, jquery, javascript etc.
			From their request, one of my readers asked to me “ how to design facebook style background image upload and position adjustment using web development technology.”
			After along study, I using Ajax and jQuerymethod for developing this application.
			I have been published many tutorials related ajax image upload. 
			This one is something different and very interesting. Table of Content:MySQL table, HTML or PHP,JavaScript,Ajax,CSS and MySQL table. 
			The MySQL table used for storing user details to database. Here I use user table for this operation.

Full code


    
		
		Scroll to Top Using jQuery - PrittyTimes
		
		
		
	
	
		
		
	
			
You have created your registration.php page successfully then its time to move ahead and learn how to create login page in PHP. 
				For performing this operation using fordemo database and finforex_users table in login page.
				This login script will take username and password entered by user through login.php page.
				The encryption password (MD5) is used here. 
				Then it will match that username and password combination in database and when it finds then it check the role of the corresponding user and that combination exists in table it will allow user to login to corresponding page else it will show appropriate error message.
		    

			
If you want to run the same code over and over again, each time with a different value. Loops can execute a block of code a number of times.
			There are mainly four types of loops in JavaScript. for : loops through a block of code a number of time.
			while : loops through a block of code while a specified condition is true
			do/while : also loops through a block of code while a specified condition is true
			

			
You have created your registration.php page successfully then its time to move ahead and learn how to create login page in PHP. 
				For performing this operation using fordemo database and finforex_users table in login page.
				This login script will take username and password entered by user through login.php page.
				The encryption password (MD5) is used here. 
				Then it will match that username and password combination in database and when it finds then it check the role of the corresponding user and that combination exists in table it will allow user to login to corresponding page else it will show appropriate error message.
		    

			
If you want to run the same code over and over again, each time with a different value.
				Loops can execute a block of code a number of times. There are mainly four types of loops in JavaScript.
				for : loops through a block of code a number of times
				while : loops through a block of code while a specified condition is true
				do/while : also loops through a block of code while a specified condition is true.
			

			
I share somany article related to web development. Many people use my article for their professional growth.
			I got many tutorial requests from my readers related to web development using php, wordpress, mysql, ajax, jquery, javascript etc.
			From their request, one of my readers asked to me “ how to design facebook style background image upload and position adjustment using web development technology.”
			After along study, I using Ajax and jQuerymethod for developing this application.
			I have been published many tutorials related ajax image upload. 
			This one is something different and very interesting. Table of Content:MySQL table, HTML or PHP,JavaScript,Ajax,CSS and MySQL table. 
			The MySQL table used for storing user details to database. Here I use user table for this operation.

If you have any query or any doubt then please feel free to ask.

Automatically Load Content and Refresh Div Using jQuery

Good Morning Guys,
Automatically reload and displaying the content without reloading the page is very important in web application. Specially this technique is used in news or magazine website for latest news, organization website, banking site for notification etc. You can directly display content in your website from database and automatically change it after fixed interval of time. There are times when you need to refresh some part of your web page in a specific interval of time (I recommend three seconds).




This tutorial teaches you how to load contents from an external page or file into your current page and refreshes these contents every 3 seconds with the help of PHP and Jquery.

Let’s see how you can achieve this:

Main part of this tutorial is the jQuery code. This is very simple:

datas.php file is responsible for what data is to be displayed.
You can either fetch data from any file or database tables.

Code for datas.php




Secure Login page using PHP and MYSQL based on user role
";
$i_2="
  • Ajax Upload and Resize an Image with PHP
    • ";
$i_3="
  • Facebook Style Background Image Upload and Position Adjustment
    • ";
$i_4="
  • How to Manually Reset Your WordPress Admin Password
    • ";
$i_5="
  • Create Simple But Secure Registration form in PHP using PDO
    • ";
$display_content = array(
$i_1=>1, 
$i_2=>2,
$i_3=>3,
$i_4=>4,
$i_5=>5
);
 print_r(array_rand($display_content,1));
 
?>




    Code for index.php

    

Automatically Load Contents and Refresh Div using Jquery and Ajax






    Automatically refresh div using jQuery -PrittyTimes




    If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.