Makitweb Posts

Alert is one of the most used functions in the JavaScript. By this, we interact with users by showing information on the screen.

For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted. There are many other cases when you can use this.

But, the problem is it does not look good on the screen.

There are many free jQuery plugins that you can use to show the user-friendly message box.

In this tutorial, I introduce you with a sweetAlert jQuery plugin by which you can show custom message box on the screen and use it as an alternative to default alert box.

Jquery

You generally display an error message while validating the form by using the alert or place message on <div> or <span> elements and show or hide them.

If you have a form which has many elements and you need to add Client-side Validation.

You are using the container to show the error messages in this case you need to create several container elements. It is a time-consuming process.

For making your validation process simpler there are many free jQuery plugins.

In this tutorial, I will explain you about Validation jQuery Plugin, using that you can define validation faster and systematic way.

Jquery

In this quick tutorial, I show How you can disable Right-click and keyboard shortcut of cut,copy, and paste from the whole document or in a particular element using jQuery.

You can find this type of functionality mainly in Test based web application where student not allowed to copy and paste content on the page.

When it’s required?

There are many cases where you can use it.

For example – You want to change the behavior of Right click and show your own context menu or For stopping the user to copy your page contents.

Jquery

Whether you are a beginner or not to the WordPress, you have seen the shake effect when you go for the Login in Admin Dashboard.

The login box shakes every time when the user enters the wrong username and password.

In this tutorial, I show How you can create the similar kind of effect using jQuery UI.

What in the demonstration?

For demonstration, I am creating two examples – In first, I am creating a basic Login form which shakes on the wrong username and password and in the second example, using the arguments with shake effect.

How to shake an element using jQuery UI

Jquery

Recent post-Widget list your latest post and it helps you to keep reader longer in your site which reduces the bounce rate.

You can add it to anywhere within your site.

But, What if you want to show the thumbnail in the Widget?

WordPress by default doesn’t show thumbnail in Recent posts Widget and if you want to add it you need to either modify the code or use Plugins.

Using plugins you can set your post featured image as the thumbnail or show any default image if there is no featured image and you can adjust its size.

In this article, I show you –

  • How you can add Recent Post Widget in the sidebar of the WordPress, if you know it you can skip to Show thumbnail using Plugins section.
  • And, add the thumbnail using Plugins.

easily-add-thumbnail-to-the-recent-posts-wordpress-1

How To

The phpMyAdmin allows us the number of ways to export the Table data one of the ways is CSV(Comma Separated Value).

There are two ways to create a CSV file with PHP –

  • By comma separated string, or
  • using fputcsv() method

I am using the fputcsv() method (writes an array to the file line by line) in the demonstration, where I am listing MySQL table data in the Tabular format and a button to export data.

When the export button gets clicked then creating a new CSV file and downloading it.

http://makitweb.com/how-to-export-mysql-table-data-as-csv-file-in-php/

DataBase PHP

Twitter only allows maximum 140 characters of a tweet. At the time of entering input, it shows how many characters are remaining.

Remaining character value changes on every character input.

Similar to Twitter other websites also uses the same functionality.

For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.

In this tutorial, I am creating the similar type of functionality with jQuery.

Twitter like remaining character count using jQuery

Javascript Jquery

With sorting the list it is easier for the user to locate items in a sorted list than unsorted. It rearranges the data in specific order (ascending or descending).

You can either use PHP or AJAX to get the sorted data.

I am using AJAX to sort the list in this tutorial.

In the demonstration, I am displaying the employee’s list and attach click event on the table column header. Whenever header gets clicked then send an AJAX request with column name to sort with.

Sorting the Table by clicking Header with AJAX

AJAX Jquery PHP

You generally write your article and publish its right off, or if you write more than 3,4 posts a Day in this case you either schedule them or save it to the Draft. And publish it on the right time.

Why not use those completed or scheduled posts to shows as upcoming posts on your website. This lets the visitors know What is now coming next.

In this article, I will talk about it How you can show upcoming posts in your WordPress site.

How To

Dropzone.js is a lightweight JavaScript library which provides drag and drops file upload with preview.

It works with or without jQuery within the project and also it doesn’t require any other libraries.

It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.

You not only upload the file by drag n’ drop you can also use file chooser dialog that’s open when drag n’ drop widget gets clicked. While uploading it shows the progress bar, generates thumbnail image and shows file size in preview after uploading.

How to upload a file using Dropzone.js with PHP

Javascript