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

This weeks interesting stuff as seen in the Intterwebs.

jQuery

Jay Salvat rewrote jTagEditor and published it with new name:

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

Janis Skarnelis came out with FancyBox.

Inspired by many other lightbox-like tools, now made kinda different image zooming script for those who want something fresh. It`s powered by great javascript library – jQuery, tested with IE6, IE7, Firefox.

iPhone

There is iPhone web SDK after all. You just need to pay 99USD to register.

If you head over to the iPhone DevCenter (registration required) you will find a video titled “iPhone SDK for Web Developers” that goes into detail.

When you watch it you will see a ton of great stuff:

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

Several people have asked me to add timeout option to Lazy Load plugin. As before, only images inside viewport would be loaded and page will come to ready state faster. However browser would load rest of the images automatically after specific amount of time.

I do not think it is necessary to add another configuration option for it. It all can be done with few lines of JavaScript.

Custom events

By default Lazy Load binds to scroll event. When window is scrolled plugin checks if any new images have become visible. For this case we want to use something different. We could use any of the normal jQuery events such as click or dblclick. But lets invent our own event. We will name it sporty.

$(document).ready(function() { 
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif",
        event : "sporty" 
     });
});

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

Alert! Alert! Another boring new release is out blog entry ahead. If you are bored already go ahead and download latest (1.5.0 at time of writing) Jeditable source, minified (recommended) or packed.

More info and should-be-better documentation at project page.

What is new or changed?

• Added placeholder parameter. This can be html on plaintext string. It will be shown when editable element is empty.
• Returned JavaScript is now executed. Allows us to do tricks like returning <script>alert(‘Saved!’)</from> from the save script.
• Hacks which supported old getload and postload parameters are now removed. Use loadurl and loadtype instead.
• Callback should now be given in options hash not as third parameter.

Usage of new or changed options below:

 $(".editable").editable("http://www.example.com/save.php", {
     placeholder : "Click me to edit",
     loadurl : "http://www.example.com/load.php",
     loadtype : "POST",
     callback: function(value, settings) {
         console.log(this);
         console.log(value);
         console.log(settings);
     }
 });

Thanks

Thanks to Ole Laursen, Dylan Verheul and Mariano Iglesias for providing patches and ideas!

Maybe your get greedy and two buttons in you in place editor is not enough. Maybe your boss says submit and cancel is not enough. He want to have maybe button too. Maybe you want to be as confusing as Excel save dialogue. This is a walkthrough on how to add the third button.

Available methods for creating custom input

When creating custom input type you want to define one or several of these 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(s) input should be set to. Inside all methods this represents the form.

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.