In usability we trust

UX and all things web

Tag: Javascript (page 1 of 2)

Future Proof Your Methods With Options Objects

Having methods that takes a lot of arguments can be a real pain. You not only need to remember which arguments to pass but also in which order to supply them. Things gets even worse when you need to add more arguments to an existing method. This article will show you a better way of doing this by using only one argument.

Continue reading

Separation of Concerns

Have you ever found yourself in a situation where you have a site where the HTML, the CSS and the JavaScript are all tangled together and it becomes a nightmare to make even the tiniest site-wide change?

Continue reading

The Little Book on CoffeeScript by Alex MacCaw

This book is a great introduction to the beautiful pseudo JavaScript language CoffeeScript. It’s written by Alex MacCaw that is also the author of JavaScript Web Applications, a book I reviewed a few month ago.

Continue reading

JavaScript Web Applications by Alex MacCaw

JavaScript Web Applications is not a book for beginners. In fact, you need to have been doing a fair share of JavaScript development to benefit from it. But if you do, It’s indispensable! Because this is finally a book that’s showing how to structure your application in a way that keeps you sane as the application grows.

Continue reading

Tinyrotator – a tiny image rotator plugin for jQuery

For a project I worked on recently I created a small and simple image rotator plugin for jQuery. It’s dead easy to embed in your own page and to style the way you want using regular CSS.

The plugin is released under both MIT and GPL licenses so you can use it any way you want in both personal and commercial projects.

Continue reading

Calculating Distances and Areas in Google Maps API 3

As I mentioned in the article Extending Google Maps API 3 with libraries a couple of weeks ago, you can add functionality to the Google Maps API by using libraries. One of these libraries are the Geometry Library. In this article I will show how you can use the function of that library to calculate distances and areas. I will also explain some additional navigation functions that you might find useful.

Continue reading

45° imagery view in Google Maps

In the latest version of Google Maps API 3 (version 3.4) a new exciting feature is introduced: 45° imagery in selected cities around the world. This feature will let you see the world from a whole new angle. This change also calls for new properties and controls for the Map Object which will all be explained in this article. As a bonus I will also introduce you to another new feature, the brand new Map Overview Control.

Continue reading

The difference between add(), find() and filter() in jQuery

There’s a few methods used for traversing the DOM-tree in jQuery that is confusingly similar, well at least they were for me. This article will explain the difference between them and when you should use which one.

Continue reading

Google Maps API 3 – InfoWindows

Using InfoWindows is a brilliant way to display information about a certain location. Since they provides you with a space to put text or whatever HTML you please, they can be used in very interesting ways. In this article, which is the fourth in a series about Google Maps API 3, I will show you how to make good use of this great feature.

Continue reading

Google Maps API 3 – Markers

Markers are the perfect way to put places of interest on a map and that’s probably one of the most used features in digital maps. In this article, which is the third in a series about Google Maps API 3, I will show you how to use them in Google Maps API 3.

Continue reading

I’m writing a book about Google Maps

It’s been a while since I last wrote on this blog and I thought I would get you up to speed why that is. The reason is that I’ve been occupied with writing a book about Google Maps.

I haven’t written a book before so this is new territory for me. What I’ve noticed so far is that it progresses far slower than I predicted, but at least it progresses steadily even if slower than anticipated. I’ve taken a few weeks off of my regular work to devote to writing this book but this time won’t suffice, so there will probably be quite a few late nights and weekends of writing as well.

Continue reading

Javascript Performance Tips

I just found this really great talk on YouTube from a Google Tech Talk called, Speed Up Your JavaScript. It’s a guy from Yahoo named Nicholas Zakas that talks about various things you can do to get better performance in you Javascripts.

Continue reading

Google Maps API 3 – The basics

gmmlogoThe Google Maps API has evolved to version 3. This version is a complete rewrite and focuses primarily on speed. The new API also features new ways of using it. This article is the first in a series exploring version 3 of the Google Maps API. This first article will take a look on how to create a simple map and explain some differences from the previous version.

Continue reading

Dynamically Toggle Markers in Google Maps

This article explains how to dynamically toggle the visibility of markers in Google Maps as well as how to deal with an annoying bug that occurs when trying to do this while using an utility library, like the MarkerManager.

Continue reading

Google Maps API version 3 is released

maps_logo_small_blueYesterday a new version of the ever so popular Google Maps API was released. In the new version the focus has been on improving speed, especially on mobile devices. I’ve been fortunate enough to be part of the beta testing and has been able to provide feeback directly to the developers. So far I think they’ve done a great job, even if there’s still more work to be done.

Continue reading

Announcing MapTooltip

