10
X

All Levels

Using jQuery .click() Events to Override Hover Styles on Mobile

One of the most frustrating things about optimizing a site for mobile is when certain styles or events that work perfectly fine on the desktop version don’t really translate into a touch device. Take hover styles, for example, which work great on desktops, but, due to the nature of touch devices, don’t really work at all on mobile.

So, when a link (or any other type of HTML element) that has a CSS hover effect applied to is tapped on mobile, there are many cases where the link actually has to be tapped twice in order to access the linked content. This is because the first tap will act as a hover effect. Luckily, there’s a simple jQuery script that allows the hover styles to be overridden by invoking a .click() event.

Add this script to your code and any link with a hover style applied to it should respond appropriately the first time its tapped — just make  sure that replace the broad (‘a’) selector with specific classes that apply to links with hover styles, otherwise this script will apply to every single link on your site, which could make your pages quite jumpy.

$(‘a’).on(‘click touchend’, function(e) {
      var el = $(this);
      var link = el.attr(‘href’);
      window.location = link;
   });

jQuery 3.0 New Loop Syntax

jQuery 3.0 is the newest version of jQuery and its beta version is already out. There are many changes in jQuery 3, but one of the important changes is new syntax of for loop to iterate over the DOM elements of a jQuery collection using the for…of loop. This new change is more in line with other present language and technologies. And this is part of ECMA 6 specification.

Here is the old way to loop using jQuery:

var $dvElements = $(“div”);
for (var x=0; x< $dvElements.length; x++){
$dvElements[x].addClass(“dummy”);
}

With-in the loop, you use index on jQuery collection to get the element.

Here is the new syntax with jQuery 3.0:

var $dvElements = $(“div”);
var i = 0;
for(var elm of $dvElements) {
elm.addClass(“dummy”);
}

With this new syntax, you will get DOM element, instead of jQuery collection. So here you don’t need to use index to get the element as you are already having direct access to the element.

10 jQuery Credit Card Form Plugins

In this post, find a compiled list of 10 jQuery credit card form plugins which are useful for any ecommerce website. Using these plugins, one can easily format credit card information, validate credit card information and detect card type.

1. cardCheck

CardCheck

Cardcheck.js is a very small jQuery plugin for e-commerce websites that validates the credit card numbers as well as telling you the detected credit card type.

2. Credit Card Formatter

Credit Card Formatter

Credit Card Formatter is a very small jQuery plugin for a credit card input that formats numbers and tells you the detected credit card type.

3. Card

Card

Card will take any credit card form and make it the best part of the checkout process. Everything is created with pure CSS, HTML, and Javascript.

4. Skeuocard

Skeuocard

Skeuocard is a re-think of the way we handle credit card input on the web. It progressively enhances credit card input forms so that the card inputs become skeuomorphic, facilitating accurate and fast card entry, and removing barriers to purchase.

5. Creditly.js

Creditly

Creditly.js gives you everything you need in order to create a sleek, intuitive credit card form. Just copy the html, CSS, and JavaScript to get an intuitive credit card form in seconds. You get credit card validation for free!

6. Payfield

PayField

Payfield is a jQuery plugin to build an animated credit card input that allows the visitor to enter the credit or debit card information (number, expiration date and CVV) easily and quickly.

7. jQuery Payment

jQuery Payment

jQuery Payment is a useful and simple jQuery plugin for E-commerce websites to format and validate credit card form input field.

8. Credit

Credit

Credit.js is a super simple jQuery plugin to create an input mask for credit card that only accepts 16 credit card numbers. Specially designed for E-commerce or business websites.

9. Credit Card Validator 

Credit Card Validator

jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.

10. Smart Validate

Credit Card Validator

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.

10 jQuery YouTube Plugins

In this post, find a compiled list of jQuery plugins to integrate YouTube videos in your website. These plugins allows you to create YouTube background as video, customize them, create YouTube videos playlist, embed them easily in your website, and create animated video thumbnails, among other features.

1. PreView Tube

PreViewTube

 

A small jQuery plugin for animating YouTube thumbnails.

2. PrettyEmbed.js

PrettyEmbed

 

Prettier embeds for your YouTube videos with easy to use options like fetch the highest resolution preview image available from YouTube, advanced customization of embed options, and optional FitVids support.

3. Video Lightning

Video Lightning

Turn any element into a light box or popover link for YouTube and Vimeo videos. It includes access to all embed API options for both providers as well as a healthy set of style options. Popovers are intelligently positioned and allow users to preview videos on hover.

4. jQuery YouTube Channels Playlist

jQuery Youtube Channels Playlist

This plugin allows you to create responsive playlist widget, customize width and height of widget, and displays your actual complete YouTube channel on your website just like it’s shown on YouTube.

5. jQuery BackgroundVideo

jQuery BackgroundVideo

