Animated Placeholder Text: Show animated text as placeholders for text inputs

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 64%Total: 181 All time: 289 This week: 8Up
Version License JavaScript version Categories
animated-placeholder 1.0BSD License5Animation, Forms
Description 

Author

Gianluca Zanferrari

This object can shows animated text as placeholders for text inputs.

It can take a list of text input fields that will show given placeholder text.

The input placeholder text is animated by shifting each character to the left at a given speed determined by the shift time interval.

Innovation Award
JavaScript Programming Innovation award nominee
September 2016
Number 2		 Placeholder text is a string that is used to display inside text inputs while they are empty to let the user know that what is the input he is expected to enter in the form field.

Sometimes users do not quite pay attention to placeholder text.

This object grabs the user attention in a more effective way by using animation to make the placeholder text move at a given speed.

Manuel Lemos
Picture of Gianluca Zanferrari
  Performance   Level  
Name: Gianluca Zanferrari <contact>
Classes: 6 packages by
Country: The Netherlands The Netherlands
Age: 58
All time rank: 81 in The Netherlands The Netherlands
Week rank: 6 Up2 in The Netherlands The Netherlands Down

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 2x

Winner: 1x

Example

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="placeholder.js"></script>
    </head>
    <body>
        <h2>Animated placeholder text</h2>
        <form>
            <p>Your name:</p>
            <input type="text" name="name" id="name" style="width: 250px; padding: 3px; font-size: 17px">
            <p>Your Age:</p>
            <input type="text" name="age" id="age" style="width: 250px; padding: 3px; font-size: 17px">
            <p>Your Adress:</p>
            <input type="text" name="address" id="address" style="width: 250px; padding: 3px; font-size: 17px">
        </form>
        <script>  
            var obj = new placeholder();
            obj.interval_time(5000); // optional, default 4000 milliseconds
            // pass an object as parameter
            // key(s) : input field names
            // value(s) : text to show as placeholder
            obj.set_fields({'name': 'Please enter your name...', 'age': 'Please enter your age...', 'address': 'Please enter your address...'});
        </script>
    </body>
</html>

  Files folder image Files (2)  
File Role Description
Accessible without login Plain text file example.html Example example
Plain text file placeholder.js Class class itself

Downloadanimated-placeholder-2016-09-28.zip 1KB
Downloadanimated-placeholder-2016-09-28.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:181
This week:0
All time:289
This week:8Up
 User Ratings  
 
 All time
Utility:91%StarStarStarStarStar
Consistency:91%StarStarStarStarStar
Documentation:-
Examples:91%StarStarStarStarStar
Tests:-
Videos:-
Overall:64%StarStarStarStar
Rank:33
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.