Yogesh Singh, Author at Makitweb

How to include HTML page with jQuery

Last updated on March 3, 2024 by Yogesh Singh

If you’re familiar with PHP, you can efficiently embed another PHP or HTML file within your page using include and require statements. This approach saves time, particularly when you need to incorporate the same line of code across multiple files.

However, if you’re not utilizing server-side scripts on your webpage, alternatives such as iframes or client-side scripting languages can be employed.

In jQuery, there exist two primary methods for including a file within another HTML file:

1. AJAX request
2. .load() method

How to include HTML page with jQuery

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

Last updated on November 23, 2022 by Yogesh Singh

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

There are two methods with a 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 before() and after() methods on your webpage.

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

Custom Right Click Context menu with jQuery

Last updated on December 29, 2022 by Yogesh Singh

Sometimes it is required to show a custom context menu instead of the browser default one when right-clicking on the webpage or on a specific element.

By doing that it is possible to show a context menu according to the element and disable the default menu where necessary.

It is customizable according to the website design.

For implementing this I am using jQuery in this tutorial.

When right-clicking on the element then disable the browser default context menu and display the custom options.

Dynamically add and remove element with jQuery

Last updated on December 4, 2022 by Yogesh Singh

In this post, I show how you can add and remove new elements within your web page with jQuery.

There are two approaches to doing this –

Pre-made all elements
Dynamically create a new element

The first case is easy but you have to create all of the elements 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 occupy space within your code and make it messy even if you don’t have needed some of the elements.

The second solution is better than the first where you can create and remove an element dynamically when you have to require.

In this tutorial, I am using the second solution.

Dynamically add and remove element with jQuery