Notifly Basic Notification: Show notifications for a period of time on a page

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 121 All time: 386 This week: 5Up
Version License JavaScript version Categories
notifly-notification 1.0GNU General Publi...1.0Animation, HTML, Utilities and Tools
Description 

Author

Everton da Rosa

This object can show notifications for a period of time on a page.

It takes a given HTML message and displays it inside a div on a page.

The message appears on a position of a page defined by a CSS class with a name based on the position parameter.

The message may disappear after given period of time using CSS transitions.

Picture of Everton da Rosa
  Performance   Level  
Name: Everton da Rosa <contact>
Classes: 7 packages by
Country: Brazil Brazil
Age: 43
All time rank: 506 in Brazil Brazil
Week rank: 6 Up1 in Brazil Brazil Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 3x

Example

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">


    <title>Notifly :: Basic Notification</title>
    
    
    
    
        <link rel="stylesheet" href="style.css">

    
    
    
  </head>

  <body>

    <!--
This is an example of Notifly use only teaching purposes.
-->
<div>
  <label>Notification text</label>
  <textarea id="msg">
    Notifly is cool. ;-)
  </textarea>
</div>
<div>
  <label>Notification display time</label>
  <input type="number" step="1" value="0" id="time">
</div>
<div>
  <label>Display position</label>
  <select id="position">
    <option value="notifly-top-center" selected>At the top, centralized</option>
    <option value="notifly-bottom-right">Bottom right</option>
  </select>
</div>
<button onclick="show()">Show</button>
    
        <script src="notifly.js"></script>

    
    
    
  </body>
</html>

  CODEPENExternal page  
  Files folder image Files (4)  
File Role Description
Accessible without login Plain text file index.html Example Example of use
Accessible without login Plain text file license.txt Lic. licence
Plain text file notifly.js Class Main class file
Accessible without login Plain text file style.css Data styles

Downloadnotifly-notification-2015-06-08.zip 2KB
Downloadnotifly-notification-2015-06-08.tar.gz 2KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:121
This week:0
All time:386
This week:5Up

  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.