Makitweb Posts

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

The BttrLazyLoading is a jQuery plugin that load images which are within the viewport. This delays loading of images in long web pages.

It allows defining images for 4 different screen sizes ( mobile, tablet, desktop and large desktop ). It has various options for customization.

Lazy image load with BttrLazyLoading jQuery plugin

Jquery

The Back to Top button takes the user back to the top of the page.

The button is visible at the bottom when the user starts scrolling the web page and crosses the defined range. It remains fixed at its position during the scroll.

It auto hide when the user reaches the top of the page.

Back to top with CSS and jQuery

Jquery

The ReadRemaining.js is a jQuery library which shows readers how much time is left to finish reading an article.

The estimated time will be different for each user because it calculates time-based on the speed at which the user is scrolling the page.

This display a small tooltip at the bottom which is customizable with options e.g. set the delay before it will visible on the screen, time format, set time range etc.

Display estimated reading time with ReadRemaining.js

Jquery

The .clone() method creates the duplicate of the matched elements. It allows either event handler will be copy or not, it by default doesn’t copy attached events.

This simply your code when you need to make the clone of the group of elements. You don’t have the need to create each group elements and insert it.

In this tutorial, I show how you can use .clone() method to create the clone of the elements.

Create duplicate of the elements with .clone() - jQuery

Jquery

When working with multiple AJAX requests at that time its hard to detect when will be all request is being completed.

You can use the setTimout() method which will execute your action after your given time. But it is not a better solution.

jQuery have inbuilt AJAX event handler that helps you in this situation.

Detect when all AJAX requests are complete - jQuery

AJAX Jquery

AJAX Jquery

For adding delay for execution of some action setTimeout() and setInterval() methods is begin used in JavaScript.

The setTimout() method execute the statement only once but setInterval() method execute repeatedly until the interval is not being cleared.

In this tutorial, I am using the setTimeout() method to stop the page from redirect as soon as the button gets clicked.

Page redirect after specified time with Javascript

Javascript

In this tutorial, I show you some jQuery plugins by using it you can capture the user signature on your web page.

They add a container on the web page where the user can draw its signature using mouse pointer.

I discuss the following plugins –

  • jSignature
  • Signature Pad
  • jQuery UI Signature

Capture signature in the webpage with jQuery plugins

Javascript Jquery

The Pdf file creation in PHP mainly requires when we need to generate the file on the basis of the available data otherwise, we simply create it manually with the external applications.

For example – generating the report, the user certificate, etc.

For generating pdf file I am using Dompdf library which generates the downloadable pdf file from HTML.

Generate Pdf from HTML with Dompdf in PHP

PHP