Servage Magazine

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

Articles Tagged ‘html’

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

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

Introduction to HTML5 canvas element

Saturday, December 1st, 2018 by Servage
html5-canvasThe <canvas> element is probably the greatest addition to HTML5. This new element can be used to create anything from a single-color box to complex shapes and charts. We will take a look at how to build some simple shapes with the <canvas> element and learn what can be achieved with more advanced use of the element. What is an HTML5 canvas? In simple terms, a canvas is a <div> inside which you can render graphics. Those graphics can be simple shapes such as circles and boxes, or more complex graphics like charts and even animations. A canvas can be created with the <canvas> tag. This might come as a surprise, but drawing to ...

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

Create a cool CSS-based tab-menu

Tuesday, April 10th, 2018 by Servage
We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> ...

Servage Web Development Course Part 5: Forms

Friday, March 9th, 2018 by Servage
Welcome back to the development course. Now it's time to learn about forms. You may have noticed that forms are used all over the web to get user input. This happens in various ways, by entering information into text fields, select something from a drop-down box, chose among multiple options in buttons etc. The one thing that is valid for all of them, is that it is in some way or another a method of getting information (input) from the user. In this part we will go through the basic form and input elements. The form itself The typical HTML form is enclosed by the <form> tag, which holds two important attributes, "method" and "action". The "method" attribute ...

Servage Web Development Course Part 4: Tables

Friday, March 2nd, 2018 by Servage
blogimageToday we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been "normal" for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data. The table HTML structure The <table> tag has three sub-elements, which could ...

Servage Web Development Course Part 3: Layout and page structure

Friday, February 23rd, 2018 by Servage
blogimageEvery website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there - somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let's have a look at a sample <div> container structure (part3a.html of the project files): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...