Sections

◊ DOM Methods .isUpper() .isNumber() .writesTo() .filters() .copyContent() .copyHTML() .searchesInto() .ediTable() .showProgress() .fixedOnScroll() .showConfirm() .slideOnAppear() .columnFilter()
◊ Array Methods .getSum() .getAverage() .getMin() .getMax() .separateWith() .clean()
◊ String Methods .replaceAll()
◊ Miscellaneous datesBetween()

Simply Fly is a client side javascript library based on jQuery for manipulating DOM elements, arrays and strings.





Simply Fly is dependent on jQuery, so first add jQuery to your page-

<script src= "https://code.jquery.com/jquery-3.3.1.min.js" ></script>


Then add Simply Fly-

<script src="https://hqshiblu.github.io/simply-fly/js/simply-fly.js"></script>


or the minified version-

<script src="https://hqshiblu.github.io/simply-fly/js/simply-fly.min.js"></script>



You can also check our GitHub repository .





What can Simply Fly do for you? Here is the complete documentation.



DOM Methods

All the DOM methods return the jQuery object so that the methods can be chained


.isUpper()
In many online registration processes you may have noticed that they want the user to fill all the fields with upper case characters. As a developer you may want this too. Users can simply turn on caps lock or press shift to satisfy your condition. But there is no guarantee that the user will do so. Simply Fly makes it easier with the isUpper method. Whenever the user presses a letter it will turn into upper case.

Usage

 Call the method for the input field you want to have upper case characters.

Example

 Suppose we have a text box with class upperOne. Then we simply write-

$(".upperOne").isUpper();


Here is the implementation...



This method accepts no parameter.

.isNumber()
Some of the input may contain some amount, serial number of ip addresses. Adding letters to such fields may lead to some error. Input type number doesn't deal with characters. The isNumber removes the letters from the text field while typing.

Usage

 Call the method for the input field you want to have numbers with dots.

Example

 Suppose we have a text box with id numberOne. Then we simply write-

$("#numberOne").isNumber();


Here is the implementation...



This method accepts no parameter.

.writesTo()
This method simply adds the text of an input field to an element. You can add text in div, paragraph, columns of table and much more...

Usage

 Call the method for the input field and pass the element as parameter in which you want to append the text from the input field.

Example

 Suppose we have a text box with class myInput and a div with a class myDiv. Then we simply write-

$(".myInput").writesTo(".myDiv");


Here is the implementation...


class="myDiv"



.filters()
This method filters the rows of a table according to the text user searches for

Usage

 Call the method for the input field and pass the table class or id as parameter which you want to be filtered.


Example

 Suppose we have a text box with class filterInput and a table with a class filterTable. Then we simply write-

$(".filterInput").filters(".filterTable");

NB: Make sure that your table has a tbody
Here is the implementation with text field and a table with 2000 rows...



Student Department University

This filtering is case insensitive

The filters() method searches for substrings across the columns. If any of the columns matches with text in the input field this method will keep showing the whole row. To search for specific columns use the columnFilter() method.

.copyContent(), .copyHTML()
These methods can be called upon some button action. These methods takes the contents or HTML of an element into the clipboard.

Usage

 Call the methods for the element/s on some button action


Example

 Suppose we have a p tag with <strong>Hello world</strong> into it.

The .copyContent() methods copies Hello world into the clipboard and the copyHTML() copies <strong>Hello world</strong> into the clipboard.
Let's assume that the id of the p tag is copyparagraph. Then...

$(".copyContentButton").click(function(){ $("#copyparagraph").copyContent(); });

$(".copyHTMLButton").click(function(){ $("#copyparagraph").copyHTML(); });


Click on any of the below buttons and paste on the text box to see what happens

Hello world

 
These methods accept no parameters.
Note that the methods copy the contents inside the element, not the element itself.


.searchesInto()
This method takes input from a text box and marks if the text is present in the target element

Usage

 Call the method for the input field and pass the target element as parameter.

Example

 Suppose we have a text box with class markerTextField and a div with a class markedDiv. Then we simply write-

$(".markerTextField").searchesInto(".markedDiv");


Here is the implementation...


jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software using the permissive MIT License. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

Note that this method is case sensitive

.ediTable()
This method is useful for inline editing. Click on a cell of a table and a text field appears with content of the cell allowing to edit the content of the cell. When you click outside the particular cell then the text field disappears and the cell becomes normal again.

Usage

 Just call the method for the table you want to be edited.


Example

 The code for the table with id myEditable should be

$("#myEditable").ediTable();

NB: Make sure that your table has a tbody
Click on any of the cells to see what happens

Student Department University


.showProgress()

Usage

 This method is applicable only for scrollable elements. As you have scrolled to this section you may have noticed that a white line has appeared on the top of this page. This line actually shows how far you have scrolled. So far you have scroll up to of the whole document. That's also the width of the line. This is an example that you can call this method for document, body or any other scrollable element.


