Split flap display plugin for JQuery

The airport departure board effect is now available for everybody to use

If you need a new and cool effect for your website you need not to look for such anymore. The split flap display plugin for JQuery gives you the ability to turn every string into an amazing eye-catching animation as you may have seen on an airport departure board.

It’s very simple to use

You need only to include the jquery library and the plugin file called splitFlap.js

Invoke the plugin on any HTML DOM object with proper innerHTML (text only).

Starting the animation goes like this:

The plugin has two modes of operation. The default mode uses the textual content of the object given to the plugin and implements the airport departure board effect on it. The second mode uses an array of words passed to it for a more genuine split-flap display recreation. More detailed information about all the options and setting is available at the end of this article.

The JQuery plugin is prepared for almost anything you could want of it

Let’s look at some examples:

The common regular flip implemented on hover:

Just place the mouse in a cell and watch what happens

The delayed flip implemented on hover:

With this settings the chars start to flip gradually in contrast to the default settings where they all start together.

More realistic airport departure board:

In this example I’ve passed an array of words. You can see the result for yourself. As you can see it copes very well with special chars and different alphabets.

On-demand flip:

You could pass words to the plugin dynamically.

Plugin documentation

Settings:

delayed: [boolean]

Description: Controls whether the animation starts with all chars flipping together (delayed: false) or they are gradually included to the flipping process (delayed: true)
Default value: false

chars: [string]

Description: A string which specifies the chars that are to be used in the flipping process. In case you’ve missed a char that appears in some of the innerHTMLs the plugin will automatically detect and add it. Parsing less chars will result in a faster animation.
Default value: ‘$_!@#%()-12357890abcdefghijklmnopqrstuvwxyz ‘

words: [Array]

Description: Parse here an array of words for the plugin to use.
Default value: []

speed: [integer]

Description: Given in milliseconds this is the speed at which the plugin refreshes the string while flipping. Smaller number will result in a faster animation.
Default value: 70

interval: [integer]

Description: Given in milliseconds this is the pause time between words. If there are no words passed this parameter is obsolete
Default value: 2000

Drag’n’Slide JQuery Gallery v2.0

Finally, the new and improved version of our Drag’n’Slide gallery is out. Following the latest trends in gallery design, we’ve added some new features to our product, while preserving the unique properties of the plugin. Below you may find some code samples, as well as a demo of the gallery.

What’s new?

Cool navigation added!

As you will see the new Drag’n’Slide jQuery gallery will provide the user with a simple and intuitive way of navigating across the pictures in the gallery. These tiny and cool circles will fit perfectly into any website design.

Changeable background colour!

For perfect compatibility with every website layout You can now choose the background colour that will enable the Drag’n’Slide jQuery gallery to fit right into your design.

Border on/off!

Outline the Drag’n’Slide jQuery gallery with a sleek border or just allow it to blend with the rest of the webpage.

You can find detailed documentation of the new features of the Drag’n’Slide Jquery Gallery below.

How to use Drag and Slide JQuery gallery?

Simple and easy to use

Just wrap your content with a single div and call the gallery on it. The code will look like this:

Drag and slide website content

If you wish to store additional HTML information inside each draggable entity, then you should wrap all the entities with the .page CSS class.

Available settings:

New features

border: {string}

Description: Determine the style, width and colour of the border that wraps the gallery.
Default value: ‘1px solid gray’
Example: border: ‘0’ or border: ‘3px double #676767’

backgroundColor: {string}

Description: Choose the right background color that would fill the empty space in the gallery if a picture is too small or the color that will appear behind Your content if You use the Drag’n’Slide JQuery Gallery in page mode.
Default value: ‘#383838’
Example: backgroundColor: ‘#FFFFFF’ or backgroundColor: ‘lightgreen’

Legacy settings: v1.0

width: {value} or ‘{value}px’

Description: Width of each gallery’s page/image. The width is applied only to images, whose own width is bigger than the the one described here.
Default value: ‘640px’
Example: width: 600 or width: ‘600px’

coefficient: 0 <= {value} < 1

Description: The coefficient of the offset needed in order for the image to be moved. If – for example – it is set to 0.2 (20%), the user would need to move current image/page 0.2 times of the whole width (see above) in order to see the next one. When instantMove property (see below) is set to true, the coefficient is overridden – its value won’t matter.
Default value: 0.4
Example: coefficient: 0.2

instantMove: {boolean}

