Archive for April, 2017

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 Use jQuery’s .select() Method

jQuery’s .select() method is not a super popular or commonly used jQuery event method, but it can be very useful. A select event occurs when text within a text area or text input field is selected (highlighted) by a user using the cursor. Basically, the only time you would use it is if you want a particular effect to happen or code to change as a direct result of a user selecting text written, either text by themselves or text that exists as the result of it being assigned the value for the elements in question, within a text area or text input field.

What follows is a look at the basic syntax, which is similar to that of many other jQuery event methods:

$(selector).select(function)

You can choose to attach a function to the select event, or you can choose to leave the parameter parentheses blank. To see what it might look like with a function attached, check out the code snippet example below.

To better understand how this jQuery event method works, we’re going to show you how you would use it in a realistic context. In the example below, the code demonstrates how the .select() method can be used to trigger an alert message on your page:

$("textarea").select(fucntion(){
   alert("You highlighted some text -- good job!");
})

So in the example above, when any text from within a text area is selected or highlighted (whether it be text entered by the user or text that was already there), an alert will pop up on the page that says “You highlighted some text — good job!” It’s important to remember that because of the way this code is written, this alert will appear each and every time that text is selected or highlighted within any text area element on the page. If you’d like for that to be different, then be sure to customize the code to suit the needs of your own project.

jQuery Bubbling Text Effect

This tutorial will demonstrate how to use CSS, jQuery, and JavaScript to create a really simple and cool text effect where it appears as though there are bubbles forming behind the text. After forming, the bubble float above the text before they disappear. This tutorial was inspired by a code snippet that originally appeared on CodePen.

Screen Shot 2017-04-15 at 4.08.17 PM

The HTML

To start creating this effect, first you’ll need some HTML. We’ve included our text in an h1 tag which is wrapped in a div. Check out our code below:

<div class="bubbles">
<h1>Bubble Text!</h1>
</div>

The CSS

Even though jQuery is the most important part of getting the animated bubbles to work for this effect, this snippet would be incomplete without some styling. In the CSS code snippet below, we define things like the background-color, the font-family, and the round shape of the bubbles. Make sure you don’t skip this step, but feel free to customize the code to your liking.

body {
background-color: #3498db;
}
.bubbles {
    display: inline-block;
    font-family: arial;
    position: relative;
}
.bubbles h1 {
    position: relative;
    margin: 1em 0 0;
    font-family: 'Lemon/Milk', cursive;
    color: #fff;
    z-index: 2;
}
.individual-bubble {
    position: absolute;
    border-radius: 100%;
    bottom: 10px;
    background-color: #fff;
    z-index: 1;
}

The jQuery

All that’s left to create this cool effect is the addition of some jQuery code. The jQuery is very straightforward – we need to create two arrays, one blank one that will determine the positioning of the bubbles, and another that is populated and will help determine the size of each bubble. Then, we’ll need to write a function that selects random array elements, and another that generates a new selection every 350 milliseconds. Then we have some code that will append the bubbles to the HTML so that they appear in the viewport, and finally we need a final callback function to remove the bubbles from the viewport, so that a huge collection of bubbles doesn’t accumulate at the top of the page. The original author of the aforementioned CodePen snippet annotated the jQuery code very well, so we’ve left his meticulous notes in the code to help you follow the steps as you read them.

// Created for an Articles on:
// https://www.html5andbeyond.com/bubbling-text-effect-no-canvas-required/
jQuery(document).ready(function($) {
    // Define a blank array for the effect positions. 
    // This will be populated based on width of the title.
    var bArray = [];
    // Define a size array, this will be used to vary bubble sizes
    var sArray = [4, 6, 8, 10];

    // Push the header width values to bArray
    for (var i = 0; i & lt; $('.bubbles').width(); i++) {
        bArray.push(i);
    }

    // Function to select random array element
    // Used within the setInterval a few times
    function randomValue(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }
    // setInterval function used to create new bubble every 350 milliseconds
    setInterval(function() {
        // Get a random size, defined as variable so it can be used for 
        // both width and height
        var size = randomValue(sArray);
        // New bubble appeneded to div with it's size and left position being set inline
        // Left value is set through getting a random value from bArray
        var styleElm = 'style="left: ' + randomValue(bArray) + 'px;';
        styleElm = styleElm + 'width: ' + size + 'px; height:' + size + 'px;"';
        $('.bubbles').append('<div class="individual-bubble"' + styleElm + '></div>');

        // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves
        // Callback function used to remove finsihed animations from the page
        $('.individual-bubble').animate({
            'bottom': '100%',
            'opacity': '-=0.7'
        }, 3000, function() {
            $(this).remove()
        });
    }, 350);
});

Now you can experiment with this very cool effect — customize the speed, size of the bubbles, colors, etc — and add it to any of your next projects!

Using jQuery to Get Page Load Time

If you ever find yourself needing to know how long it takes for one of your pages to load, we’ve got the snippet for you. There are many reasons you might want to understand how long a page load takes — doing this might especially appeal to developers who have got their pages loaded with ads, and want to test how much they’re slowing down the site. You can try loading the page yourself, but sometimes to the naked eye it can appear as if the page has loaded, when really scripts are still trying to be fetched and ads have yet to be loaded. Under these circumstances, it’s easier to just test it out using code.

See below for the code snippet:

var start = new Date(); 
jQuery.ready(); 
var end = new Date(); 
var difference = (endTime - startTime) / 1000; 
alert("document.ready time: " + difference + " seconds");

In the code above, we first record the time (using the Date method) when the page is requested and begins to load. This line must go at the top of the code. Then, one the page is loaded (that’s what the jQuery.ready() line is for) we fetch the time again. We find the difference between the two and divide the answer by 1000, because the time is measured in milliseconds and we want our answer to be in seconds for the purpose of this tutorial (but milliseconds is totally fine too if you’d rather your answer be in that format — just remove the division part of the equation!) and set the time to the variable “difference”. From there, we use an alert to let us know the time it took for the page to load by referencing the difference variable. If you don’t want the time difference to appear as an alert, you can log it to the Console or add it to your HTML — whichever works best for you and your project.