Servage Magazine

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

Articles Tagged ‘javascript’

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

Pretty JavaScript tools for your website

Wednesday, September 5th, 2018 by Servage
There are many JavaScript tools out there, trying to help you adding some functionality to your website. Dialog, overlay, loader, image gallery, rating, social icons and many many more. The quality of those scripts is very different. And also the documentation and usage are at various levels. For new users to quickly find and integrate something without too many problems, both code quality and documentation are important. Have a look at this collection of JavaScript widgets for your website from no-margin-for-errors.com PrettyPhoto "prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It ...

Copy-to-clipboard with Javascript

Wednesday, August 22nd, 2018 by Servage
It's amazing what you can accomplish with Javascript. Frameworks like jQuery make it quite easy to get going with your own functionality. We have some articles about it here on the Magazine: Create a jQuery plugin and Element-specific data handling for jQuery plugins, and a presentation of Starter. You can pretty much do whatever you like, and quite fast as well, using jQuery, or similar Javascript technologies. The web also provides you with a whole lot of free/open-source scripts you can use, to add rich functionality to your web apps. Today I am going to show you how easy you can add a copy-to-clipboard function. "The Zero Clipboard library provides an easy way ...

Speed up your website – Part 4: JavaScript

Saturday, July 14th, 2018 by Servage
This is the fourth part of a simplified explanation of the "Yahoo best practices for speeding up your web site". Read the third part here. The third part is about CSS related optimization. Preferably place scripts at the bottom Scripts block parallel downloads of multiple items in the browser. Therefore you might want to place the scripts at the bottom of the page, if possible. It is a problem if your scripts alter the content of your document on the initial load, since you might want those scripts at the top. Make JavaScript (and CSS) external Including JavaScript and CSS in the HTML document reduces the amount of requests, but also ...