Example

 A scrollable div with class progressDiv should be called like this-

$(".progressDiv").showProgress();

Scroll the below div to see what happens

Student Department University

Here, the div is scrollable, not the table. So, the method has been called for the div.
If you look closely you will see that the top most progressbar has sharp corners whereas the progressbar attached with progressDiv is rounded and their colors are different too. The showProgress() methods accepts optional JSON parameter through which you can customize the progress bar.

The parameters are-
height : string,
sets the height of the line color : string,
sets the color of the line,
accepts RGB, Hex values, color names or even gradient opacity : int/string,
sets the opacity borderRadius : string,
sets the border-radius zIndex : int,
sets the z-index where there is a possibility that the line remains because of other contents in your page.


Now, if we customize the above progressbar with the following parameters like this...

$(".progressDiv").showProgress({
      height : "4px",
      color : "rgb(48,157,189)",
      borderRadius : "4px",
      opacity : 0.8
});

it gives the following output-

Student Department University


As mentioned earlier, all the parameters are optional. If any of the parameters is not provided the default value for that property is set.
The default values are-
height : "6px",
color : "rgb(19,62,109)",
opacity : 1,
borderRadius : "0px",
zIndex : 1


If you don't see the progressbar after calling the method, increase the zIndex of your element and check again.

.fixedOnScroll()
You have noticed in some website that the menubar remains fixed as soon as it reaches as soon as it reaches the top. The fixedOnScroll method eases this job for you.

Usage

 Just call the method for the element you want to be fixed.


Example

 A div with class menuDiv should be written like this

$(".menuDiv").fixedOnScroll();

As this may interrupt the contents of the current page we have placed the demo here.
This method accepts an optional zIndex parameter which you set like this-

$(".menuDiv").fixedOnScroll({
   zIndex:1234
});


Without any parameter zIndex is set to 999999 as default.

.showConfirm()
This method works on a button action or for some . There might be some sensitive actions in your page like Save, Delete etc. Your user may click on the delete button accidentally. Now you may want to show a prompt whether the user actually wants to delete the data or not. If user clicks on Yes then it will be submitted otherwise not. Simply Fly automates this prompt box for you.

Usage

 Call the method for the button or link.
showConfirm handles the click event, so no separate click event handler is needed.


Example

 Say, we have a (id = ) save button. So, we should write-

$("#save").showConfirm();

It will generate the following box-

  Message


Are you sure?

Yes

  

No



In practical this box is initially hidden. It pops up when you click on the particular button or link.
The demo of fixedOnScroll method is in other page, right? We will go to the page by clicking on this link , but this time a pop up box will appear.

As you can see it has some default text. You can change them by passing optional JSON parameter.

In the above example-
The word Message is the heading,
Are you sure to visit this link? is the message,
Yes is the Ok button and
No is the Cancel button

Now, we can change these through parameter-

$("#save").showConfirm({

  heading : "Confirm",
  message : "Do you want to save your data?",
  okButton : "Ok",
  cancelButton : "Cancel"

});




gives the following output-

  Confirm


Do you want to save your data?

Ok

  

Cancel



.slideOnAppear()



Tell me and I forget. Teach me and I remember.
Involve me and I learn




Loved the way this div appeared? You too can make your elements appear like this with the slideOnAppear() method.
The element appears on the screen as soon as you scroll to that particular portion.

Usage

 Call the method for the element you wish to slide.


Example

 Say, we have a div with class mySlider. So, we write-

$(".mySlider").slideOnAppear();


As you can see the above div has appeared from right, but what if we want our element to appear from left? Or top? Or botto,?
slideOnAppear() takes optional JSON parameters through which you can tell the method which side your element will appear from and also the time it will take to slide. Set the time in milliseconds.

$(".fromLeftSlider").slideOnAppear({

  from : "left",
                                 time : 1200    /* milliseconds */

});



$(".fromRightSlider").slideOnAppear({

  from : "right",
                                 time : 600   /* milliseconds */

});



$(".fromTopSlider").slideOnAppear({

  from : "top",
                                 time : 600   /* milliseconds */

});



$(".fromBottomSlider").slideOnAppear({

  from : "bottom",
                                 time : 600   /* milliseconds */

});



Shows the following..






Be slow in choosing a friend, slower in changing









Hear reason, or she'll make you feel her









Well done is better than well said









Beware of little expenses. A small leak will sink a great ship







If no parameter is given by default the element appears from right and takes 800 milliseconds.


.columnFilter()
This method is similar to the filters() but the difference is that it searches into specific columns. If the no substring in the specific column exists the whole row will be vanished. Unlike the filters() method you don't have to add text fields manually, the columnFilter() method itself adds a text field on the top of each column automatically.

Usage

 Just call the method for your table.


Example

 Suppose the id of the table is columnTable. Then we simply write-

$("#columnTable").columnFilter();

NB: Make sure that your table has a tbody
Here is the implementation for a table with 2000 rows...

Student Department University

