Giter Club home page Giter Club logo

fnonsticky's Introduction

FnonSticky

Is a simple javascript file that creates a sticky note into a website similar to the windows sticky app.

Try me DEMO

Demo

Installation :

Use node package manager :

npm i fnonsticky

Add (css and js) to HTML

<link rel="stylesheet" href="fnonsticky.min.css" />

<script src="dist/fnonsticky.js"></script>

How to use:

// Simple Call
// @param1 {string}: Required, message text.
FnonSticky.Create("Good Morning Me\nCall your mother.");
// Advanced Call
// @param1 {string}: Required, message text.
// @param2 {Object}: Optional,update default settings if you need to.
FnonSticky.Create("Good Morning Me\nCall your mother.", {
  animate: true, // set false if you want to disable entrance animation
  background: null, // change the note background
  color: null, // change text color
  hidePin: false, // hide the red pin at the left-top corner
  identifier: null, // see explaination below...
  initWidth: null, // initial width of the note
  onClose: null, // function fires on note closing
  onLoaded: null, // function fires on note loaded
  saveOnRefresh: false, //if you want to save note in case of page refresh. note will be stored in sessionStorage and will load back on page loaded.
  showTime: true, // show time part at the bottom right corner
  time: null, // if null creating time will be placed. you can write anything here but the default was for time.
  zIndex: 10, // sticky z-index
});

identifier option

First of all, you need to know that identifier will not do any changes if saveOnRefresh is set to false. the identifier is a simple string that helps identify which notes belong to a user. In case you are going to use FnonSticky on a multiuser website and you want to store notes on sessionStorage and the current user just logged out and another user just logged in back within the same session, the notes will be displayed back if the identifier is not set to differentiate the users


Change Default Settings

You can change FnonSticky default settings simply as shown:

FnonSticky.DefaultSettings.identifier="Username";
FnonSticky.DefaultSettings.background="red";
FnonSticky.DefaultSettings.color="green";
FnonSticky.DefaultSettings.hidePin=true;

// if you call create function now,  changed options will be applied unless you provided another options in the create function second parameter

Final Word

Mother is an excellent example of love, affection, and sacrifice. So show the love to your mothers before it's too late, and PLEASE PRAY FOR MY MOTHER.

I love you ๐”‰๐”ซ๐”ฌ๐”ซ


License

MIT License

fnonsticky's People

Contributors

superawdi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.