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


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.

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);

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() {

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.

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.


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:


Subscribe to JavaScript