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

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

How To Jquery

When you have the large collection of images files on a directory and you wants 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 are better but in this post, I will show you how to implement the third solution with PHP.

How to make photo gallery from image directory with PHP

Read More 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 to 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

Read More 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

Read More How to make Pull Down to Refresh Webpage with 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

Read More How to make Editable Div Element with contentEditable Attribute

How To Javascript

If you are good at Photoshop then you can directly show text above an image by creating an image like that.

But what when you have to display text when the mouse moves over the image.

This kind of functionality basically seen in news websites or on some blogs they show the post image and title but when the user hover over one of the image then the short description about the post visible above the image.

In this quick tutorial, I show How you can show text above Image when the user hovers the image using only HTML and CSS, no jQuery and JavaScript.

HTML - How to Show Text above Image on Hover

Read More HTML – How to Show Text Above Image on Hover

How To

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

Read More Easily add Thumbnail to the Recent Posts – WordPress

How To

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.

Read More How to show Upcoming/ Future Posts in WordPress

How To

Schedule post in WordPress is its inbuilt feature, you don’t need any extra plugin for it, which is great. and if you want the more extra feature then you go with Plugins.

You will find many free plugins for this purpose.

Why does anyone need to schedule their posts?

If you manage to write 4,5, or more post in a day and you don’t want to publish all of them at that time. The solution for it is either save them to Draft and click on Publish Button for publishing when the right time comes. But you need to login to your Dashboard every time when you want to publish it.

The next case, if you completed your post at night and don’t want to publish it right away. You want to publish it in near future.

Read More How to Schedule Posts in WordPress without plugin

How To

One of the good thing about Chrome is it allows you to customize its appearance by using themes and add new features to it using custom extensions. The Chrome Web store is filled with lots and different types of extensions, you can also create your own extension and upload it to the Web store.

Themes are a type of an extension, which doesn’t contain JavaScript or HTML files. It has a manifest JSON file which contains all information about an extension and few images. It does not totally change the whole interface, instead, it defines how its interface looks.

If you are using a theme on your Chrome browser by downloading and installing it, sometimes you may want to convert your favorite wallpaper to a theme.

In this tutorial, we will create a new custom theme, which has a manifest JSON file and collection of images. And learn how to set in Browser.

chrome_theme

Read More How to convert your favorite wallpaper to the Chrome theme

How To