DOM/Array/String Manipulation Library - jQuery Simply Fly

File Size: 772 KB
Views Total: 678
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
DOM/Array/String Manipulation Library - jQuery Simply Fly

Simply Fly is a useful JavaScript library based on jQuery that provides several methods to handle/manipulate strings, arrays, DOM elements and date objects.

How to use it:

1. Load the minified versionion of the Simply Fly library after jQuery and we're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="simply-fly-min.js"></script>

2. 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.

// Call the method for the input field you want to have upper case characters.
$(".textField").isUpper();

3. 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.

// Call the method for the input field you want to have numbers with dots. 
$(".textField").isNumber();

4. The writesTo()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

// 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. 
$(".textField").writesTo(".myDiv");

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

// Call the method for the input field and pass the table class or id as parameter which you want to be filtered. 
$(".searchInput").filters(".myTable");

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

// Call the methods for the element/s on some button action 
$(".copyContentButton").click(function(){
  $("#copyparagraph").copyContent();
}); 

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

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

// Call the method for the input field and pass the target element as parameter. 
$(".textField").searchesInto(".myDiv");

8. The ediTable()code> 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.

// Just call the method for the table you want to be edited. 
$("#mytable").ediTable();

9. The showProgress()code> 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 34.38 % 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.

$(".progressDiv").showProgress({

  // sets the height of the line
  height : "4px",

  // sets the color of the line,
  // accepts RGB, Hex values, color names or even gradient
  color : "rgb(48,157,189)",

  // sets the border-radius
  borderRadius : "4px",

  // sets the opacity
  opacity : 0.8,

  // sets the z-index where there is a possibility that the line remains because of other contents in your page.
  zIndex : 99
  
});

10. 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.

// Just call the method for the element you want to be fixed. 
$(".menuDiv").fixedOnScroll({
  zIndex: 1234
});

11. The showConfirm() 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.

// Call the method for the button or link.
$("#save").showConfirm({
  heading : "Confirm"
  message : "Do you want to save your data?"
  okButton : "Ok"
  cancelButton : "Cancel"
});

12. 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.

// Call the method for the element you wish to slide. 
$(".fromLeftSlider").slideOnAppear({
  from : "left", 
  time : 600
});


$(".fromRightSlider").slideOnAppear({
  from : "right", 
  time : 600
});

13. 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.

// Just call the method for your table. 
$("#columnTable").columnFilter({
  except : [0, 2]
});

14. The getSum() and getAverage() methods are applicable for arrays of number. Their names define their functionalities.

// Call the method for an array and assign the value to the array itself or to some other variable. 
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...*/

15. The getMin() and getMax() methods work on both number and string arrays, returns min and max values respectively.

// Call the method for an array and assign the value to the array itself or to some other variable. 
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"*/ 

16. The separateWith() method 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.

// Call the method for an array and assign the value to the array itself or to some other variable. 
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"*/ 

17. The clean()code> method returns an array by removing unwanted values. The unwanted value is passed as parameter.

// Call the method for an array and assign the value to the array itself or to some other variable. 
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" ]*/ 

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

18. 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.

// Call the method for an array and assign the value to the array itself or to some other variable. 
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"*/ 

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

// 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. 
datesBetween(new Date("2018/03/21"),new Date("2018/03/28"));  /* as date object*/
datesBetween("2018/03/21", "2018/03/28");  /* as string*/

Change log:

2018-04-08

  • JS update

This awesome jQuery plugin is developed by HqShiblu. For more Advanced Usages, please check the demo page or visit the official website.