JavaScript

Draw lines and points with popup on google maps

I had to draw multiple points on a map from google maps, that represents stations. These points should show some information when clicked, like name etc. Additionally i had to draw a line between two stations, which represents the power cables that connects them. On an web-interface the user can search stations by different criteria, for which then i can fetch the coordinates.

Cross-window messaging

Web pages often consist of multiple frames that coexist on a single visual page. A good example are advertisements, which are semantically not part of the content of the actual page and technically separated into an own frame. The consequence of this separation is that such ads have their own context and cannot access the context of the main web page. This is a necessary security measure, since otherwise ads would be able to spy on the user as he interacts with the web application. Sometimes however, it is necessary to split a single web application into multiple frames for technical reasons even if they belong together from a semantic point of view. Such an example would be a SVG graphic nested in its own <em>iframe</em> within a web application. Let's take an application as an example, that has a SVG graphic with selectable areas which the user can click on, that then displays data for the selected area in the main application. The browser forbids direct JavaScript interaction like function calls or changes of variables between the main frame and the frame that contains the SVG graphic, making it impossible to notify the web application about the users action in the graphic.

Full screen random background images on a website

As mentioned above the challenge is to have full screen background images on a webpage. The images should be chosen from a pool of images randomly. Everything needs to be browser independent. There should not be some CSS3 because IE does not handle CSS3 well enough at that time.

Taggings:

improving user experience with js-libraries

through the last couple of years the web got more and more dynamic, nowadays websites and web based applications often provide a quite "rich" user interface. today it's quite easy to improve the gui of the own application/website by using one of the popular javascript frameworks. those frameworks ease the dynamic modification of the dom model, the usage of "dhtml"-features and the integration of ajax based features.

the following article gives a good overview of the most important js-frameworks:

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

Web data extraction with Chickenfoot and JavaScript

Given Chickenfoot as a JavaScript based Web Data Extraction tool, one can use JavaScript methods in the Chickenfoot script as well. For the given problem with the method find() it is useful to use the native JavaScript method document.evaluate() instead for retrieving data and going through the DOM tree.

Taggings:

Web data extraction using Chickenfoot

Chickenfoot is a firefox plugin and a very convenient non-visual tool for web data extraction. For the navigation in swoodoo.com, a meta search engine for flights, I used the Chickenfoot methods. The problem occured when I tried to locate a specific element in the DOM tree. The Chickenfoot method find() returns an unhandy wrapper of the HTML structure.

Easy to use Multilanguage system for JavaScript

My basic idea on this problem was, to make a similar handling than it is done for multilanguage on serverside. So basically what we need is a file which contains the translations for constants which should be accessible for javascript.

I then created following JavaScript file named "translation.js", which contains the constants for the specific languages and a function which will retrieve them and return a translated String for the constant.


var ML_en_US = [];
ML_en_US['SPACE_PROVIDING']= 'Space providing';
ML_en_US['DEFENSE_STRENGTH']= 'Shieldstrength';
ML_en_US['RESS_STORAGE']= 'Ressource-Storage';
ML_en_US['RESSOURCE']= 'Ressource';
var ML_de_DE = [];
ML_de_DE['SPACE_PROVIDING']= 'Platz';
ML_de_DE['DEFENSE_STRENGTH']= 'Verteidigungsstärke';
ML_de_DE['RESS_STORAGE']= 'Rohstoffkap.';
ML_de_DE['RESSOURCE']= 'Rohstoff';
function ML(tag, language){
try {
var result = eval('ML_' + language + '["' + tag + '"]');
if (result == undefined) return "e:"+tag;return result;}
catch (err) {
return "e:"+tag
}
}

Now arrays can be defined, which have the respective language code in their variable name, and the index is the constant used for translation. By an "eval" command the script looks for the translated version. If there is no translation available the script will catch the error and put "e:" in front of the constant and return that, so it is clearly visible to the designer, that there is no translation available for the constant at the moment.

Multilanguage in JavaScript

The problem is to provide methods and necessary data for JavaScript to be able to translate Strings which are shown on the page into different languages. Considering the webdesigner shouldnt have too much work to implement it, the function should be easy to use.

Event Handling in Javascript IE and Mozilla

As scripted sites can be very useful to users and EventHandlers in Javascript are a nice feature if you have a more complex site, we want to create a Method so EventHandlers will be recognized in Internet Explorer as well as in Mozilla browser and function as intended.

AutoComplete input box

For the improvement of user experience on a web site it is useful to provide a autocomplete element on some inputs. On the Internet there are many scripts available for download which implement autocomplete functionality. Unfortunately most of them are not functioning properly in all web browsers or have other important drawbacks - are not skinable, not flexible for different uses, etc. We want to implement a good autocomplete widget which would not have all the mentioned disadvatages.

Pages

Subscribe to JavaScript