Dropdown 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> ...
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
Dropdown 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
Web 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
Sending 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
Modernizr 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 ...
Security feature GeoIP Security
Thursday, January 5th, 2017 by Helge
Unfortunately it is a fact that security threats are a reality on the Internet! To address these and to make your hosting package even more secure, 
we have GeoIP Security added to each Servage account. This feature enables you to prohibit possible intruders to gain access to your account based on their geographic location or IP address. You can enable GeoIP Security in the control panel, where you also have the ability to specify specific countries and IPs to allow access.
How does this work? Whenever someone tries to login the user is verified against our database to identify if that particular user is allowed to login from that particular geographic location or ...
we have GeoIP Security added to each Servage account. This feature enables you to prohibit possible intruders to gain access to your account based on their geographic location or IP address. You can enable GeoIP Security in the control panel, where you also have the ability to specify specific countries and IPs to allow access.
How does this work? Whenever someone tries to login the user is verified against our database to identify if that particular user is allowed to login from that particular geographic location or ...
Recent comments