Makitweb Posts

Sometimes you may want to take more control over your user Browser when he/she opens your website in a Browser Window.

For example – you want to know when the user closes the Browser Tab and execute your code.

If you want to know How much time the user active on your website, in this case, you can use JavaScript. Using that you only enabled the timer when the user is an active tab in your website.

Or you want to run the Animation only when the user is active otherwise stop it.

This kind of functionality you have seen in the websites or PTC sites which provide ads viewing to the users. They only count the ads view when the user is active on their website until given time otherwise they cancel the view after the specific time.

In this tutorial, I show How you can use JavaScript to detect whether Browser Tab Window is active or not.

How to Detect Browser Window is active or not - JavaScript

Javascript Jquery

Have you ever think to make Live Editable Table that allows your users to quickly modify content and save it.

If you are not using live editing on your web page then you send the user to Edit form page every time when it wants to update its data and after saving take back it to the List page.

This is a time-consuming process and not very user-friendly.

You can do this with jQuery AJAX.

In this tutorial, I show you two ways to make your table columns editable –

  1. Using contentEditable attribute
  2. Showing input element when the user clicks on the cell.

Make Live Editable Table with jQuery AJAX

AJAX Jquery PHP

You already know that in HTML there is no search option in the dropdown element. When you press any single key on the dropdown then it takes you to the option but not allows you to search whole or particular string.

There are many jQuery plugins which do this for you.

But in this tutorial, I am not using any jQuery plugins for implementing it.

When it’s required?

This kind of feature generally requires when we have the long list of options in the Select element and want to make an easier navigation for users.

By this way, you enable user to search option on dropdown

The most common example is Country Dropdown which you have seen on many websites when you go for Registration.

What in the Demonstration ?

Creating a simple form which also contains a drop-down element. When the dropdown gets clicked then showing the Search Box and according to the input show suggestion.

Make a Dropdown with Search Box using jQuery

AJAX Jquery PHP

On your Client-side with jQuery, JavaScript you cannot delete any files. You need to use Server-side scripting for doing it.

In PHP, you can simply use unlink() function this removed a file from your server if it exists.

Sometimes you have the requirement to delete a resource file without reloading the page. This cannot total done with PHP you need to use jQuery or JavaScript with it by which you need to send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

What in the demonstration ?

For demonstration purpose, I create a number of <img> element with Delete Button. When the Button gets clicked then removing the file using jQuery AJAX and replace the <img> source with the default image.

How to delete file with jQuery AJAX

AJAX PHP

In this tutorial, I show How you can concatenate multiple columns in MySQL.

You can simply do this programmatically by separately select fields from MySQL Table and store their values in the single variable after concat their values.

But you can make the above process little simpler by concatenating the values while selecting rows from DataBase Table.

Let’s take a simple example –

You have two columns – firstname, lastname within your DataBase Table you want to show both the columns values in a single string form. In case you can MySQL functions to combine the values of the columns.

There are two functions for doing this –

  • CONCAT
  • CONCAT_WS

Both functions work similar but have little difference.

How to concatenate multiple columns in MySQL

DataBase

I think you already know that the Unix Timestamp is not Human readable values it is just set of Integer numbers to the user when you show it on the screen.

Because of this reason we need to convert it before present it to the user.

If you do not convert the value while selecting rows from the Database Table then you are doing this programmatically after SELECT.

In the PHP you can use the date() function for converting.

$timestamp = 1476956996;
echo "date time : ".date('d-M-Y H:i:s a',$timestamp);

This gives the following output –

date time : 20-Oct-2016 11:49:56 am

DataBase

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves your time when you need to add the same line of code in several files.

But what when you are not using Server side scripting within your project.

For solving your problem you can use <iframe > which simply add another page in your file but I don’t think it is a better way.

You can handle this on your Client-side with jQuery.

There are two ways in jQuery for including one file to another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX Jquery

I think you have already used before and after pseudo-elements within your CSS many times. It inserts CSS on your targeted element before or after.

Within jQuery, there are two methods with the similar name. But they position or add the element before and after instead of changing CSS.

before() and after() method in jQuery

Jquery

Sometimes we have required displaying the custom context menu instead of Web Browser default one.

By doing that you can set menu according to the element and you have full control over it. You can theme or design it according to your website, add actions, show only those items in the menu which requires.

How to implement it ?

For implementing this I am using jQuery which disable the default Right click and show the custom menu.

What in the demonstration ?

Within demonstration, I am creating the list of elements when the user right clicks on one of it then showing the custom context-menu options.

And also creating a hidden field which stores the id of the Right-clicked element based on that we perform an action on that only.

Custom right click Context menu with jQuery

Jquery

In this post, I show how you can add and remove new element within your web page with jQuery.

There are two approaches for doing this –

  • Pre-made all elements
  • Dynamically create new element

The first case is easy but you have to create all of the element at once and hide them which is not required currently.

When you have to add an element you need to display the element one by one and for removing hide them.

Here the problem is – there are multiple unused elements are available which occupies space within your code and makes it messy even if you don’t have needed some of the elements.

The second solution is better than the first here you create and remove an element dynamically when you have to require.

In the demonstration, I am using the second solution.

Dynamically add and remove element with jQuery

Jquery