Makitweb Posts

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

Javascript

for-in is an another type of looping statement within JavaScript. Which works similarly like a foreach loop in PHP.

When performing iteration with for-in then it returns key on each iteration.

It works with both –

  1. Array and
  2. Object

for-in loop in JavaScript

Javascript

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

If you are familiar with PHP where for reading parameters from URL you can use either $_GET or $_REQUEST which take the name of the argument and return value of it.

In the JavaScript, there is no direct way to read arguments from URL like in PHP you need to do some work for getting it.

In this tutorial, I show how you can read and extract parameters with JavaScript.

Read and Get Parameters from URL with JavaScript

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

How To

Some website owner Blur some part of the content and ask the user to register to their website or share the article for full the whole content.

Or use Blur effect for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.

What in the tutorial ?

In this quick tutorial, I will show How you can Blur an element using jQuery.

For Blur effect I am using Foggy jQuery Plugin. It is a light-weight plugin which is easy to setup and use.

How it works

Foggy by default uses the “-webkit-filter: blur” CSS attribute.

If the browser doesn’t support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.

Blur effect on the element via Foggy jQuery Plugin

Jquery

The .each() is use for looping in jQuery. It is similar to foreach loop in the PHP which loops until it gets data.

It works with an Array, Object, and jQuery selector, and you don’t have the need to know how many data are available it performs iteration continuously until it getting data that makes it differ from other looping methods.

While iteration it also keeps tracking the element index.

What it’s required?

It mainly requires when you want to perform an action on all child elements or find the collection of elements which have given class, etc.

There are many other cases where you can use this.

How to use the .each() function in jQuery

Jquery