A jQuery plugin that lets you create background videos using YouTube API. It’s a wrapper for YouTube API which helps to produce great full screen background videos or just regular videos.

6. jQuery mb YTPlayer

jQuery mb YTPlayer

It’s an open source jQuery component to easily build your custom YouTube player or to use a YouTube video as background for your page.

7. jQuery Video Extend

jQuery Video Extend

jQuery Video Extend is a plugin to extend HTML5 videos which allows you to add a logo and markers with labels to YouTube videos.

8. LazyYT.js

lazyYT

This is a jQuery plugin to lazy load YouTube videos. On the initial load, the div will be replaced by a preview img of the video. On hover, the preview img will be replaced by the iframe YouTube video.

9. YU2FVL

YU2FVL

“YouTube URL to Full Screen Video Lightbox”, that is YU2FVL, is a jQuery plugin to help you integrate great YouTube videos on your web pages in a simple way.

10. EasyEmbed

EasyEmbed

EasyEmbed is a small and fast jQuery plugin which allows you to embed YouTube videos with standard definition thumbnail fallback into your web page. All the parameters can be passed via Html5 data attributes without the need to write any JavaScript.

10 jQuery Panorama Plugins

In this post, find a compiled list of 10 jQuery Panorama plugins which you can use to display panorama image or 360 degree view of any image. These plugins are easy to integrate in your website.

1. iPanorama 360° – jQuery Plugin

iPanorama

iPanorama 360° jQuery Plugin is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature which allows the user to navigate from one scene to another.

2. Paver

Paver

Replicating the photo viewer/panner seen on the experimental Facebook Pages app, Paver is a jQuery-powered plugin that enables easy viewing of wide/panoramic images.

3. jQuery Panorama Viewer

jQuery Panorama Viewer

Panorama Viewer is a jQuery plugin to embed interactive panorama photos on your site.

4. Cyclotron

Cyclotron

Cyclotron is a simple jQuery plugin for dragging 360° panoramas (cylindrical projection) and other seamlessly looping images around.

5. True Panorama

True Panorama

True Panorama is 100% responsive, 100% mobile friendly, comes with touch support, modal window support, cross browser compatibility and is simple to use and integrate.

6. 360° Panoramic Viewer

360° Panoramic Viewer

A panorama is a wide-angle view made from a series of images combined together using special software. It offers a very realistic experience, giving the sensation that the user is right there at the location. This plugin manipulates such a panorama image and uses jQuery to rotate, add hotspots and integrate it on mobile, touchpads and desktop browsers.

7. pano

Pano

jQuery plugin to display a 360 degree panoramic image.

8. SpriteSpin

SpriteSpine

SpriteSpin is an amazing jQuery plugin for playing sprite image animations to provide a 360 degree (or panorama and gallery) view of your product image.

9. Panorama 360° jQuery Plugin

Panorama 360° jQuery Plugin

Simple jQuery plugin to display panorama image. It features endless scrolling, full page support and it scrolls with mouse wheel.

10. Panorama 360

Panorama 360

This is a simple tutorial which uses CSS and JavaScript to display panorama images in continuous scrolling.

11 Newest jQuery Progress Bar Plugins

Progress bars are ideal for letting end-users know that something is loading on a website, and they also help to provide a better user experience. In this post, find a compiled list of 11 newest jQuery progress bar plugins which are lightweight, eye catching, and easy to integrate.  You can use these plugins to integrate loading of content, show progress when user scrolls the page, display form completion status, and for many more functionalities.

1. ProgressBarWars (Star Wars Tribute)

ProgressBarWars

ProgressBarWars is a simple (Star Wars tribute), light-weight jQuery plugin that allows you to display an animated horizontal progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

2. LoadGo

LoadGo

LoadGo is a JQuery plugin that allows you to create a progress bar by using your own images. It creates an overlay above your desire DOM element and simulates a loading process using width calculations.

3. Scroll indicator

ScrollIndicator

 

Visualize reading progress with small and simple jQuery plugin. Adjust style with CSS or SCSS. Never worry about window resizing. Optional HTML5 progress element. Setup with one line of code.

4. asPieProgress

asPieProgress

A jQuery plugin that animates the pie progress.

5. percircle

perCircle

Percircle is a jquery plugin to make animated CSS percentage circles.

6. jQMeter

jQMeter

jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter.

7. jQuery Progress Tracker

jQuery Progress Tracker

A small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them.

8. Loadie.jsloadie

 

Loadie.js is a lightweight jQuery plugin to create a preloader that doesn’t suck and that is used by big firms.

9. jQuery Progress Bar

jQuery Progress Bar

A simple jQuery progress bar plugin for Bootstrap forms. Progress bar is collapsible and it can be positioned at top or bottom of screen.

10. Scrollgress

Scrollgress

Scrollgress is a simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

11. MProgress.js

MProgress.js_

Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript, which doesn’t depend on any other libraries.