Category Archives: jQuery

jQuery NiceScroll Plugin doesn’t work for dynamic content

jQuery NiceScroll Plugin is a very convenient tool for customizing your website scrollbar.
Create a better scrollbar using jQuery NiceScroll Plugin

By default, the scrollbar is hidden if the content doesn’t exceed the content wrapper height. So if you have dynamic content, you have to tell the NiceScroll plugin to resize otherwise the scrollbar doesn’t show.

Let’s start with the following index.html.
Continue reading jQuery NiceScroll Plugin doesn’t work for dynamic content

Create a better scrollbar using jQuery NiceScroll Plugin

There are quite a lot of jQuery plugins for scrollbar. I find this jQuery NiceScroll Plugin is quite user friendly so i want to share it to you guys.

1. Download the jQuery NiceScroll Plugin file to your webroot js folder from GitHub or Google Code.

2. Create the following index.html.
Continue reading Create a better scrollbar using jQuery NiceScroll Plugin

jQuery – Freeze HTML table header and the left columns

A few months ago, i am working on a website project which contains a very wide HTML table. The client wants to keep the top row and the two columns on the left hand side of the table sticky. There is no proper way to do it but and the only solution i could found is using a jQuery library written by Conan Albrecht. The original post could be found in the link below but the source link is no longer valid.
A JQuery Plugin For Freezing Table Rows/Columns

Luckily i have a copy of the lib and you can download here.
Continue reading jQuery – Freeze HTML table header and the left columns

jQuery – Synchronize Text Input

In Drupal Development, very often we will use Views and Views Filter for searching data. For example, I have a content type which has two name fields.

  1. English Name – field_english_name
  2. Chinese Name – field_chinese_name

 

I would like to have a single text input filter which could search for these 2 fields with an Or condition.
Continue reading jQuery – Synchronize Text Input

Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2

We talk about how to generate a taxonomy term selection list in the following post.
Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 1

So we continue to add the jQuery/Javascript code such that when the term is selected, the browser will open the corresponding term page.

The following piece of jQuery/Javascript is redirect you to the selected term page.
Continue reading Drupal 7 – Create a taxonomy term selection list of a specific vocabulary @ 2

jQuery – Validate the form when the submit button is clicked

Here is a simple jQuery script which could use the validate a mandatory input.

(function ($) {
  $(document).ready(function() {    
    $('#<submit-button-id>').click(function(event){    
      var x = $('<input-id>').val();
      if (x == null || x == '';) {
        alert('Please fill in the input.');
        event.preventDefault();
      }
    })
  });
})(jQuery);

 

Done =)

Reference: StackOverflow – Intercept a click on submit button and check validity of form jQuery

Superfish – Add active class to current menu link

Superfish is a jQuery plugin for creating drop down menu. You can download it @ GitHub – karevn / superfish.

It works well but there is no CSS class for identifying the menu item of the current page. Luckily i found a solution in StackOverflow.

The following jQuery code will find out the menu item which match the current URL and add the active class to it. Continue reading Superfish – Add active class to current menu link

jQuery Cycle Plugin – Customize pager anchor HTML

Cycle Plugin is the most common plugin which could be found in my projects. This article shows you how to customize the pager of the Cycle Plugin slide show.

Let’s create the following HTML first.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="slides-wrapper">
      <div id="slide-1" style="width: 200px; height: 200px; background-color: red;"></div>
      <div id="slide-2" style="width: 200px; height: 200px; background-color: green;"></div>
      <div id="slide-3" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
    <div id="nav"></div>
  </body>
</html>

Continue reading jQuery Cycle Plugin – Customize pager anchor HTML