Plugins

12 Awesome jQuery Virtual Keyboard Plugins

A virtual keyboard is a component that allows a user to enter characters without a physical keyboard. It’s an alternative input mechanism for those who cannot use a physical keyboard, or for multi-lingual users who switch frequently between different character sets or alphabets. Virtual keyboards are commonly used as an on-screen input method on smart devices or small devices with no ability/space to attach a physical keyboard.

In this post, you’ll find a compiled list of 12 awesome jQuery virtual keyboard plugins, which allow you to attach an on-screen virtual keyboard. These jQuery plugins support various keyboard layouts, different languages, various theme options for look and feel and option for having a QWERTY keyboard, numeric keyboard or mixed keyboard.  If you are not happy with the default keyboard layout, then you can create your own layout with ease. Enjoy!

1. Keyboard

Keyboard

Keyboard is an on-screen keyboard jQuery plugin embedded within the browser window which will pop up when a specified entry field is focused. The end user can type and then preview the input before accepting or cancelling. It can be set to always remain open, and can also be programmed not to show a preview. The plugin can be programmed to display a QWERTY keyboard, numeric keyboard, alphabetic keyboard, hex value keyboard or iPad style keyboard. For sensitive information, there is also an option to mask the input. This plugin is dependent on the jQuery UI library.

2. Talking Keyboard

Talking Keyboard

Talking keyboard is a jQuery based plugin that enables an interactive and speaking English QWERTY keyboard. It is based upon SkeletonCSS, jQuery, and ResponsiveVoice. ResponsiveVoice is a HTML5-based Text-To-Speech library designed to add voice features to websites and apps across all smartphone, tablet and desktop devices. It supports 51 languages in 168 voices, with no dependencies. The beauty of this plugin is that it speaks when the user types any character.

3. jKeyboard

jKeyboard

jKeyboard is a jQuery plugin for creating an on screen visual keyboard that supports custom layouts for multiple languages. It supports English, Azeri Turkish (a Turkic language) and Russian language. It can be programmed for a QWERTY keyboard or a numeric keyboard.

4. Keypad

Keypad

Keypad is a jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entries or adds an inline keypad in a division or span. The keypad functionality can easily be added to a text field with appropriate default settings. Use it with a password field for more secure text entry. You can also remove the keypad widget if it is no longer required. This plugin supports many languages which helps to implement localization. This plugin also allows users to randomize the key’s position for security purposes.

5. Keyboard Pagination

Keyboard Pagination

Keyboard pagination is a lightweight jQuery plugin which allows you to attach keyboard shortcuts for pagination. Once attached, using the keyboards left and right arrows, you can switch between the previous and the next page. This really helps to make the website more interactive.  It attaches a custom callback function code, detecting which one of the two keyboard arrow keys were selected: left or right. It then selects a corresponding pagination link and simply simulates (triggers) a click event for it. It supports numbered (1,2, 3…) links, previous or next page links and first and last page links.

6. MLKeyboard

MLKeyboard

ML Keyboard is a multi-language jQuery virtual keyboard with features for changing input layouts on the flight. It opens up the virtual keyboard at the bottom of the page, when there is a focus on the attached input field. It currently supports English, Spanish, Italian, Portuguese and Russian languages. It also comes with various configurable options to control the keyboard display, like displaying the keyboard permanently, or controlling the opening and closing speed.

7. jQKeyboard

jQKeyboard

jQKeyboard is a jQuery plugin that allows you to add a responsive virtual keyboard to the input text field. It creates an alphanumeric keyboard and allows you to customize the default layout of the keyboard to your liking.

8. jQuery Keyboard

jQuery Keyboard

jQuery Keyboard is a jQuery plugin for drawing a virtual keyboard. It is dependent on jQuery and Bootstrap. It comes with 3 themes and 5 languages. It has several themes to customize the keyboard.  You can choose the language of the keyboard to draw, if it is defined that the keyboard type will be: ‘Full Keyboard’ or ‘KeyPad’. It has several options of personalization and customization to choose from.

9. jQVirtual Keyboard

jQVirtualKeyboard

jQVirtual Keyboard is a jQuery and jQuery UI based virtual keyboard plugin that creates a draggable keyboard on the screen. Currently it supports English and Bulgarian, but it also provides an option to create your own layout for the keyboard via a custom layout. You can also choose a dark or light overall theme depending on your page design.

10. SoftKey

SoftKey