Description: If set to true the image/page is directly moved after the first drag. If – for example – it is set to false (the default value), an image/page could be only moved when the user clicks on it, moves the mouse and releases it. If – on the other hand – the property is set to true, the only thing the user needs to do is to click on the image/page and moves the mouse horizontally – no release of the mouse button is needed.
Default value: false
Example: instantMove: true

verticalCenter: {boolean}

Description: Centers image (resp. – page’s content) vertically when the display’s height is bigger than the one of the object inside it.
Default value: false
Example: verticalCenter: true

initialTip: {boolean}

Description: A fast sliding effect of all the images/pages intended to show the user that the image (resp. – page contents) is draggable.
Default value: false
Example: initialTip: true

Download:

Download if-act’s gallery

We expect Your requests, recommendations and bug reports in the comment section. Cheers! 🙂

if-act’s Drag and Slide jQuery Gallery

We are glad to introduce ver1.0 of our Drag’n’Slide gallery. Below you may find some code samples, as well as a demo of the gallery. A modified version, used to present some content along with the images, is used in our portfolio.

How to use Drag and Slide gallery?

Simple and easy to use

Just wrap your content with a single div and call the gallery on it. The code will look like this:

Drag and slide website content

If you wish to store additional HTML information inside each draggable entity, then you should wrap all the entities with the .page CSS class.

Available settings:

width: {value} or ‘{value}px’

Description: Width of each gallery’s page/image. The width is applied only to images, whose own width is bigger than the the one described here.
Default value: ‘640px’
Example: width: 600 or width: ‘600px’

coefficient: 0 <= {value} < 1

Description: The coefficient of the offset needed in order for the image to be moved. If – for example – it is set to 0.2 (20%), the user would need to move current image/page 0.2 times of the whole width (see above) in order to see the next one. When instantMove property (see below) is set to true, the coefficient is overridden – its value won’t matter.
Default value: 0.4
Example: coefficient: 0.2

instantMove: {boolean}

Description: If set to true the image/page is directly moved after the first drag. If – for example – it is set to false (the default value), an image/page could be only moved when the user clicks on it, moves the mouse and releases it. If – on the other hand – the property is set to true, the only thing the user needs to do is to click on the image/page and moves the mouse horizontally – no release of the mouse button is needed.
Default value: false
Example: instantMove: true

verticalCenter: {boolean}

Description: Centers image (resp. – page’s content) vertically when the display’s height is bigger than the one of the object inside it.
Default value: false
Example: verticalCenter: true

initialTip: {boolean}

Description: A fast sliding effect of all the images/pages intended to show the user that the image (resp. – page contents) is draggable.
Default value: false
Example: initialTip: true

Download:

Download if-act’s gallery

I hope you would enjoy the gallery. Please write us if/when you find any bugs or just want to tell us Bravo 🙂
Have a nice day!

Javascript calculator with jQuery

At your attention is a simple tutorial about building a javascript calculator using jQuery. The whole code is explained below and a demo of the calculator is available here: calculator demo.

As I think the markup and the styling are self-explanatory, they would not be shown here explicitly, so let’s start with the code.
First we declare a few variables, half of them pointing to HTML elements.

$calc points to the calculator body, but I am pretty sure it has actually never been used through the code.
$display points at – of course – the calculator display (a div element), while $digits and $operations are sets representing the digits and operations DIVs respectively. The init variable is used by initializing the calculator and resetting the state – of course, it is 0. What operand point to is the first of two operands, taking part in each operation. The operation variable is used to hold the last unexecuted operation, chosen by the user. The afterOperation flag indicates whether the last user’s choice was a digit or an operation. The reset variable, pointing to an anonymous function, resets the display and both operand and operation, used through the code below.

The remaining part of the code is actually a few click handlers – for clicking on a digit or a operation button and two additional – for the decimal point (which I, should admit, wrongly call ‘dot’) and for the change of the sign (+/-). The first function, which comes after the variable declaration and initialization is the digit click handler.

