Category: JQuery

In this tutorial, I show How you can check whether an Array already contains a specific value or not.

This requires within the program in some cases like –

  • Stop new value from insert if it already exists in an Array.
  • Execute script when the Array contains the particular value.
  • etc.

If you are familiar with PHP, where you can use the in_array() function to search value in the Array and its returns the Boolean value ( TRUE or FALSE ).

There are inbuilt methods in jQuery and JavaScript that return the index position of the value which you can use for the search.

Check if value exists in Array - jQuery and JavaScript

Javascript JQuery

Sometimes you may want to take more control over your user Browser when he/she opens your website in a Browser Window.

For example – you want to know when the user closes the Browser Tab and execute your code.

If you want to know How much time the user active on your website, in this case, you can use JavaScript. Using that you only enabled the timer when the user is an active tab on your website.

Or you want to run the Animation only when the user is active otherwise stop it.

This kind of functionality you have seen on the websites or PTC sites which provide ads viewing to the users. They only count the ads view when the user is active on their website until given time otherwise they cancel the view after the specific time.

In this tutorial, I show How you can use JavaScript to detect whether Browser Tab Window is active or not.

How to Detect Browser Window is Active or not - JavaScript

Javascript JQuery

.Live editable table is good for update content quickly while viewing it.

This can be used to update full records details or some of them and you have doesn’t need to send the user to edit form page.

It is user-friendly and timesaving.

To implementing this I am using jQuery AJAX.

In this tutorial, I show you two ways to make your table columns editable –

  1. Using contentEditable attribute
  2. Showing input element when the user clicks on the cell.

Make Live Editable Table with jQuery AJAX

AJAX JQuery PHP

You already know that in HTML there is no search option in the dropdown element.

When you press any single key in the dropdown then it takes you to the option but not allows you to search whole or particular string.

Searching is required on the list when there is the long list of items are available.

It is time-consuming to find the option by scrolling the list.

In this tutorial, I show how you create dropdown with search box using select2 plugin and read the selected option.

Make a Dropdown with Search Box using jQuery

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

Sometime it is require to show custom context menu instead of browser default one when right-click on the webpage or on specific element.

By doing that it is possible to show 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-click on the element then disable the browser default context menu and display the custom options.

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

JQuery