Servage Magazine

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

Archive for January, 2017

Creating dropdown-menus without JavaScript

Monday, January 30th, 2017 by Servage
dropdownDropdown menus are found on almost every website. The most common place for a dropdown is the main navigation bar, although a website can have dropdowns in almost any context. You can create a dropdown menu with JavaScript but this often makes it unnecessarily complicated. Let’s explore what it takes to make a simple navigation bar with only HTML and CSS. HTML Structure New designs are usually started by considering the HTML structure, so let’s do that first. The HTML of a dropdown menu is usually quite simple, and we only need three elements: <ul>, <li>, and <a>. You may also want to wrap the whole navigation bar inside a <div> or <nav> ...

Lazy-loading images to save your bandwidth

Monday, January 23rd, 2017 by Servage
If you are running website with many large images or just a very popular website, you can easily save a significant amount of bandwidth if you use lazy-loading images. Lazy loading means that images are only loaded when they are needed. In most cases this means when you scroll a page down and a new image becomes visible, it will be loaded. Installing Lazy Load There are many lazy loader plugins available and most, if not all of them, use JavaScript to handle the lazy loading logic. This time we will use a JavaScript library called Lazy Load from www.appelsiini.net/projects/lazyload. As always when when using external JavaScript libraries, they must be included in the page. To get the JavaScript file, you should install ...

Custom JavaScript video player with Video.js

Wednesday, January 18th, 2017 by Servage
video-jsWeb browsers come with a built-in HTML5 video player, but in case you want a little more freedom and flexibility, you can use a JavaScript library or even build your own video player! Video.js is a JavaScript library that allows you to make a customized video player that also supports more video formats than the default HTML5 <video> element. Initial Setup Video.js requires two files to work: one CSS file and one JavaScript file. You can download both of these files from the official website at www.videojs.com. Alternatively, you can use the CDN links found on their website. Either way, add these two files to the <head> section of your website to get ...

Handling file-uploads with PHP

Thursday, January 12th, 2017 by Servage
Upload-FilesSending files with an HTML form is quite common on websites these days. When using a help desk, you can often attach a screenshot of the issue to help customer service assist you easier. When applying for a job online, you can attach your CV to the application. In both of these cases, the attached files are processed by a server and saved to a specific location. Let’s see what it takes to build a form like this with file uploading capabilities using PHP. The HTML Let us first get started with the required HTML. All we need is a typical form with a file input field. The input field can look like ...

Detecting browser-compatibility with Modernizr

Saturday, January 7th, 2017 by Servage
Browser-CompatabilityModernizr is a JavaScript library for detecting what features are supported in a web browser. It can be used to check whether a visitor’s browser supports CSS keyframe animations, Flash videos, the latest JavaScript features and much more. If you want to take advantage of the latest browser features without dropping support from older browsers, Modernizr is a perfect addition to your website. How Modernizr Works Modernizr is a small JavaScript file that you can add to your website. It makes a Modernizr object available that you can call to query for browser support. For instance, calling the method Modernizr.flash() returns true if Flash is supported in the visitor’s web browser. If Flash ...

Use pre-made CSS animations with Animate.css

Monday, January 2nd, 2017 by Servage
animate-cssAnimate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: ...