JavaScript

Developing a blogger.com gadget that displays both, an image and the title of the most recent post

The steps do do so would be the following:

  1. Look up the internet for getting started documentation for blogger.com gadgets (Blogger documentation)
  2. Write a helloworld gadget and try to upload the gadget to your blog (add the helloWorld Gadget to your ftp, add it then to your layout by choosing "Layout" and clicking the following, at last enter an URL and hit the "add url" button)
  3. if the upload was successful look up how one can get the image link and the title of the most recent post programmatically
  4. search the web how to display an image and a title with xhtml
  5. search the web how to style the previsouly mentioned tags with css accordingly
  6. put the pieces together and test
  7. iterate until the desired outcomes are archieved
  8. upload the solution to your blog

In order to get a kick start, here the helloWorld.xml


<?xml version="1.0" encoding="UTF-8" ?>

Description of the structure:

  • ModulePrefs: Here preferences for the gadget can be defined, which can then be used within your code
  • your custom HTML, CSS and JavaScript all goes into the Content part. as CDATA

Taggings:

Create android application by using standard web technologies such as HTML5, CSS3, and JavaScript

The goal is to build applications for mobile devices using well known standard web technologies like JavaScript, HTML5, and CSS3, instead of device-specific languages such as Java or Objective-C.

How can I add social Media Buttons (Facebook, Twitter & Co.) to jQuery colorbox?

The aim is to display social media buttons on each image in the jQuery colorbox view. As displaying something other than text in the lightbox is not possible by default (<a href="http://www.jacklmoore.com/colorbox/">jQuery colorbox</a>) (see documentation, demo), we need a custom solution to do the job. Note: As jQuery colorbox is a Plugin for certain content management systems, it is important that the change should be done WITHOUT changing the code of the lightbox and WITHOUT accessing the HTML directly, as Plugins for CMS should not be modified as they will loose update compatibility. The result should look like in attachment 1 (sample.png).

Testing JavaScript with various frameworks and sharing them

In an experimental state of your new solution there is often a phase where you don't know how to solve a problem in JS/HTML in the best way. The set up that is required localy is often complicated because of including of all necessary libraries and the testing is often a very monotonous repeating of adding of files.

Use Firefox Add-On Firebug

For JavaScript debugging one can use the Firefox add-on Firebug.
To install the add-on: go to the 'Firefox' button in the browser, select 'add-ons', then search for 'Firebug' using the search engine and consequently install the add-on.
After restarting Firefox go to the 'Firefox' button again, select 'Web Developer', 'Firebug', 'Open Firebug'. Then the Firebug panel will open in the lower side of the opened tab. There select 'Script' and 'Enable' and you are ready to start debugging.
To debug you can insert breakpoints and then reload the page. It will break when encountering the line. Then you have the possibility to see variable values, continue running the script, enter, skip or exit functions etc.

Taggings:

Debug JavaScript

When programming with JavaScript it may be necessary to debug functions, get to the roots of error messages and warnings and check variables'values.

How to personalize web pages with additional functions in Firefox ?

I have many favorite web pages which I visit very often. But not all of them give me the features and functions I expect from them to be perfectly user-friendly. For example: a button in order to download videos from YouTube, the possibility to search Usenet file names from Forums directly in the NZB Index, etc. I would like to make and add my own customizations, but also find some new ideas from an existing community.

Google Maps API Polyline and GMarker

Drawing the lines is easy with the use of the well documented Google Maps JavaScript API.

http://code.google.com/apis/maps/documentation/javascript/overlays.html

For lines i used Polylines "A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence."

So first prepare the coordinates

coordinateArray[pointNr] = new GLatLng(Latitude, Longitude);

and then draw the polyLine on the map

var polyLine = new GPolyline(coordinateArray, color, opacity, weight);
_map.AddOverlay(polyLine)

For creating the stations i used GMarker with a customized GIcon.
The click event for showing additional information is done by adding an GEvent

Simple example:

var marker = new GMarker(point, icon); //point = single GLatLng object
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
_map.addOverlay(marker);

the text can contain HTML Tags like links etc.

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.

Pages

Subscribe to JavaScript