Tag Archives: jQuery

jQuery

jQuery – Implement touch and gesture based interaction using TouchSwipe

2 Comments

Here is an example for a simple swiping implementation using TouchSwipe.

<!doctype html>
<html>
<head>
  <title>Eureka! - TouchSwipe Example</title>
  <style type="text/css">
    #box {
      background-color: green;
      width: 400px;
      height: 225px;
      line-height: 225px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="box">Swipe here!</div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  <script type="text/javascript">
    $("#box").swipe({
      swipe: function(event, direction, distance, duration, fingerCount) {
        $(this).text("You swiped " + direction );
      }
    });  
  </script>
</body>
</html>

 

Done =)

Reference: TouchSwipe: a jQuery plugin for touch and gesture-based interaction

Advertisement
HTML5, jQuery

100% height does not work for HTML5 Doctype

Leave a comment

Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.

<!DOCTYPE html>
<html>
...
</html>

Continue reading 100% height does not work for HTML5 Doctype →

jQuery

jQuery NiceScroll Plugin doesn’t work for dynamic content

5 Comments

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 →

jQuery

jQuery – Freeze HTML table header and the left columns

11 Comments

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

jQuery – Synchronize Text Input

Leave a comment

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 →