Skip to main content

jQuery

Background vidoes

How to set up a video background in Drupal 7 using the jquery.videobackground plugin

I’ve recently been working on a jQuery plugin that uses a HTML5 video as the background for a page. An idea that perhaps owes far too much of it’s inception to splash pages, it was worth investigating; as a test for HTML5 video player development and because of it’s interesting use of the video element.

This blog explains about how to set up video background in drupal. There are many plugins available to create background video in drupal and I am going to discuss jQuery videobackground plugin. The plugin should work in any browser that supports HTML5 video.

knackforge blog knowledge base

Responsive vertical column layouts using jQuery Plugin

Usually while we add contents to a div, it get arranged accordingly to our web styles. But there are some special cases where we need our contents to be arranged in a vertical manner as like the newspaper (or) journal content. To achieve this vertical fashion of content alignment, after a very long and vast search, we found these jQuery plugin to customize the column layouts dynamically based on these plugins:

  • columnizer.js
  • isotope.js
Deal with hover in touch events

How to deal with hover on touch screen devices

Links with hover styles on touch devices are a bit of a complication. In short, they don’t really exist on these devices. Creating fancy :hover styles can really add to the browser experience and help simplify your layout, but they simply will not work on a touch device. When a tablet or smartphone user taps your hover-styled link elements, the hover style shortly appears, and immediately the underlying link is followed/activated.
 
So how do we handle this problem?
knackforge blog knowledge base

To check Caps lock is on/off status in jQuery

I'm sure that this script will help you in some of your projects that needs a username and password.
Sometimes when we want access to a secure page that asks for a username and password and we submit the information but we didn't know that the password was submitted in upper case, we get an error.
 
Solution: 
jQuery('#username').keypress(function(e) {
  var s = String.fromCharCode( e.which );
  if ( 
knackforge blog knowledge base

Joyride tour in older versions of jQuery

Joyride, the nice guide/tour library based on jQuery, does not work in older version of jQuery (like 1.3 or 1.4). We had a Drupal 6 project, where we wanted it. Our Drupal 6 site used jQuery 1.3 version.  We tweaked the joyride code to make it work in jQuery 1.3. Basically,1. We included a function that is not a part of 1.3 version (isEmptyObject) 2. Older versions of jquery seems to differ in the way constructor context are being utlized. Hence we had to find the correct next li item using a bit of code,

    Subscribe to jQuery