One of the shortcomings in the Google Maps API is that there’s no easy way to add tooltips to polylines and polygons. That’s why I felt inclined to build an extension to Google Maps that adds that functionality. MapTooltip makes it possible to add tooltips to any kind of overlay. It’s even possible to have HTML inside it and to style it to fit your design needs.

Continue reading

Updating images with Javascript

This is a quicktip on how to update images on a webpage that retain the same filename but is periodically updated, without having to perform a full page load.

Continue reading

Non-modal alert with jQuery

jquery-logoIn circumstances where you want to notify the user of something, like for example that some information have been saved, a non-modal alert is an excellent solution. It gets your message across without being intrusive and without the need for uneccesary user interaction.

In this article I will describe how to create it with the help of jQuery

Continue reading

Global variables in Javascript

Global variables are evil. Although possibly nifty for very small programs it quickly clutters the global namespace and increase the risk for name collisions as are program grows larger. The risk for collisions are even greater when using different libraries and widgets.

Continue reading

Working with Info Windows in Google Maps

Google Maps APIHaving Info Windows in a Google Maps is a powerful way of displaying information about a specific point or object. Did you know that there are several kinds of them?

In this article I will show you how to add different kinds of Info Windows that appear when you click on a marker.

Continue reading

Basic operations with markers in Google Maps

Google MapsMarkers is one of the core features in Google Maps and an effective way of displaying places on a map. In this article I will show you how to add a basic marker to a map and also how to add some interactivity to it.

Continue reading

Unobtrusive Google Maps

When developing web applications we can never be sure what the environment for the user is. He could for example use our application from a mobile device with a browser with limited Javascript support. Like Roger Johansson pointed out in Making Google Maps more accessible, we must prevent our applications from breaking under these circumstances by making them degrade gracefully.

In this article I will show you how to make Google Maps degrade gracefully by providing a fallback for non-javascript users using the Google Static Maps API.

Continue reading

Populating Google Maps with Microformats revisited

A few month ago I posted about a demo where I used content marked up with Microformats to populate a Google map using Javascript. Well, now I’ve improved that demo somewhat.

Continue reading

Polylines in Google Maps [Part 2]

In part 1 I showed how to use and optimize performance on polylines in Google Maps using Javascript. In this article I will show you how to get even better performance by encoding the polylines on the server.

Continue reading

Bounding Box in Google Maps

Normally when you initialize a new Google map you set the coordinates for the center of the map and manually specifies the initial zoom level. Sometimes, however, there’s a need to dynamically calculate the center point and zoom level for certain content to fit into the viewport.

Continue reading

Polylines in Google Maps [Part 1]

Polylines are used to mark out roads, borders and other things that are made of lines in maps. The Google Maps API offers a class for drawing these lines on a Google Map called GPolyline. In this article I will show you how to use these and how to deal with potential performance issues when the polylines gets more complex.

Continue reading

ASP.NET MVC and JSON

In the AJAX community, JSON have become the preferred way of sending and receiving data. That’s not surprising since it’s lightweight, fast and easy to understand. Also, since it’s a subset of Javascript, it’s familiar territory for Javascript coders.

In the ASP.NET MVC Framework, passing JSON from the server to the client script is almost too easy. In this article I will walk you through the code required to make it work.

Continue reading

Effective Use of Custom Icons in Google Maps

Google MapsI’m currently developing a web application that uses Google Maps and have lots of markers with custom icons to mark different things on the map. To administer all these different icons is quite a chore and it took me some time to find an effective way of working with them.

Continue reading

jQuery + ASP.NET = true

jQuery is going to be a part of Visual Studio. This is a great, and I must say, an unexpected development of things.

For me personally, who’s already using jQuery along with ASP.NET, the main difference will be the intellisense annotation support for jQuery. This will be a welcomed enhancement of my development environment. Needless to say the asp.net team at Microsoft will also build ready-to-use controls in the ASP.NET AJAX Control Toolkit that builds upon jQuery.

According to Scott Guthrie there will be a free download with the jQuery Intellisense support in a few weeks. The ASP.NET MVC download will also contain it and the jQuery library.

Read more about it on Scott Guthrie’s blog and in John Reisig’s blog post on jQuery.com.

Imagemap rollover

Imagemaps was very popular in the early days of webdesign but seem to have fallen out of grace. Probably due to accessibility problems and the rise of CSS based designs. I think that it still has it’s place when used properly and one being aware of it’s potential accessibility problems.

In a recent project I was building a map where different regions of a map would highlight when you hover with the mouse over it. Using an imagemap in combination with CSS and JavaScript seemed like the natural way to do it.

I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.

Continue reading

Older posts