Thermometer Gauge

Gauges are a very nice and user-friendly way to visualize values. But somehow everyone is scared to build an own gauge from the scratch. After thinking a little bit about what is needed to create a basic gauge, it seemed to me that making my own gauge is not as hard as everyone thinks. In reality you will figure out, that it is a real simple process. We want to make a thermometer gauge, so let us at first think about what is behind it and what we need.

Read more

Custom Treeview – Part Two – Dynamic Treeview

This is the second part of the Treeview control tutorial. This part focuses on the dynamic generation of a Treeview from a datasource. If you haven’t read the first part, then I advice to so, just to understand the basic layout of a static Treeview that will be generated dynamically in this part. It is absolutely unimportant what kind of data source you use. If the data are loaded from a back-end service via AJAX, parsed from a XML-file, or from where ever you get your data. The only important thing is that your data include some minimum parameter for the hierarchy.

Read more

Custom Treeview – Part One – Static Treeview

Making a custom Treeview must not be complicated at all. This is the first of a two-part tutorial. In this part we will make a static, hard coded Treeview control with HTML, CSS and jQuery. In the second part we will then make a dynamic, data-driven Treeview control based on the knowledge of this part.

Read more

Animated Article Switching

What we want to make

We want to make an element that holds an amount of articles (or whatever content you want). We want to have a bigger column where one articles is displayed to the user for reading and a smaller column on the right side, where all other articles are displayed. The user will have the ability to switch the opened article and we want a little animation for the switching process.

Read more

Border-Radius Animation

Recently I stumbled over a strange behavior regarding border-radius and animating it via jQuery and learned that the browser don’t reacts in the way I expected it. No browser, not IE, FireFox, Chrome, Opera. So it must be somehow a wanted behavior, but for what I have not found a real documentation. So, if you plan to work with animating the border-radius, here you will get the workaround.

Read more

Image Transition

In a lot of sliders, mouse-overs and image-changers you see some kind of transitions. They are toggled, slided, faded, or have any other pre-defined effect. Self implemented transition effects you only see rarely or in high-class plug-ins. I was wondering what the reason for this is. Is it because it is to much work, or is it because the people don’t know how to implement it? If you want to implement your own image transition, but you don’t do it, because it is too much work, then I can tell you, you are wrong. You can implement a transition effect with a few lines of code. If you want to implement your own image transition, but you don’t know how to implement it, then read on, I will show you how easy it is. If you don’t want to implement your own image transition, because it is not interesting to you, or you are more than happy with the effects that jQuery delivers by itself, then you better stop reading, because you have chosen the wrong article.

Read more

Parallax Slider

Today you find sliders on quite a lot business and private web sites. There are also thousands of different slider plugins available. But more than often you will find out very fast that there is no plugin out there that really fits the specific needs of your actual project. So you spend more time than needed again on google to find the perfect plugin for you, only to find out that all plugins are kind of generic (and have to be to fit general needs) and will not bring all the little details you would like to have for that special website.

Parallax Slider

The best solution would be to create your own slider from scratch. And that is exactly what we do now. You will see that it is not as hard as you thought. I have decided to make a “Parallax Slider”, because it is something that is not on every page existing (up to now). The features that our slider will bring are:
 

Read more

Responsive Design with Media Queries

Everyone is talking about responsive design and it is the big topic in the web design world. But what is it and how does it work?

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

This definition of responsive design sounds complicated, but is in reality a simple thing. Or let me say it is not much harder then the complete web design process.

Read more