First, as you can see, I exclude the dot and the sign buttons from the elements set, as they actually belong to the digits class, but should be handled a bit differently.
Here the afterOperation flag is used for the first time – there are two options, depending on the flag value – the first one (if (afterOperation == false) {…) is used when we are ‘building’ the value digit by digit and the second one is used to start ‘building’ the value after an operation has been performed. The main difference is in the text() and append() functions – the first one types the clicked digit ($(this).text()) in the display, while the second one simply concatenates the digit to these, already present in the display.
By afterOperation with a value of false, there are analogically two cases – the first one (if ($display.text() == init && $display.text().indexOf(‘.’)<0) {...) checks whether the display has the init value (0) AND whether NO decimal point is available. In this case the text() function is used – that means that the newly chosen digit is written in the display on the init value’s place. The reason to check for the absence of the decimal point, is the following – when we have for example 0 on the display and click the ‘dot’ button for adding a decimal point, the point is concatenated to the zero. However, the expression “0.” == 0 evaluates to true and so the text() function would be invoked, while we need to append digits after the decimal point – so the $display.text().indexOf(‘.’)<0 statement has been added. So in the case “0.” we have true for the first statement $display.text() == init and false for the second one, thus eventually having true AND false, which evaluates to false, making the code appending digits after the dot instead of not resetting the display with the text() function.
Let’s now have a look at the operation handler.

First, we make two additional local variables – currOperation for the current operation and currOperand for the current operand. Then we simply check if the Clear button is pressed – if so, we call the reset() function.
If not, however, we go on with the math.
First, we check if there is already an operation set AND whether the flag afterOperation has a value of false, which means that no operation button has been clicked just before the event, being handled at the moment. If both the upper conditions are satisfied, a switch statement (for the operation, not currOperation) takes care for doing the math. Please note that if we have typed a value (e.g. 5) for example, than chosen ‘+’ operation, type a value again and chose a ‘-‘ operation, the operation variable would point to the last unhandled one – that means the plus operation, so it would be caught and executed by the switch statement. So, at the moment of clicking on the minus sign, the plus operation would be executed.
The expression if (currOperation != ‘=’) {operation = currOperation;} takes care of assigning the current and still not executed operation (the ‘minus’ from the example above) to the operation variable. The operation behind the equal sign is, of course, not to be remembered anywhere – by clicking on the equal sign, we execute the last available operation and reset the operation and the afterOperation flag.
However, no matter how many times we have clicked on an operation button (different from “CE” and “=”),

statements would be executed – operand should point to the value, currently available on the display (that is – most likely – the result of the past operation) and afterOperation should be true.
The last two handlers are for the decimal point and the switch sign.

The ‘dot’ click handler appends a single dot to the digits available in the display if afterOperation flag is false or writes “0.” string in the display in case an operation button has been just clicked on.
The ‘sign’ click handler switched the sign only if the afterOperation flag is set to false.

I really hope the article has been useful and adequately responding to your needs.

Airport departure board or split-flap display effect with JavaScript

Split-flap display
In this tutorial I’ll show you how to achieve the split-flap display (aka airport departure board) effect with JavaScript. Now available also as Jquery plugin

Before we start with the coding, let my explain really quick what we’ll do. For the purpose of this tutorial I’ve prepared a table with strings. My if-act (effect) will be executed on mouse over and stopped on mouse out if necessary. Let’s get started!

When you look at an airport departure board what do you see? Yep, flipping characters! So lets begin by defining the chars we want to flip in a long string.

Let’s put this variable in the body of a constructor function that will be our flipper class.

As you can see the constructor has 1 parameter that is the object whose innerHTML we’ll flip. In order to do that we need the chars of the innerHTML in an array. Chopping a string to array is simple with the method .split() of the String class. I also use another two arrays. The first I called indexes holds the indexes of the chars that need to be flipped. The other one is the array that will be flipped and it holds indexes of chars in our chars variable. With a little bit of initialization we come to this:

We’ll come to the rest of the variables in a moment but first take a look at the initialization loop. When the if-act starts every char from the innerHTML will start to flip from the char at position 0 in chars (#). I need all of them to start rolling and that’s why I push all indexes in the indexes array. Notice that indexes in this variable correspond to those of both the textArray and the cia. The flipping will be handled by a function called roll(). In its body there is a loop trough indexes. For every index I increment the value in cia and thus go another char forward from chars until I reach the char that is at the same index in textArray. In that case I exclude the index so that it’s not flipped anymore. The function looks like this:

The repaint function assembles the string and puts/shows it.

The roll method is called every 70ms by setInterval(). That’s what I need the this.interval variable for.

_this holds the instance scope. And the code of the whole class goes like this:

You can check out the demo here: split-flap display if-act

The second table holds another version of my class which starts to flip the chars one by one.

Tips and Hints: You can control the speed of the if-act by reducing/increasing the time in setInterval() and/or the number of the chars in chars.

For questions, suggestions or requests use the comment section below.