Servage Magazine

Typer.js is a JavaScript library that allows you to create animated typing effects for any kind of text. Animated typing is often found on product landing pages to impress visitors with features of a product. In addition to a nice visual experience, libraries like Typer.js allow you to have many sentences that erase the previous one, resulting in less screen space required for text. Getting started Setting up Typer.js on your website is simple: Just download the JavaScript file from www.steven.codes/typejs and include it on your website using a <script> tag and you are ready to go! Unlike many other JavaScript libraries, Typer.js does not depend on jQuery or any other libraries. It ...

Adding dates via input elements in forms can be cumbersome unless a date picker is used. There are a few plugins available for jQuery and Bootstrap which make this process simple - yet implementing a powerful and advanced tool. The tool described below is called "Date Range Picker for Bootstrap" and is ready to go with a very simple implementation. Getting started The first step is to include the relevant resources into your site. The dependencies are Bootstrap (and jQuery), so you  need to get them first. Thereafter add the resources for the data range picker plugin. <!-- Include dependencies --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" /> <!-- Include date range picker ...

  There is an interesting story about Vilfredo Pareto, an economist who made an observation on the wealth of most of the nations in UN and found that 80% of the wealth of a nation is in the hand of 20% of the people in that country. This became famous as the 80/20 rule in the economic world there after. In our computing world especially in case of web development and web developers who are focusing on performance optimization technique this same rule is working for the code. There are only 20% codes, which are consuming 80% time of the client-server interactions. This is particularly true for http requests. Us web programmers are ...

The JavaScript library JSZip provides you with the ability to generate .zip files dynamically. This way you can send lots of data to a user in a convenient and bandwidth-saving way. With JavaScript becoming more and more powerful, and the amount of data handled by JavaScripts increasing every day, this is a great way to communicate with the user. Most users generally accept zip files from trusted sites - assuming that your users trust your site ;-) It's really easy to create a .zip file. Check out this sample code: var zip = new JSZip(); zip.add("Hello.txt", "Hello World\n"); img = zip.folder("images"); img.add("smile.gif", imgData, {base64: true}); content = zip.generate(); location.href="data:application/zip;base64,"+content; Creating zip files in the browser with JavaScript also ...

JavaScript came about during a dark and lawless time, before the web standards movement, when all the major players in the browser world were—for want of a better term—winging it. It likely won’t come as a major surprise to anyone that Netscape and Microsoft implemented radically different versions of the DOM, with the prevailing sentiment being “may the best browser win.” insertBefore() The insertBefore() method, as you might guess, inserts an element before another element. It takes two arguments: the first is the node that gets inserted, and the second is the element it gets inserted in front of. You also need to know the ...

Inner HTML gives us a simple method for accessing and changing the text and markup inside an element. It behaves differently from the methods we’ve covered so far. Let’s say we need a quick way of adding a paragraph of text to the first element on our page with a class of intro: var introDiv = document.getElementsByClassName("intro"); introDiv.innerHTML = "<p>This is our intro text</p>"; The second statement here adds the content of the string to introDiv (an element with the class value “intro”) as a real live element because innerHTML tells JavaScript to parse the strings “<p>” and “</p>” as markup. style The DOM also allows you to ...

Here we will discuss about some more id attributes syntaxes. By id attribute value getElementById() This method returns a single element based on that element’s ID (the value of its id attribute), which we provide to the method as an argument. For example, to access this particular image: <img src="photo.jpg" alt="" id="lead-photo">' We include the id value as an argument for the getElementById() method: var photo = document.getElementById("lead-photo"); By class attribute value getElementsByClassName() Just as it says on the tin, this allows you to access nodes in the document based on the value of a class attribute. This statement assigns any element with a class value of “column-a” to the variable firstColumn ...

We have earlier seen an introduction to DOM Nodes and Structures in JavaScript. Now let’s discuss some advanced DOM Management Concepts to make best use of it in Web Development. The document object in the DOM identifies the page itself, and more often than not will serve as the starting point for our DOM crawling. The document object comes with a number of standard properties and methods for accessing collections of elements. Just as length is a standard property of all arrays, the document object comes with a number of built-in properties containing information about the document. We then wind our way to the element ...

Many websites display data tables as part of their content. This is easily done with the <table> element in HTML, which is invented for the purpose of showing tabular data. However, graphs and charts have been more cumbersome for years, because they are more complex content elements. Initially charts were generated as images which could be included in the web page. Later the Flash technology has made more interactive charts possible, however the problems with Flash and its limitations have rendered those kinds of charts unpopular. Lately HTML has evolved a lot, and with the introduction of the <canvas> element more advanced drawings on pages have become possible. With the <canvas> element ...

Listening to feedback of users is important. The tool we are going to explore this time is not a typical feedback form. Instead, it allows visitors to give feedback interactively. Users can highlight areas or elements on a web page they need help with, write a comment to describe their issue or question, black out sensitive information and finally, send the feedback or support request. Initial Setup and Requirements We will achieve the above features with a tool called Feedback tool by a GitHub user JoeyAndres. This tool was previously abandoned but JoeyAndres forked the project to create a maintained version, so thank him for being able to use it. The Feedback tool depends ...