Mika Tuupola

In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.

If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML. It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "markitup",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    markitup  : markitupHTML
});

Again we start by adding custom input type called markitup.

Read the rest of this entry

Previously i showed you how to create inline timepicker for Jeditable. This time we will create autogrowing textarea. This custom input will adjust its height while you type. Code uses excellent Autogrow jQuery plugin by Chrys Bader.

If this is your first encounter with Jeditable custom inputs you might want to read an introduction to them.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }
});

We start by adding custom input type called autogrow.

Read the rest of this entry

You can now add some oomph to your Lazy Loaded images. New effect parameter accepts any jQuery effect. When lazy image is loaded plugin will make it appear using chosen effect. Obviously effects such as fadeOut wont work. Use only effects which make image appear, not disappear.

$("img").lazyload({
    placeholder : "img/grey.gif",       
    effect      : "fadeIn" 
});

To see code above at work, check fadein demo. Are there any other features you would like to see? Leave a comment.

Related entries: Delayed Loading of Images, Lazy Load Sideways, Preload Images Sequentially With jQuery

Inline editing is not only limited to text and textarea inputs. In this tutorial you will learn how to make inline timepicker with JavaScript. We will be using the usual tools: jQuery and Jeditable.

Before continuing you might be interested in reading introduction to custom input types for Jeditable.

Available methods for creating custom input

When creating custom input type you want to define one or several of following methods. None of them are mandatory.

$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { }
});

All methods receive two parameters. Settings is Jeditable settings hash. Original is the original element which was clicked. Method content() also receives third parameter string which is the value input should be set to. Inside all methods this represents the form.

For this example we will be using three methods.

Read the rest of this entry

Frontend coders have a life lasting problem. How to explain art director file inputs can not be styled? File Style to the rescue! It is a jQuery plugin which enable you to do just that. Style file inputs.

Code is inspired by work of Shaun Inman with one main difference. This version mimics vanilla file input by showing what file user has chosen.

How does it work?

Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

Read the rest of this entry

Lazy Load plugin has been quite popular recently. Atleast two Prototype ports have been created. First one by Edd Couchmann. Second one by Bram Van Damme. Congrats guys. Now Prototype people can enjoy lazy loading sweetness too.

I just added most requested feature. Sideways lazy loading of images in wide pages. I guess you could also call it right of fold. Demo page here.

As an added bonus you get four new selectors: belowthefold, abovethefold, rightoffold and leftoffold. You can get some performance improvements using these. Attach plugin only to images below the fold with:

$("img:belowthefold").lazyload();

Or do something with all paragraphs far away right on wide page:

$("p:rightoffold").something();

There are still some issues I would like to solve. In meanwhile download latest from the project page.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. After reading YUI introduction I though this is cool! After reading through source thought changed to this needs some jQuery simplicity So I stole borrowed couple of great ideas from Matt’s code. Result is Lazy Load plugin for jQuery.

What does it do?

It delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down. This is exact opposite of image preloading. With long pages containing heavy image content end user result is the same. Page feels snappier. Browser is in ready state after loading visible images. No need to wait for n pictures to load.

From Wikipedia: Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.

That said Matt’s code does much more. I was only after lazy loading and simplicity of use. If you need more features go for YUI.

Show me more!

Demo page is available. For download and usage instructions info see Lazy Load project page. Or check under the hood.

Related entries: Sequentially Preloading Images With jQuery

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. Demo page is available.

How to use?

Lazy Load depends on jQuery (doh!) and dimensions by Brandon Aaron. Include them in your header:

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.dimensions.js" type="text/javascript"></script>
 <script src="jquery.lazyload.js" type="text/javascript"></script>

and in your code do:

$("img").lazyload();

This causes all images below the fold to be lazy loaded.

Setting sensitivity

There are options for control maniacs who need to finetune. You can set threshold on how close to the edge (don’t push me too far) image should come before it is loaded. Default is 0 (when it is visible).

$("img").lazyload({ threshold : 200 });

Setting threshold to 200 causes image to load 200 pixels before it is visible.

Placeholder image

You can also set placeholder image and custom event to trigger loading. Place holder should be an url to image. Transparent, grey and white 1×1 pixel images are provided with plugin.

$("img").lazyload({ placeholder : "img/grey.gif" });

Event to trigger loading

Event can be any jQuery event such as click or mouseover. You can also use your own custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the window. To prevent all images to load until their grey placeholder image is clicked you could do:

$("img").lazyload({ 
    placeholder : "img/grey.gif",
    event : "click" 
});

Using effects

By default plugin waits for image to fully load and calls show() to show it. You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.

$("img").lazyload({ 
    placeholder : "img/grey.gif",
    effect : "fadeIn" 
});

When images are not sequential

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failurelimit option.

$("img").lazyload({ 
    failurelimit : 10
});

Setting failurelimit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.

Delayed loading of images.

Not exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo.

$(function() {          
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif", 
        event : "sporty" 
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

Download

Latest source, minified or packed.

Known problems

Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not. Also jQuery 1.1.4 had bug #1556 which caused plugin to run in IE after images were already loaded. This was fixed in jQuery 1.2. If you can not upgrade use jQuery 1.1.3.1 or older.

I have received many feature requests lately. Most of them have been worth of adding. People have different needs. But I have been worrying about jEditable becoming feature creep. Thats why I figured out another aproach.

For those in hurry. Check the custom input types demo for some proof on concept inputs.

Write your own input types

Sometimes you need multiple selects. Your form might need special third button which is not submit or cancel. Sometimes you want to use some other plugin such as Date Picker for editing.

There is no point adding separate parameter for all of these. Code would become bloated. Thus I have been working on enabling other developers to add new input types. Think of it as plugins for in place editor plugin.

Read the rest of this entry

Here is a small code snippet I use for preloading images for mouseovers. It uses $(window).bind(‘load’, function() {...}) to wait until all page elements have finished loading. This includes all images. If you use $(document).ready() it would start preloading images while other elements are still loading. This will make rest of the page feel slow.

Code below searches for all images with class hover. Then it adds _on to image name and pushes it to preload queue. When page has finished loading, images in preload queue get loaded. Loading happens sequentially one by one. Thus reducing stress to server.

Preloading code is based on mailing list post by Luke Lutman. Note that currently this code throws stack overflow with IE when there is more than 15 images to be preloaded. I am currently working on version which avoids this problem.

Read the rest of this entry