SoftKey is a jQuery based virtual keyboard plugin that creates an on-screen keyboard. This plugin allows you to define the layout of the keyboard and customize to your liking. You can define the layout as per your choice and set the order for number and alphabet keys.

11. jQBTK

jQBTK

jQBTK (jQuery Bootstrap Touch Keyboard) is a jQuery plugin for creating customizable on-screen virtual keyboards & numpads on mobile touch devices. It only works with touch devices. The plugin listens for touch events and uses the Bootstrap popover component, dynamically adding buttons to form a keyboard and inserting the characters into the HTML input when pressed.

12. NumPad

Numpad

NumPad is a flexible touch-optimized jQuery plugin for creating a numeric keypad for web applications based on jQuery, but it is mainly intended to be used in mobile web applications to quickly input numbers. The numeric keypad can be used to fill inputs, password fields, general div-elements or entire table columns. It works perfectly with most frameworks, including jQuery mobile and Bootstrap.

Conclusion

To conclude, these jQuery virtual keyboard plugins allow you to add an on-screen virtual keyboard to any input field. These plugins support different keyboard layouts, offer many languages and come with a variety of different theme options. Based on your needs, you can either open a QWERTY keyboard or a numpad keyboard. Some of the plugins also allow the user to change the layout/position of the keys as per their need.

How to Increase Conversion Rates with Ouibounce

One surefire way to increase conversion rates on your landing pages is to include some sort of pop-up, be it one that appears as soon as your user visits the page, or an exit pop-up that appears when the user is going to leave the page (usually this type of pop-up is activated when the cursor hits a certain point of the viewport). While no user will tell you that they love pop-ups, there’s no denying that they work to get more people to engage with your site and your content.

An easy way to add pop-ups to your sites is by using the open source, lightweight, and totally free Ouibounce plugin. The plugin gives you total control over your modals, and lets you customize things like a timers, cookie names, cookie expiration time (so how long you want a cookie to last before it expires and a user is exposed to the pop-up again), and more. You can define sensitively, which applies to the exit pop-up option, because sensitivity allows you to choose how far the cursor can move up the the viewport before it triggers the modal to appear. If you don’t want to go the exit pop-up route, but you always don’t want your modal to appear immediately upon page load, there’s also a delay option that allows you to define how much time you would like to pass in between page load and the pop-up appearing.

Screen Shot 2017-03-25 at 10.15.54 AM

 

In terms of design, there are templates and suggestions provided by the plugin’s developer, but the style and content are totally customizable and up to you. Ouibounce gives you complete control of how you want your pop up to look and function within your project. The plugin is easy to install and almost even easier to use, and it will definitely give you great results if you’re looking for a lightweight, simple, and customizable pop-up plugin for any of your sites or pages.

10 Free jQuery Timeline Plugins

Here is another free jQuery plugin collection to create a timeline or display events in chronological order. Using these plugins you can create responsive, interactive and animated timelines. These plugins can be used to show events year by year, create portfolios or to develop any entity in an interactive way.

1. Timelify

Timelify

Timelify is a really simple jQuery plugin for creating a vertical timeline that animates events with the scroll event using Animate.css powered CSS3 animations.

2. Timeliner

