Category: JavaScript

jQuery Logo 0

jQuery Lights out Plugin

In current times, saving energy in all its variants is becoming more and more important each day. When it comes to websites one simple way to save energy is to dim the display when idle. Both Interact has released a simple yet versatile cross-browser jQuery lights out plugin. In order...

Magento Logo 0

Handling cookies in Magento with JavaScript

In order to handle cookies in Magento refer to /js/mage/cookies.js. The functions for getting, settings and clearing cookies are: Mage.Cookies.set Mage.Cookies.get Mage.Cookies.clear Below you find the corresponding JavaScript functions from cookies.js: Generic cookie clear function In case you are searching for a simple, generic function to clear (Magento) session cookies...

jQuery Logo 0

Adding advanced formatting to Harshen’s jQuery countdown timer plugin

Harshen’s jQuery countdown timer plugin works great and is simple to use. In a recent project we needed to use special formatting for the countdown timer to be implemented. Although, Harshen’s solution offer to timeSeparator option to specify the separator string to be used this was not flexible enough. The...

Simple modal HTML dialog overlay 0

Simple modal HTML dialog overlay

In case you don’t want to deploy full fledged JavaScript libraries, such as jQuery or Dojo, to implement a simple modal HTML dialog overlay here is a quick and easy way to do so based on plain HTML, CSS and JavaScript. It works on all modern browsers. First, let’s have...

Git Logo 0

Custom build script for GIT based projects

When managing smaller GIT based projects I find it helpful to opt for custom build scripts rather than having to deal with the overhead of setting up proper Jenkins (or-likewise) runtime environments. In order to deal with this need I’ve created a simple build script that creates a compressed TAR...

VideoJS Zeige Standbild Nach Abspielen von VideosVideoJS Show Poster Image after video stopped 0

VideoJS Zeige Standbild Nach Abspielen von VideosVideoJS Show Poster Image after video stopped

By default, the video.js simply shows the last frame of the video once the end has been reached. Sometimes, it comes in handy to show the poster image again once the video has stopped. Luckily, this behavior can be easily achieved: For the sake of completeness here is the HTML...

jQuery Logo 0

Update button text in JQuery Mobile

In case you wondered how it is possible to update the text of a <button> element created by markup in jQuery mobile (i.e. not a button generated using <a data-type=”button”>) you need to set the text and then call refresh on the node: refresh() actually causes the node to be...

Generating optimized JavaScript Source Code using Dojo’s Build System 0

Generating optimized JavaScript Source Code using Dojo’s Build System

The Dojo Toolkit represents one of the most powerful and feature-rich JavaScript libraries to-date. Apart from its core functionality such as DOM manipulation (i.e. Dojo namespace) it provides developers with a vast range of widgets (Dijits, i.e. Dojo Widgets), lots of incubator code (DojoX) and numerous Utils classes. (More info...

Google Logo 2

Draggable Pin Marker for Google Maps API V3

Google’s Maps API offer a vast range of functionality to interact with underlying maps. As opposed to statically setting markers (pins) programmatically sometimes you might want your users to be able to interact with the map by dragging existing markers around the map. Google Maps API V3 Fortunately, Google’s JavaScript...

jQuery Logo 0

jQuery Multi File Upload

A couple of days ago I accidently discovered https://blueimp.net/‘s jQuery File Upload. Update Finally I found some time to post back on jQuery File Upload. As of this writing I have successfully integrated blueimp’s jQuery multi file uploader plugin into a Zend-based web application. The plugin has proven to be...

Verbinden von JSON Objekten mittels DojoMerging JSON objects using Dojo 0

Verbinden von JSON Objekten mittels DojoMerging JSON objects using Dojo

A simple way to merge JSON objects is to use dojo.mixin(): The above code will result in {foo:”bar”, bar:”foo”}.

html is null” error using set(‘value’) for dijit.Editor 0

html is null” error using set(‘value’) for dijit.Editor

Be aware of the fact the using editorDijit.set(‘value’, null) will result in an error (“html is null”) rather than setting an empty value. I’ve experienced this behavior when trying to update a dijit.Editor using dijit.form.Form generated data. It seems like only an empty string can be set for an empty...

Scrollbar in dijit.layout.ContentPane aktivierenActivate scrollbar in dijit.layout.ContentPane 1

Scrollbar in dijit.layout.ContentPane aktivierenActivate scrollbar in dijit.layout.ContentPane

It seems that if dijit.layout.ContentPanes are nested inside other containers, such as dijit.layout.BorderContainer they do not automatically display the scrollbar when content overflows their visible area. In order to force a scrollbar simply specifiy the CSS directive overflow:auto, e.g.

dojo.dnd Elemente programmatisch zwischen Containern verschiebenProgrammatically move dojo.dnd items between containers 0

dojo.dnd Elemente programmatisch zwischen Containern verschiebenProgrammatically move dojo.dnd items between containers

In order to programmatically move dojo.dnd items (dojo.dnd.Item) between containers (dojo.dnd.Container) you only need to insert existing nodes from the source container into the target container, delete any moved nodes from the source container and finally sync() both containers to update the underlying metadata. The following code snippet should clarify...