This filtering too is case insensitive

Now, suppose one of your columns contains checkbox which has nothing to be filtered. You can tell the method which column to fiter and which not.

The columnfilter() method takes an optional JSON parameter through which you can tell the method which columns you don't want to be filtered. Suppose we don't want the Student and University column to be filtered and their indices are 0 and 2. Then we can write-

$("#columnTable").columnFilter({ except : [0, 2] });



As you can see the columnFilter() takes a JSON parameter and the parameter except is an array.

The output with above parameter...

Student Department University




Array Methods

Simply Fly array methods simplifies some calculations and manipulation of arrays.
Remember, none of the methods changes the original array i.e. you have the assign the returned value to a variable.

.getSum(), .getAverage()
These methods are applicable for arrays of number. Their names define their functionalities.

Usage

 Call the method for an array and assign the value to the array itself or to some other variable.

Example

 We have an array...
var numberArray = [ 5, 4, 1, 2, 9, 8, 7, 4, 1, 210, 25 ];

var sum = numberArray.getSum();   /* returns 276*/
var average= numberArray.getAverage();   /* returns 25.0909...*/



In both the cases the original numberArray remains unchanged


.getMin(), .getMax()
Works on both number and string arrays, returns min and max values respectively

Usage

 Call the method for an array and assign the value to the array itself or to some other variable.

Example

 We have an array...
var numberArray = [ 5, 4, 1, 2, 9, 8, 7, 4, 1, 210, 25 ];
var stringArray = [ "Tom", "Jerry", "Popeye", "Olive", "Bluto" ];

var minNumber = numberArray.getMin();   /* returns 1*/
var minString = stringArray.getMin();   /* returns "Bluto"*/

var maxNumber = numberArray.getMax();   /* returns 210*/
var maxString = stringArray.getMax();   /* returns "Tom"*/



Both numberArray and stringArray remain unchanged


.separateWith()
Returns a string formed with the members of the array separated by one or more characters defined by the user. Pass the separator string as parameter. This parameter is required.

Usage

 Call the method for an array and assign the value to the array itself or to some other variable.

Example

 We have an array...
var myArray = [ "hello", "John", "how", "are", "you" ];

var separatedString = myArray.separateWith(" ");   /* returns "hello John how are you"*/
var anotherString = myArray.separateWith("-");   /* returns "hello-John-how-are-you"*/
var yetAnotherString = myArray.separateWith("abc");    /* returns "helloabcJohnabchowabcareabcyou"*/


In both the cases the original myArray remains unchanged


.clean()
This method returns an array by removing unwanted values. The unwanted value is passed as parameter, The parameter is required.

Usage

 Call the method for an array and assign the value to the array itself or to some other variable.

Example

 We have an array...
var myArray = [ "hello", null, undefined, "John", "how", NaN, "are", null, "you" ];

var cleanedString = myArray.clean(null);   /* returns [ "hello", undefined, "John", "how", NaN, "are", "you" ]*/
var cleanedString = myArray.clean(undefined);   /* returns [ "hello", null, "John", "how", NaN, "are", null, "you" ]*/

To remove all the unwanted values at a time-

var cleanedString = myArray.clean(undefined).clean(NaN).clean(null);   
/* returns [ "hello", "John", "how", "are", "you" ]*/



In all the cases the original myArray remains unchanged




String Methods


.replaceAll()
JavaScript has a built-in replace function which replaces a substring in a string, but the problem is that it only replaces the first occurrence of the substring. replaceAll() removes this limitation and replaces all the occurrences of the substring.

Usage

 Call the method for an array and assign the value to the array itself or to some other variable.

Example

 We have an array...
var numberArray = [ 5, 4, 1, 2, 9, 8, 7, 4, 1, 210, 25 ];
var stringArray = [ "Tom", "Jerry", "Popeye", "Olive", "Bluto" ];

var minNumber = numberArray.getMin();   /* returns 1*/
var minString = stringArray.getMin();   /* returns "Bluto"*/

var maxNumber = numberArray.getMax();   /* returns 210*/
var maxString = stringArray.getMax();   /* returns "Tom"*/



Both numberArray and stringArray remain unchanged




Miscellaneous

The following methods are to be called directly and accept some parameters that are mandatory.


datesBetween()
This method accepts two parameters- the start date and the end date. It returns an array of dates between them.

Usage

 Call the method and set the start date as the first parameter and the end date as second. You can pass them either as date object or string.

Example

 Suppose we want the dates between 21 March, 2018 and 28 March, 2018.
So we write either
datesBetween(new Date("2018/03/21"),new Date("2018/03/28"));  /* as date object*/
or
datesBetween("2018/03/21", "2018/03/28");  /* as string*/

Now, if we keep this into a variable..

var dates = datesBetween(new Date("2018/03/21"),new Date("2018/03/28"));

It returns an array of date objects from 21 March, 2018 to 28 March, 2018. If we iterate through it and append as string it gives the following output-