Flapper is a jQuery plugin that replicates the split-flap (or "Solari") displays that used to be common in train stations and airports

Output

Steps

Step 1

Download the zip file given in this link Download

Step 2

<!DOCTYPE html>

<html>

    <head>

        <title>Counter</title>

        <link href="flapper.css" type="text/css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script src="src/jquery.flapper.js"></script>

Working

1
-
2
-
3
-
4

Basic HTML Markup
5

This include flapper.css file . this is included in the above download file under Flapper-master > css folder
6

This line include the Jquery library through CDN
7

This include jQueryry.flapper.js file . this is included in the above download file under Flapper-master > js folder

Step 3

<!DOCTYPE html>

<html>

    <head>

        <title>Counter</title>

        <link href="css/flapper.css" type="text/css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script src="src/jquery.flapper.js"></script>

    </head>

    <body>

        <div id="animation_demo">

             <div class="display slow"><input class="slow XXL" /></div>

        </div>    

    </body>

</html>

Working

1
-
2
-
3
-
4

Basic HTML Markup
5

This include flapper.css file . this is included in the above download file under Flapper-master > css folder
6

This line include the Jquery library through CDN
7

This include jQueryry.flapper.js file . this is included in the above download file under Flapper-master > js folder
10
-
11
-
12

These div are used to show our counter
class : XXL denote size of display , you can find various range of size in flapper official site

Step 4

 $(document).ready( function() { 
                $.get("http://localhost/demo/data.txt", function(data){
                    var x =  data ;
                    var lenth = x.length ;
                    var  $demo_slow = $('#animation_demo input.slow');
                    var demo_timing = 900;
                    var demo_chars = [' ','0','1','2','3','4','5','6','7','8','9'];

                    $demo_slow.flapper({
                       width:lenth,
                       chars: demo_chars,
                       timing: demo_timing,
                    });  
                    $demo_slow.val(x).change();
                });
                
        });

Working

2

It call get request in the http://localhost/demo/data.txt url . It will return number as data for example:42 , This will be kept in data variable
5

It will point to the HTML DOM . It will select <input> element with slow class under element with animation_demo id
6

It will set total animantion time
7

It will set character through which roller has to be moved
9
-
10
-
11
-
12
-
13

This will initiate flapper function incide jquery.flapper.js
14

This will set value in counter

Step 5

<!DOCTYPE html>

<html>

    <head>

        <title>Counter</title>

        <link href="css/flapper.css" type="text/css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script src="src/jquery.flapper.js"></script>

    </head>

    <body>

        <div id="animation_demo">

             <div class="display slow"><input class="slow XXL" /></div>

        </div>    

    </body>

</html>

Working

1
-
2
-
3
-
4

Basic HTML Markup
5

This include flapper.css file . this is included in the above download file under Flapper-master > css folder
6

This line include the Jquery library through CDN
7

This include jQueryry.flapper.js file . this is included in the above download file under Flapper-master > js folder
10
-
11
-
12

These div are used to show our counter
class : XXL denote size of display , you can find various range of size in flapper official site

Step 6

 setInterval(function(){
           $.get("http://localhost/demo/scrapping.php", function(data, status){
              var x =  data ;
              var lenth = x.length ;
              var  $demo_slow = $('#animation_demo input.slow');
              $demo_slow.val(x).change();
            });
                    
         }, 300);

Working

This script will execute every 300 millisecond and add changed data

Step 7

 <!DOCTYPE html>

<html>

    <head>

        <title>Counter</title>

        <link href="css/flapper.css" type="text/css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script src="src/jquery.flapper.js"></script>

    </head>

    <body>

        <div id="animation_demo">

             <div class="display slow"><input class="slow XXL" /></div>

        </div>    

    </body>

    <script language="javascript">

        $(document).ready( function() {

                $.get("http://localhost/demo/data.txt", function(data, status){

                    var x =  data ;

                    var lenth = x.length ;

                    var  $demo_slow = $('#animation_demo input.slow');

                    var demo_timing = 900;

                    var demo_chars = [' ','0','1','2','3','4','5','6','7','8','9'];



                    $demo_slow.flapper({

                       width:lenth,

                       chars: demo_chars,

                       timing: demo_timing,

                    }); 

                    $demo_slow.val(x).change();

                });

               

        });



        setInterval(function(){

           $.get("http://localhost/demo/scrapping.php", function(data, status){

              var x =  data ;

              var lenth = x.length ;

              var  $demo_slow = $('#animation_demo input.slow');

              $demo_slow.val(x).change();

            });

                   

         }, 300);

        </script>

</html>

You can get this project in the github Download

Troubleshooting

Here are list of problems that you may face and their solution , Click on respective question to expand it

??
- .....

Output
Steps
Troubleshooting

Problems

Output

Steps

Working

Working

Working

Working

Working

Troubleshooting

No comments:

Post a Comment