Home » jQuery

jQuery

To install the jQuery gallery (popup window) script Fancybox, run the following command in the console:

bower i fancybox

But before installing the library, make sure that Node.js and npm are installed on your system. You can read how to do this in this article.

2020-12-09 Pavel jQuery CommentsNo Comments

How to Make Simple Tabs with a jQuery Plugin

This article is a continuation of the post about tabs using jQuery and flexbox. Today, we will modify our script and implement it as a jQuery plugin with some improvements.

First, we will split the script logic into two files:

Styles. These will remain unchanged, just moved from the HTML document into the file “jquery.tab-light.css”.
JavaScript. The script will be moved into the file “jquery.tab-light.js”.

Also, don’t forget to include the above files in your HTML document.

Second, we will name our plugin “tabLight” (i.e., simple). This name will be used in our JS code.

2019-04-21 Pavel jQuery CommentsNo Comments

How to expand Autocomplete in jQuery by clicking on a button

The jQuery framework includes a component called Autocomplete, which displays suggestions (input options) directly below the text input field as it’s being typed. Similar to how autocomplete works in search engines like Google or Yandex.

In one of the projects, there was a task to display the full list of available options when clicking a button.

Let’s take a closer look at how to implement this. The first thing we need to do is include all the necessary scripts and libraries:

<link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/all.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>