Category: How To

To get back the user attention back to your site you can animate the site page title and icon when the user leaves your site or open an another tab.

In this tutorial, I am using two jQuery plugins – iMissYou and mFancyTitle for customization.

I will also show how you can do this with just jQuery.

How to change page title and icon on Page leave with jQuery

How To JQuery

When you have the large collection of images files in a directory and you want to convert it into the photo gallery.

Solution 1

Add image file manually to your page one by one which you want to show. The problem with this solution is it is time-consuming and you have to check all image links if any update in future.

Solution 2

Store image names in the Database table and use it to get images.

Solution 3

Read all files from target directory and generate photo gallery.

The second and third solution is better but in this post, I will only show you how to implement the third solution with PHP.

How to make photo gallery from image directory with PHP

How To PHP

Nowadays all modern browsers allow copying content to the clipboard with JavaScript.

But before this, it is not supported in most browsers because of security reasons. You need to ask the user to press CTRL+C to copy the currently selected text.

The ZeroClipboard library uses invisible Adobe Flash movie for copying content to Clipboard. It works well with most browsers.

In this tutorial, I show How you can copy content to the clipboard with or without Flash.

How to copying content to the Clipboard with JavaScript

How To Javascript

You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.

The common example of this you see in Chrome, Opera mini browser for mobile.

In this tutorial, I show How you can add the similar type of functionality to your web page in desktop view.

What in the demonstration?

I will create two examples,

  • Reload page when the user pulls down the button at the specified height.
  • Reload page when the user releases the button.

How to make Pull down to refresh webpage with jQuery

How To JQuery

There are many things you can do with AJAX to improve the user experience, for example, Add, edit or delete the record and update layout without reloading the page.

With only PHP you can easily delete records but require to submit the page or send value by URL and according it delete record.

This works and removes the record but it reloads the page every time.

You can do this with jQuery AJAX where you need to pass the record id from AJAX which need to delete.

In the demonstration, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then remove record and also remove HTML table row with fadeOut() effect.

How to Delete Record from MySQL Table with AJAX

AJAX How To JQuery PHP

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

Did you ever thought to make an editable div element or <p>, <span>, etc. that works same like a Text field and Textarea.

Some websites allow the user to edit their content by just pointing to the content and start to update it.

You will already know that <div> is a read-only container that means you can’t edit the content inside of it.

In this tutorial, I show how you can do this with the contentEditable attribute.

How to make editable div element with contentEditable attribute

How To Javascript