mFabrik - mobile sites, apps, HTML5 and CMS software development » jquery

Simple image roll-over effect with jQuery

Mikko Ohtamaa — Thu, 26 May 2011 09:18:00 +0000

Here is a simple jQuery method to enable image roll-over effects (hover). This method is suitable for content editors who can add images only through TinyMCE or normal upload - naming image files specially is the only requirement. No CSS, Javascript or other knowledge needed by the person who needs to add the images with roll-overs.

Just include this script on your HTML page and it will automatically scan image filenames, detects image filenames with special roll-over marker strings and then applies the roll-over effect on them. Roll-over images are preloaded to avoid image blinking on slow connections.

The script:

/**
 * Automatic image hover placement with jQuery
 *
 * If image has -normal tag in it's filename assume there exist corresponding
 * file with -hover in its name.
 *
 * E.g. http://host.com/test-normal.gif -> http://host.com/test-hover.gif
 *
 * This image is preloaded and shown when mouse is placed on the image.
 *
 * Copyright Mikko Ohtamaa 2011
 *
 * http://twitter.com/moo9000
 */

(function (jQuery) {
        var $ = jQuery;

        // Look for available images which have hover option
        function scanImages() {
                $("img").each(function() {

                        $this = $(this);

                        var src = $this.attr("src");

                        // Images might not have src attribute, if they
                        if(src) {

                                // Detect if this image filename has hover marker bit
                                if(src.indexOf("-normal") >= 0) {

                                        console.log("Found rollover:" + src);

                                        // Mangle new URL for over image based on orignal
                                        var hoverSrc = src.replace("-normal", "-hover");

                                        // Preload hover image
                                        var preload = new Image(hoverSrc);

                                        // Set event handlers

                                        $this.mouseover(function() {
                                                this.src = hoverSrc;
                                        });

                                        $this.mouseout(function() {
                                                this.src = src;
                                        });

                                }
                        }
                });
        }

        $(document).ready(scanImages);

})(jQuery);

Get developers Subscribe mFabrik blog in a reader Follow me on Twitter

domgen – Creating HTML with Javascript without DOM API

Jussi Toivola — Thu, 02 Sep 2010 12:43:41 +0000

Tired of using Javascript DOM API for generating HTML dynamically? Meet domgen. domgen is a tool for easy dynamic content generation via Javascript. It generates DOM elements from dictionary specification similar to HTML and eliminates the need for cumbersome DOM Javascript API.

domgen uses a simple specification to generate the HTML. In some cases it’s more reliable to use DOM API to generate HTML instead of using innerHTML. We have had problems especially with iPhone when using innerHTML.
See for example http://pastebin.com/LLk3J0iH or google “iPhone innerHTML” for more info. In fact, innerHTML is not even part of the HTML standard even though it exists on every browser.

So if you want to add dynamic HTML properly, you should use the Javascript DOM API. Consider the following short HTML where the contents inside body had to be generated:


    my div

Using Javascript DOM API:

// Get the body tag
var body = document.getElementsByTagName("body")[0];
// Create 'div' element
var mydiv = document.createElement("div");
mydiv.setAttribute("id", "mydiv");
mydiv.innerText = "my div";
// Attach the div to body
body.appendChild(mydiv);

And using domgen:

var spec = [
    'div',
    {
        id : 'mydiv',
        _innerText : 'my div'
    }
];
domgen.generate( domgen.get("body")[0], spec);
// or with jQuery
domgen.generate( $("body")[0], spec);

To me, domgen seems a lot easier to read and work with. Get code and more examples here: https://bitbucket.org/mfabrik/domgen

Creating a drag’n'drop basket with jQueryUI

Mikko Ohtamaa — Tue, 05 Jan 2010 12:53:07 +0000

I have created an example how to create a “basked” with jQuery and jQueryUI with the following features

The user can be pick items from the predefined set
Items are dragged and dropped to the basket
The basket value reflects a hidden input

This kind of user interface pattern is suitable for

Shopping carts
Travel planners

The example in fact bears the name “travel planner” but it is not tied to travel anyhow.

Note: this is just a screenshot - please see live example

The example code uses

google.code() content delivery network to load jQuery and jQueryUI
jQueryUI draggable and droppable features
Well planned visual cues for the drag and drop operations: cursor changes, CSS hover classes
which value is updated according to the basket content – all selected item ids form a comma separated list

The example code is well-documented with links to the further documentation.