Category: JavaScript

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 you might want to use […]

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 customer wanted the countdown timer […]

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 file based on committed files. […]

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 for the video container:

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 reloaded, thus reflecting your changes.

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 can be found here: E-Learning […]

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 API offers this functionality out […]

jQuery Multi File Upload

A couple of days ago I accidently discovered‘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 quite valuable as it provides […]

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 value and not null. You […]

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

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 this principle. It demonstrates that […]