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 on 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 on 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

.Live editable table is good for update content quickly while viewing it.

This can be used to update full records details or some of them and you have doesn’t need to send the user to edit form page.

It is user-friendly and timesaving.

To implementing this I am using 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 in the dropdown then it takes you to the option but not allows you to search whole or particular string.

Searching is required on the list when there is the long list of items are available.

It is time-consuming to find the option by scrolling the list.

In this tutorial, I show how you create dropdown with search box using select2 plugin and read the selected option.

Make a Dropdown with Search Box using jQuery

JQuery PHP

Using Client-side scripts like – jQuery and JavaScript it is not possible to delete any files. Need to use the 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 totally be done with PHP you need to use jQuery or JavaScript with it by which send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

For demonstration purpose, I create a some <img> element with Delete Button. When the Button gets clicked then remove 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 the time when need to add the same line of code in several files.

If you are not using the server-side script in your webpage then you can use the iframe or Client-side scripting language.

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

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX How To JQuery

In CSS before and after pseudo-elements use to add style to the targeted selector elements.

There are two methods with the similar name in jQuery.

They adjust the position or add the element before and after instead of changing CSS.

In this tutorial, with examples, I show how you can use these methods on your webpage.

How to Use before() and after() method in jQuery

How To JQuery