TimerLiner

Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it’s (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.

3. TimelineMe

TimelineMe

TimelineMe is a simple-to-use jQuery plugin for rendering a responsive timeline on the webpage that works perfectly with most front-end frameworks.

4. Timeliny

Timeliny

Timeliny is a simple to use jQuery plugin for generating a responsive, interactive timeline that allows you to scroll through events.

5. Timeline

Timeline

Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what is required, so it can be styled to suite your specific needs.

6. Timelinr

Timelinr

 

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc…

7. Yearline

Yearline

Yearline is a jQuery plugin for creating historic timelines based on year.

8. Timeglider

Timeglider

Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript. This widget can be integrated into any HTML application environment.

9. eeyellow Timeline

eeyellow Timeline

eeyellow Timeline is a lightweight and simple-to-use jQuery plugin used to generate a responsive, vertical timeline from plain HTML.

10. jQuery Vertical Timeline

jQuery Vertical Timeline

jQuery Vertical timeline is a lightweight jQuery plugin to create responsive, animated, vertical timelines with plain HTML mark-up. It supports all the modern browsers which support CSS3 transitions and media queries.

12 jQuery Plugins to Create Image Zoom Effect

In this post, find a compiled list of 12 lightweight, responsive and customizable jQuery plugins to provide zoom effects on images. These plugins can be used to provide inner zoom, outer zoom and magnifying glass effects. Some of the plugins also support mouse wheel zooming. These plugins will work on all the major browsers.

1. magnificent

magnificent

magnificent is a simple and responsive jQuery image zoom plugin that provides an inner zoom and outer zoom option to magnify or zoom in on an image. It also supports zoom scrolling with mouse wheel.

2. spzoom

spzoom

 

spzoom is a simple jQuery image hover zoom plugin that displays zoomed image area next to the original image.

3. jZoom

jZoom

jZoom is a tiny jQuery plugin which provides a customizable magnifying glass effect for image zoom. The enlarged image will appear next to the original one when hovering over it.

4. MagnifierRentgen

MagnifierRentgen

MagnifierRentgen is an awesome jQuery plugin that allows an image to be zoomed with a magnifying glass effect. It also allows the use of 2 different images, one which is static and other one will be used for showing zooming effect.

5. evenZoom

evenZoom

evenZoom is a jQuery plugin that adds zoom functionality to images with a magnifying glass effect.

6. Pan.js

Pan

pan.js is a jQuery plugin used for panning and zooming in/out of a large image in a full screen interface with mouse wheel interactions.

7. ClassyLoupe

Loupe

The ClassyLoupe is a jQuery plugin which gives you the ability to add zoom on hover ability for your photos with single line of code. With Loupe you have the ability to control the zoom level and loupe size via mouse scroll which gives you the opportunity to enlarge areas that you might be interested in.

8. OKZoom

OKZoom

OKZoom is a jQuery plugin that produces a portable loupe of variable size and shape.

9. blowup.js

blowup

A jQuery plugin for customizable image magnification allows you to zoom in on a specified image.

10. Mk MagnifierMk Magnifier

A jQuery plugin that allows you to magnify and show details of a product image when you roll over it. It also support touch screen.

11. Zoomple

Zoomple

Zoomple is a very simple jQuery plugin for image magnifying. It allows you to add a zoom to your image. Zoomple comes with many forms of customization and works well in all browsers.

12. Leroy Zoom

Leroy Zoom

A lightweight and easy to use image zoom and magnifying jQuery plugin with less than 4 KB.

12 jQuery Plugins to Animate Text

Text animation is a preferred way to highlight the text and catch attention of anyone. But having a good and lightweight text animation is pretty important. So in this post, find a compiled list of 12 jQuery plugins for animating text on your website to get attention of users. This plugins are tiny, easy to use, lightweight and support various form of animations.

1. Bubble Text

BubbleText

Bubble Text is a jQuery text rotator plugin which rotates through an array of strings with a text typing & deleting animation.

2. Slogan Roulette

Slogan Roulette

Slogan Roulette is a zepto/jQuery plugin that lets you swap/animate words in your titles. It iterate through an array and then display them one by one.

3. Shuffle Text

Shuffle Text

ShuffleText is a jQuery text rotator plugin which rotates through an array of text with a “smart” shuffle transition.

4. Changethewords.js

Changethewords

Changethewords.js is a lightweight jQuery plugin which iterates through set of text elements and then animate them with various animations to rotate the text.

5. textTweener

textTweener

textTweener is a jQuery plugin to generate letter based animation tweens between different texts. With textTweener you can generate a text rotator to your page. The different texts fade nicely into each other by moving the letters to their new position.

6. AutoTextRotating

AutoTextRotating

AutoTextRotating.js is a jQuery plugin to change/rotation of text or html, single or group, automatically with a separator. This plugin offers lots of customization, support plain text as well as HTML, comes with 5 built-in transition effects and supports Animate.css for awesome CSS3 animations.

7. Morphext

Morphext

Morphext is a simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. It can be used for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images.

8. Text Rotator

Text Rotator

Text Rotator is a JQuery plugin used to rotate comma separated words/phrases with a variety of cool CSS3 animations based on animate.css.

9. Wodry

Wodry

 

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

10. cycleText

CycleText

cycleText is a lightweight jQuery plugin which enables you to rotate through a group of text with CSS3 animation effects based on Animate.css.

11. textition

textition

Textition.js is jQuery plugin for smooth transitions between text blocks. It can be used to stylize titles, menu buttons, or any other text.

12. Crotator

Crotator

Crotator is a jQuery plugin for creating a slider or content rotator. It converts the children inside any selected element into a Slider. One can define array of timeline according to which the slider will be synced. CSS animations can be used with this plugin to enhance the contents visually.

 

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.