Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘javascript’

Beautiful date range picker for Bootstrap

Tuesday, June 18th, 2019 by Servage
date-range-pickerAdding 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 ...

CSS sprites are cool and useful

Thursday, May 2nd, 2019 by Servage
  How CSS Sprites Work 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 ...

Create .zip files with JavaScript dynamically

Saturday, March 23rd, 2019 by Servage
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 ...

Using DOM elements in Javascript – Part 4

Tuesday, February 26th, 2019 by Servage
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 ...

Using DOM elements in Javascript – Part 3

Saturday, February 16th, 2019 by Servage
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 ...

Using DOM elements in Javascript – Part 2

Saturday, February 9th, 2019 by Servage
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 ...

Using DOM elements in JavaScript – Part 1

Saturday, February 2nd, 2019 by Servage
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 ...

Beautiful charts enrich your data

Saturday, December 29th, 2018 by Servage
chartjsMany 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 ...

Build an interactive feedback form with Javascript

Sunday, November 18th, 2018 by Servage
javascript-codeListening 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 ...

Build A Toolkit To Help Define Your Web Design Style

Sunday, November 4th, 2018 by Servage
In order to get good conversion rates and positive user experiences, user interface design is vital. Let’s take a look at some practical ideas to do that. Single Column Layout The first consideration in user interface (UI) is the page layout. In our previous web era, we were free to try various options for layout and among them, multi-column approach was common, since we then wanted to use screen space at a maximum level. Now, with mobile web, we are restricted to single column layout since panning on hand held devices is not advisable, along with the scrolling involved. With finger gestures, a visitor feels a natural ease and ...